:root{
    --app-header-height:calc(64px + var(--safe-area-top));
    --app-viewport-height:100vh;
    --main-shell-padding:20px;
    --order-form-shell-offset:56px;
    --safe-area-top:env(safe-area-inset-top, 0px);
    --safe-area-right:env(safe-area-inset-right, 0px);
    --safe-area-bottom:env(safe-area-inset-bottom, 0px);
    --safe-area-left:env(safe-area-inset-left, 0px);
    --bg:#0b0f14;
    --panel:#121924;
    --panel-2:#0f1520;
    --text:#e7eef6;
    --muted:#9fb0c2;
    --muted-2:#6e829b;
    --border:#1f2b3a;
    --surface:#121924;
    --accent:#ff8800;
    --accent-2:#ffd700;
    --good:#3bd671;
    --warn:#ffd166;
    --bad:#ff5d73;
    --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.02);
    --radius:12px;
    --surface-hover-border:color-mix(in srgb,var(--accent) 32%,var(--border));
    --surface-active-border:color-mix(in srgb,var(--accent) 44%,var(--border));
    --surface-hover-bg:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 8%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    --surface-active-bg:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 74%,var(--panel-2));
    --surface-card-bg:
      radial-gradient(120% 110% at 0 0, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 54%),
      color-mix(in srgb,var(--panel) 88%,var(--panel-2));
    --surface-soft-bg:
      radial-gradient(120% 90% at 0 0, color-mix(in srgb,var(--accent) 6%,transparent), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    --surface-soft-border:color-mix(in srgb,var(--border) 82%,transparent);
    --surface-card-shadow:0 22px 54px rgba(5,10,20,.28);
    --surface-focus-ring:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
    --scrollbar-track:rgba(255,255,255,.06);
    --scrollbar-thumb:rgba(255,255,255,.24);
    --scrollbar-thumb-hover:rgba(255,255,255,.32);
    /* App-Sockel-Tokens (Mailbox-Stil) — verbindlich für alle Bereiche */
    --page-gap:16px;
    --page-layout-gap:14px;
    --list-gap:6px;
    --header-gap:12px;
    --detail-gap:18px;
    --compose-form-gap:12px;
    --radius-large:14px;
    --radius-medium:12px;
    --radius-small:10px;
    --radius-tiny:8px;
    --badge-radius:999px;
    --border-strong:1.5px solid var(--border);
    --border-thin:1px solid var(--border);
    --border-dashed:1.5px dashed var(--border);
    /* Einheitliche Mikro-Label-Typografie für Section-Titles, Eyebrows & Formular-Labels.
       Eine Quelle der Wahrheit statt gemischter .4px/.5px/.6px/.08em-Werte. */
    --label-size:11px;
    --label-tracking:.5px;
  }

  /* TechDrawings-Shell (Mailbox-Stil) */
  .tech-drawings-page{
    min-height:0;
  }
  .tech-drawings-editor-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    min-height:0;
    overflow-y:auto;
    flex:1;
  }
  .tech-drawings-editor-card__head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
  }
  .tech-drawings-editor-card__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .tech-drawings-editor-card__eyebrow{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    font-weight:600;
  }
  .tech-drawings-editor-card__title{
    margin:0;
    font-size:20px;
    font-weight:600;
    line-height:1.3;
  }
  .tech-drawings-editor-card__meta{
    margin:0;
    color:var(--muted);
    font-size:13px;
  }
  .tech-drawings-project-bar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    border:var(--border-strong);
    border-radius:var(--radius-medium);
    padding:14px 16px;
    background:color-mix(in srgb,var(--accent) 6%,var(--surface));
  }
  .tech-drawings-project-bar__copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }
  .tech-drawings-project-bar__eyebrow{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    color:var(--muted);
    font-weight:600;
  }
  .tech-drawings-project-bar__title{
    margin:0;
    font-size:16px;
    font-weight:600;
    line-height:1.3;
  }
  .tech-drawings-project-bar__meta{
    margin:0;
    color:var(--muted);
    font-size:12px;
  }
  .tech-drawings-project-bar__badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    flex-shrink:0;
  }
  .tech-drawings-empty{
    background:var(--surface);
    border:var(--border-strong);
    border-radius:var(--radius-large);
    flex:1;
    min-height:0;
    /* Empty-State-Box mittig im freien Raum (zuvor oben-links, da kein Flex-Container). */
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* TechDrawings-spezifischer Editor (Canvas-Inhalt bleibt) */
  .technical-drawings-layout{
    display:grid;
    grid-template-columns:minmax(520px,1fr) minmax(360px,44vw);
    gap:var(--page-layout-gap);
    align-items:stretch;
    flex:1;
    min-height:0;
  }
  .technical-drawings-editor,
  .technical-drawings-preview,
  .technical-singleline-editor,
  .technical-singleline-canvas{
    min-width:0;
  }
  .technical-drawings-editor{
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .technical-drawings-preview{
    position:sticky;
    top:0;
    align-self:start;
    padding:18px;
    overflow:hidden;
  }
  .technical-drawings-project-picker .order-form-component-table{
    max-height:min(62vh,620px);
  }
  .technical-drawings-project-row.is-active{
    outline:1.5px solid color-mix(in srgb,var(--accent) 55%,transparent);
    outline-offset:-2px;
    background:color-mix(in srgb,var(--accent) 8%,var(--surface));
  }
  .technical-drawings-required{
    border:var(--border-thin);
    border-radius:var(--badge-radius);
    padding:3px 7px;
    white-space:nowrap;
    background:var(--surface);
    font-size:11px;
  }
  .technical-drawings-required.ok{
    color:#28a745;
    border-color:color-mix(in srgb,#3bd671 42%,var(--border));
    background:color-mix(in srgb,#3bd671 8%,var(--surface));
  }
  .technical-drawings-required.warn{
    color:#b88300;
    border-color:color-mix(in srgb,#f7b500 42%,var(--border));
    background:color-mix(in srgb,#f7b500 8%,var(--surface));
  }
  .technical-drawings-action-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
  }
  .technical-drawings-step-panels{
    display:grid;
    gap:12px;
  }
  .technical-drawings-metrics{
    margin-bottom:0;
  }
  .technical-singleline-tab{
    /* Mailbox-Stil: Pill-Tab (geerbt von .app-tab); zusätzliche Modifier hier */
    font-size:13px;
  }
  .technical-singleline-tab.active,
  .technical-singleline-tab.is-active{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
  }
  .technical-singleline-section{
    display:none;
  }
  .technical-singleline-section.active{
    display:block;
  }
  /* Eintritts-Animation nur bei nutzerinitiiertem Tab-Wechsel (.is-entering),
     nicht bei jedem Re-Render — sonst flackert der Bereich beim Laden mehrfach. */
  .technical-singleline-section.is-entering{
    animation:technicalDrawingPanelIn .18s ease-out;
  }
  .technical-singleline-validation{
    border:var(--border-strong);
    border-radius:var(--radius-small);
    padding:12px 14px;
    margin-bottom:12px;
    background:var(--surface);
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .technical-singleline-validation.is-warning{
    border-color:color-mix(in srgb,#f7b500 60%,var(--border));
    background:color-mix(in srgb,#f7b500 6%,transparent);
  }
  .technical-singleline-validation.is-ok{
    border-color:color-mix(in srgb,#3bd671 60%,var(--border));
    background:color-mix(in srgb,#3bd671 6%,transparent);
  }
  .technical-singleline-validation__head,
  .technical-singleline-row-head,
  .technical-singleline-canvas-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .technical-singleline-validation__head span,
  .technical-singleline-row-head span,
  .technical-singleline-canvas-head span{
    color:var(--muted);
    font-size:.82rem;
  }
  .technical-singleline-validation ul{
    margin:10px 0 0;
    padding-left:18px;
  }
  .technical-singleline-validation p{
    margin:8px 0 0;
    color:var(--muted);
  }
  .technical-singleline-warning-list{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
  }
  .technical-singleline-warning-list span{
    border:var(--border-thin);
    border-radius:var(--badge-radius);
    padding:4px 8px;
    color:var(--muted);
    background:var(--surface);
    font-size:11px;
  }
  .technical-singleline-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .technical-singleline-grid .field--wide{
    grid-column:1/-1;
  }
  .technical-singleline-grid--cable{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .technical-singleline-list{
    display:grid;
    gap:12px;
  }
  .technical-singleline-binding-panel{
    display:grid;
    gap:12px;
  }
  .technical-singleline-binding-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    border:var(--border-strong);
    border-radius:var(--radius-medium);
    padding:12px 14px;
    background:var(--surface);
  }
  .technical-singleline-binding-head div{
    display:grid;
    gap:4px;
  }
  .technical-singleline-binding-head span{
    color:var(--muted);
    font-size:.86rem;
  }
  .technical-singleline-binding-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    max-height:62vh;
    overflow:auto;
    padding-right:4px;
  }
  .technical-singleline-add-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .technical-singleline-editor-row,
  .technical-singleline-protection-row,
  .technical-singleline-cable-row,
  .technical-singleline-accessory-row,
  .technical-singleline-mppt-card,
  .technical-singleline-string-pool{
    border:var(--border-strong);
    border-radius:var(--radius-medium);
    background:var(--surface);
    padding:12px 14px;
  }
  .technical-singleline-protection-row{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(0,1.2fr) minmax(0,1fr);
    gap:10px;
    align-items:end;
  }
  .technical-singleline-switch{
    display:flex;
    align-items:center;
    gap:10px;
  }
  .technical-singleline-switch span{
    display:grid;
    gap:2px;
  }
  .technical-singleline-switch small{
    color:var(--muted);
  }
  .technical-singleline-segment{
    display:inline-grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    gap:4px;
    padding:4px;
    border:var(--border-thin);
    border-radius:var(--radius-tiny);
    background:color-mix(in srgb,var(--panel-2) 74%,var(--panel));
  }
  .technical-singleline-segment__button{
    min-height:34px;
    border:1px solid transparent;
    border-radius:6px;
    background:transparent;
    color:var(--muted);
    font:inherit;
    font-size:13px;
    cursor:pointer;
  }
  .technical-singleline-segment__button:hover,
  .technical-singleline-segment__button.is-active{
    color:var(--text);
    border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
    background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  }
  .technical-singleline-segment__button:disabled{
    cursor:not-allowed;
    opacity:.55;
  }
  .technical-singleline-mppt-designer{
    display:grid;
    gap:12px;
    margin-top:12px;
  }
  .technical-singleline-mppt-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:10px;
  }
  .technical-singleline-mppt-zone{
    min-height:86px;
    border:var(--border-dashed);
    border-radius:var(--radius-small);
    padding:10px 12px;
    background:var(--surface);
  }
  .technical-singleline-string-stack{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
  }
  .technical-singleline-string-token{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:var(--border-thin);
    border-radius:var(--badge-radius);
    background:var(--surface);
    padding:6px 10px;
    cursor:grab;
    font-size:13px;
    transition:border-color .16s ease, transform .16s ease;
  }
  .technical-singleline-string-token:hover{
    border-color:var(--accent);
    transform:translateY(-1px);
  }
  .technical-singleline-string-token small{
    color:var(--muted);
  }
  .technical-singleline-string-token.is-assigned{
    border-color:color-mix(in srgb,#3bd671 50%,var(--border));
  }
  .technical-singleline-canvas{
    position:sticky;
    top:0;
    border:var(--border-strong);
    border-radius:var(--radius-medium);
    background:linear-gradient(180deg, var(--panel), color-mix(in srgb,var(--accent) 4%,var(--surface)));
    padding:14px;
  }
  .technical-singleline-preview-shell{
    overflow:auto;
    border:var(--border-strong);
    border-radius:var(--radius-small);
    background:
      linear-gradient(#eef3f8 1px, transparent 1px),
      linear-gradient(90deg, #eef3f8 1px, transparent 1px),
      #f8fbfe;
    background-size:24px 24px;
    margin-top:10px;
  }
  .technical-singleline-preview{
    display:block;
    width:100%;
    /* Keine Mindestbreite: das SVG skaliert ueber seine viewBox proportional auf die
       Spaltenbreite, damit der gesamte Schaltplan ohne horizontales Scrollen sichtbar ist
       (vorher min-width:840px > 44vw-Vorschauspalte -> Scrollbalken). */
    height:auto;
  }
  .technical-singleline-sheet{
    fill:#fff;
  }
  .technical-singleline-title{
    font-size:16px;
    font-weight:700;
    fill:#14324a;
  }
  .technical-singleline-subtitle{
    font-size:11px;
    fill:#3c5268;
  }
  .technical-singleline-zone rect{
    fill:rgba(232,239,247,.58);
    stroke:#d6e1ec;
    stroke-width:1;
  }
  .technical-singleline-zone--dc rect{
    fill:rgba(231,242,255,.62);
  }
  .technical-singleline-zone--ac rect{
    fill:rgba(232,248,238,.62);
  }
  .technical-singleline-zone--wr rect{
    fill:rgba(248,251,255,.9);
  }
  .technical-singleline-zone--grid rect,
  .technical-singleline-zone--meter rect{
    fill:rgba(243,247,251,.86);
  }
  .technical-singleline-zone-title{
    font-size:13px;
    font-weight:700;
    fill:#14324a;
  }
  .technical-singleline-zone-subtitle{
    font-size:10px;
    fill:#3c5268;
  }
  .technical-singleline-boundary{
    stroke:#91a5b9;
    stroke-width:1.6;
    stroke-dasharray:8 7;
  }
  .technical-singleline-wire{
    fill:none;
    stroke:#14324a;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .technical-singleline-wire--bus{
    stroke-width:3;
  }
  .technical-singleline-wire--dc{
    stroke:#315f9b;
  }
  .technical-singleline-wire--string-route{
    stroke-width:1.8;
  }
  .technical-singleline-wire--ac{
    stroke:#2f5f46;
  }
  .technical-singleline-wire--grid{
    stroke:#14324a;
  }
  .technical-singleline-wire--control{
    stroke:#7c4d9b;
    stroke-dasharray:7 6;
    stroke-width:1.8;
  }
  .technical-singleline-wire--earth{
    stroke:#8a6b24;
    stroke-dasharray:5 4;
    stroke-width:1.7;
  }
  .technical-singleline-wire--earth-lane{
    stroke-width:1.6;
  }
  .technical-singleline-wire-label rect{
    fill:#fff;
    stroke:#cbd8e5;
    stroke-width:1;
  }
  .technical-singleline-wire-label text{
    fill:#40576e;
    font-size:9px;
  }
  .technical-singleline-cable-tag text{
    fill:#40576e;
    font-size:9px;
    font-weight:700;
  }
  .technical-singleline-pa-label{
    fill:#6f5418;
    font-size:9px;
    font-weight:700;
  }
  .technical-singleline-cable-section__slash{
    fill:none;
    stroke:#40576e;
    stroke-width:2;
    stroke-linecap:round;
  }
  .technical-singleline-wire-label--dc rect{
    stroke:#9eb9d8;
  }
  .technical-singleline-wire-label--dc text{
    fill:#315f9b;
  }
  .technical-singleline-wire-label--dc .technical-singleline-cable-section__slash{
    stroke:#315f9b;
  }
  .technical-singleline-wire-label--ac rect,
  .technical-singleline-wire-label--grid rect{
    stroke:#aacdb9;
  }
  .technical-singleline-wire-label--ac text,
  .technical-singleline-wire-label--grid text{
    fill:#2f5f46;
  }
  .technical-singleline-wire-label--ac .technical-singleline-cable-section__slash,
  .technical-singleline-wire-label--grid .technical-singleline-cable-section__slash{
    stroke:#2f5f46;
  }
  .technical-singleline-wire-label--control rect{
    stroke:#c8abd9;
  }
  .technical-singleline-wire-label--control text{
    fill:#6f3d88;
  }
  .technical-singleline-symbol rect,
  .technical-singleline-symbol circle{
    fill:#fff;
    stroke:#14324a;
    stroke-width:1.8;
  }
  .technical-singleline-symbol path,
  .technical-singleline-symbol line{
    fill:none;
    stroke:#14324a;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .technical-singleline-symbol .technical-singleline-wire--dc{
    stroke:#315f9b;
  }
  .technical-singleline-symbol .technical-singleline-wire--ac{
    stroke:#2f5f46;
  }
  .technical-singleline-symbol .technical-singleline-wire--grid{
    stroke:#14324a;
  }
  .technical-singleline-symbol .technical-singleline-wire--control{
    stroke:#7c4d9b;
  }
  .technical-singleline-symbol .technical-singleline-wire--earth{
    stroke:#8a6b24;
  }
  /* Bestand (bestehende Anlage) wird gestrichelt gezeichnet; neu = durchgezogen. */
  .technical-singleline-symbol.is-existing rect,
  .technical-singleline-symbol.is-existing circle{
    stroke-dasharray:5 3;
  }
  .technical-singleline-legend__existing{
    stroke-dasharray:5 3;
  }
  .technical-singleline-symbol--pv-string rect,
  .technical-singleline-symbol--pv-string path,
  .technical-singleline-symbol--switch circle,
  .technical-singleline-symbol--switch path,
  .technical-singleline-symbol--fuse rect,
  .technical-singleline-symbol--fuse path,
  .technical-singleline-symbol--spd rect,
  .technical-singleline-symbol--spd path{
    stroke:#315f9b;
  }
  .technical-singleline-symbol--breaker path,
  .technical-singleline-symbol--rcd circle,
  .technical-singleline-symbol--rcd path,
  .technical-singleline-symbol--energy-flow-sensor circle,
  .technical-singleline-symbol--energy-flow-sensor path,
  .technical-singleline-symbol--load rect,
  .technical-singleline-symbol--load circle,
  .technical-singleline-symbol--load path,
  .technical-singleline-symbol--battery rect,
  .technical-singleline-symbol--battery path{
    stroke:#2f5f46;
  }
  .technical-singleline-symbol--inverter rect,
  .technical-singleline-symbol--inverter path,
  .technical-singleline-symbol--control rect,
  .technical-singleline-symbol--control circle,
  .technical-singleline-symbol--control path,
  .technical-singleline-symbol--pas rect,
  .technical-singleline-symbol--pas path,
  .technical-singleline-symbol--pen-split circle,
  .technical-singleline-symbol--pen-split path,
  .technical-singleline-symbol--backup-switch rect,
  .technical-singleline-symbol--backup-switch path{
    stroke:#14324a;
  }
  .technical-singleline-lightning{
    fill:#f6c244;
    stroke:#a97900!important;
  }
  .technical-singleline-symbol-caption{
    fill:#14324a;
    font-size:9px;
    font-weight:600;
  }
  .technical-singleline-symbol-label{
    fill:#14324a;
    font-size:9px;
  }
  .technical-singleline-polarity,
  .technical-singleline-converter-mark,
  .technical-singleline-meter-mark,
  .technical-singleline-grid-mark{
    fill:#14324a;
    font-size:11px;
    font-weight:700;
  }
  .technical-singleline-title-block rect{
    fill:#f8fbfe;
    stroke:#d6e1ec;
  }
  .technical-singleline-title-block-text{
    fill:#40576e;
    font-size:10px;
  }
  .technical-singleline-node rect{
    fill:#fff;
    stroke:#14324a;
    stroke-width:1.3;
  }
  .technical-singleline-node text{
    font-size:9px;
    fill:#14324a;
  }
  .technical-singleline-node .technical-singleline-node-title{
    font-size:10px;
    font-weight:700;
  }
  .technical-singleline-node--pv rect{
    stroke:#315f9b;
  }
  .technical-singleline-node--dc rect{
    stroke:#315f9b;
    fill:#f7fbff;
  }
  .technical-singleline-node--ac rect{
    stroke:#2f5f46;
    fill:#f7fff9;
  }
  .technical-singleline-node--meter rect,
  .technical-singleline-node--grid rect{
    stroke:#14324a;
    fill:#fbfcff;
  }
  .technical-singleline-edge path{
    fill:none;
    stroke:#14324a;
    stroke-width:1.5;
  }
  .technical-singleline-edge text{
    font-size:9px;
    fill:#3c5268;
  }
  .technical-singleline-edge--dc path,
  .technical-singleline-edge--dc text{
    stroke:#315f9b;
    fill:#315f9b;
  }
  .technical-singleline-edge--grid path,
  .technical-singleline-edge--grid text{
    stroke:#2f5f46;
    fill:#2f5f46;
  }
  .technical-singleline-grid-symbol circle,
  .technical-singleline-grid-symbol path{
    fill:none;
    stroke:#14324a;
    stroke-width:1.6;
  }
  .technical-singleline-grid-symbol text{
    font-size:9px;
    fill:#14324a;
  }
  [data-theme="dark"] .technical-singleline-preview-shell{
    background:#e9eef4;
  }
  @media (max-width:1180px){
    .technical-drawings-layout{
      grid-template-columns:1fr;
    }
    .technical-drawings-preview,
    .technical-singleline-canvas{
      position:relative;
      top:auto;
    }
  }
  @media (max-width:760px){
    .tech-drawings-project-bar,
    .tech-drawings-project-bar__badges{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      justify-content:flex-start;
    }
    .technical-singleline-grid,
    .technical-singleline-binding-grid,
    .technical-singleline-grid--cable,
    .technical-singleline-protection-row,
    .technical-singleline-mppt-grid{
      grid-template-columns:1fr;
    }
    .technical-singleline-binding-head{
      flex-direction:column;
    }
  }
  *,*::before,*::after{box-sizing:border-box}
  [data-theme="light"]{
    --bg:#f6f9fc; --panel:#ffffff; --panel-2:#edf2f7; --surface:#ffffff; --text:#0d2438;
    --muted:#4a5b6b; --muted-2:#6a7c90; --border:#dbe5ef; --accent:#0077ff; --accent-2:#66aaff;
    --good:#0fa958; --warn:#b88600; --bad:#cc0033; --shadow:0 8px 24px rgba(10,20,30,.08);
    --scrollbar-track:#edf2f7;
    --scrollbar-thumb:rgba(0,86,201,.35);
    --scrollbar-thumb-hover:rgba(0,86,201,.5);
    --surface-card-bg:
      radial-gradient(120% 110% at 0 0, color-mix(in srgb,var(--accent) 12%,transparent), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,0) 54%),
      color-mix(in srgb,var(--panel) 88%,var(--panel-2));
    --surface-soft-bg:
      radial-gradient(120% 90% at 0 0, color-mix(in srgb,var(--accent) 6%,transparent), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    --surface-card-shadow:0 20px 42px rgba(12,32,54,.1);
  }
  html{-webkit-text-size-adjust:100%}
  /* Auf Touch-Geräten den iOS/Android-Standard-Tap-Highlight unterdrücken – ersetzt durch eigene :active-/:hover-Styles */
  *{-webkit-tap-highlight-color:transparent}
  html,body{height:100%; margin:0; font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; background:
    radial-gradient(1200px 600px at 50% -200px, color-mix(in srgb, var(--accent) 6%, transparent), transparent), var(--bg);
    color:var(--text);
    /* body must not scroll — internal panes will scroll */
    overflow:hidden;
    transition:background .4s ease,color .4s ease;
    background-size:120% 120%,100% 100%;
    background-position:50% -200px,0 0;
    animation:bgMove 30s ease-in-out infinite alternate;
  }
  *{scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}
  *::-webkit-scrollbar{width:10px; height:10px}
  *::-webkit-scrollbar-track{background:var(--scrollbar-track); border-radius:999px; margin:4px 2px}
  *::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb); border-radius:999px; border:2px solid transparent; background-clip:content-box}
  *::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
  *::-webkit-scrollbar-corner{background:transparent}
  .app{display:grid; grid-template-rows:var(--app-header-height) 1fr; height:100vh}
  .app--auth{display:block; height:100vh; min-height:100vh; overflow:auto}
  header{
    display:grid; grid-template-columns: auto minmax(0,1fr) auto; align-items:center; gap:16px;
    min-height:var(--app-header-height);
    padding:var(--safe-area-top) calc(16px + var(--safe-area-right)) 0 calc(16px + var(--safe-area-left)); border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel);
    position:sticky; top:0; z-index:50;
  }
  .brand{display:flex; gap:10px; align-items:center; font-weight:700}
  .brand i{width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 28px color-mix(in srgb, var(--accent) 35%, transparent)}
  .brand img{max-width:100%;max-height:28px;height:auto}
  .right{justify-self:end; display:flex; align-items:center; gap:8px; flex-wrap:nowrap; justify-content:flex-end; min-width:0}
  .realtime-status{white-space:nowrap; font-size:12px}
  .btn,button{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:color-mix(in srgb,var(--panel) 70%,var(--panel-2)); color:var(--text); border:1px solid color-mix(in srgb,var(--border) 82%,transparent); border-radius:10px; padding:8px 12px; cursor:pointer; box-shadow:none}
  .btn.icon-leading,button.icon-leading{display:inline-flex; align-items:center; gap:8px}
  .btn-icon{width:16px; height:16px; display:inline-block; background:currentColor; opacity:.92; flex-shrink:0; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
  .btn-icon-add{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14"/%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14"/%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E')}
  .btn-icon-offer{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.2" y="5.5" width="17.6" height="13" rx="2.4"/%3E%3Cpath d="M4.8 7.3 12 12.3 19.2 7.3"/%3E%3Cpath d="m4.8 16.7 6-4.4"/%3E%3Cpath d="m19.2 16.7-6-4.4"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.2" y="5.5" width="17.6" height="13" rx="2.4"/%3E%3Cpath d="M4.8 7.3 12 12.3 19.2 7.3"/%3E%3Cpath d="m4.8 16.7 6-4.4"/%3E%3Cpath d="m19.2 16.7-6-4.4"/%3E%3C/svg%3E')}
  .btn-icon-reassign{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="3.2"/%3E%3Cpath d="M6.6 8a6.2 6.2 0 0 1 9.6-3.6"/%3E%3Cpath d="M15.5 3.6 18 6.1 15.5 8.6"/%3E%3Cpath d="M17.4 16a6.2 6.2 0 0 1-9.6 3.6"/%3E%3Cpath d="M8.5 20.4 6 17.9 8.5 15.4"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="3.2"/%3E%3Cpath d="M6.6 8a6.2 6.2 0 0 1 9.6-3.6"/%3E%3Cpath d="M15.5 3.6 18 6.1 15.5 8.6"/%3E%3Cpath d="M17.4 16a6.2 6.2 0 0 1-9.6 3.6"/%3E%3Cpath d="M8.5 20.4 6 17.9 8.5 15.4"/%3E%3C/svg%3E')}
  .btn-icon-check{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E')}
  .btn-icon-cross{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M18%206%206%2018%27/%3E%20%20%3Cpath%20d%3D%27m6%206%2012%2012%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M18%206%206%2018%27/%3E%20%20%3Cpath%20d%3D%27m6%206%2012%2012%27/%3E%3C/svg%3E')}
  .btn-icon-trash{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M10%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M14%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%27/%3E%20%20%3Cpath%20d%3D%27M3%206h18%27/%3E%20%20%3Cpath%20d%3D%27M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M10%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M14%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%27/%3E%20%20%3Cpath%20d%3D%27M3%206h18%27/%3E%20%20%3Cpath%20d%3D%27M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%27/%3E%3C/svg%3E')}
  .btn-icon-refresh{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12a9 9 0 1 1-2.64-6.36"/%3E%3Cpath d="M21 3v6h-6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12a9 9 0 1 1-2.64-6.36"/%3E%3Cpath d="M21 3v6h-6"/%3E%3C/svg%3E')}
  .btn-icon-download{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%2015V3%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%20%20%3Cpath%20d%3D%27m7%2010%205%205%205-5%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%2015V3%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%20%20%3Cpath%20d%3D%27m7%2010%205%205%205-5%27/%3E%3C/svg%3E')}
  .btn-icon-upload{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%203v12%27/%3E%20%20%3Cpath%20d%3D%27m17%208-5-5-5%205%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%203v12%27/%3E%20%20%3Cpath%20d%3D%27m17%208-5-5-5%205%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3C/svg%3E')}
  .btn-icon-undo{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M9%2014%204%209l5-5%27/%3E%20%20%3Cpath%20d%3D%27M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5%205.5%205.5%200%200%201-5.5%205.5H11%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M9%2014%204%209l5-5%27/%3E%20%20%3Cpath%20d%3D%27M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5%205.5%205.5%200%200%201-5.5%205.5H11%27/%3E%3C/svg%3E')}
  .btn-icon-pencil{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021l1-5%2011-11%204%204-11%2011-5%201z%22/%3E%3Cpath%20d%3D%22M14%207l3%203%22/%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021l1-5%2011-11%204%204-11%2011-5%201z%22/%3E%3Cpath%20d%3D%22M14%207l3%203%22/%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3C/svg%3E')}
  .btn-icon-lock{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27/%3E%20%20%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27/%3E%20%20%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27/%3E%3C/svg%3E')}
  .btn-icon-file{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M14%202v5a1%201%200%200%200%201%201h5%27/%3E%20%20%3Cpath%20d%3D%27M10%209H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2013H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2017H8%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M14%202v5a1%201%200%200%200%201%201h5%27/%3E%20%20%3Cpath%20d%3D%27M10%209H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2013H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2017H8%27/%3E%3C/svg%3E')}
  .icon,.nav-icon{width:18px; height:18px; display:inline-block; background:currentColor; opacity:.85; flex-shrink:0; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
  .icon-large{width:20px; height:20px}
  .icon-label{display:inline-flex; align-items:center; gap:6px}
  .icon-trash{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M10%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M14%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%27/%3E%20%20%3Cpath%20d%3D%27M3%206h18%27/%3E%20%20%3Cpath%20d%3D%27M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M10%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M14%2011v6%27/%3E%20%20%3Cpath%20d%3D%27M19%206v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%27/%3E%20%20%3Cpath%20d%3D%27M3%206h18%27/%3E%20%20%3Cpath%20d%3D%27M8%206V4a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%27/%3E%3C/svg%3E')}
  .icon-add{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14"/%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14"/%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E')}
  .icon-projects{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 20V6a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v14"/%3E%3Crect width="20" height="14" x="2" y="6" rx="2"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 20V6a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v14"/%3E%3Crect width="20" height="14" x="2" y="6" rx="2"/%3E%3C/svg%3E')}
  .icon-leads{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 3H2l8 9.46V19l4 2v-8.54z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 3H2l8 9.46V19l4 2v-8.54z"/%3E%3C/svg%3E')}
  .icon-tasks{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect width="18" height="18" x="3" y="3" rx="3"/%3E%3Cpath d="m9 12 2 2 4-4"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect width="18" height="18" x="3" y="3" rx="3"/%3E%3Cpath d="m9 12 2 2 4-4"/%3E%3C/svg%3E')}
  .icon-calendar{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8 2v4"/%3E%3Cpath d="M16 2v4"/%3E%3Crect width="18" height="18" x="3" y="4" rx="2"/%3E%3Cpath d="M3 10h18"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M8 2v4"/%3E%3Cpath d="M16 2v4"/%3E%3Crect width="18" height="18" x="3" y="4" rx="2"/%3E%3Cpath d="M3 10h18"/%3E%3C/svg%3E')}
  .icon-users{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/%3E%3Ccircle cx="9" cy="7" r="4"/%3E%3Cpath d="M22 21v-2a4 4 0 0 0-3-3.87"/%3E%3Cpath d="M16 3.13a4 4 0 0 1 0 7.75"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/%3E%3Ccircle cx="9" cy="7" r="4"/%3E%3Cpath d="M22 21v-2a4 4 0 0 0-3-3.87"/%3E%3Cpath d="M16 3.13a4 4 0 0 1 0 7.75"/%3E%3C/svg%3E')}
  .icon-upload{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%203v12%27/%3E%20%20%3Cpath%20d%3D%27m17%208-5-5-5%205%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%203v12%27/%3E%20%20%3Cpath%20d%3D%27m17%208-5-5-5%205%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3C/svg%3E')}
  .icon-clipboard{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Crect%20width%3D%278%27%20height%3D%274%27%20x%3D%278%27%20y%3D%272%27%20rx%3D%271%27%20ry%3D%271%27/%3E%20%20%3Cpath%20d%3D%27M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Crect%20width%3D%278%27%20height%3D%274%27%20x%3D%278%27%20y%3D%272%27%20rx%3D%271%27%20ry%3D%271%27/%3E%20%20%3Cpath%20d%3D%27M16%204h2a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H6a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2h2%27/%3E%3C/svg%3E')}
  .icon-pencil{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021l1-5%2011-11%204%204-11%2011-5%201z%22/%3E%3Cpath%20d%3D%22M14%207l3%203%22/%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021l1-5%2011-11%204%204-11%2011-5%201z%22/%3E%3Cpath%20d%3D%22M14%207l3%203%22/%3E%3Cpath%20d%3D%22M12%2020h9%22/%3E%3C/svg%3E')}
  .icon-paperclip{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27m16%206-8.414%208.586a2%202%200%200%200%202.829%202.829l8.414-8.586a4%204%200%201%200-5.657-5.657l-8.379%208.551a6%206%200%201%200%208.485%208.485l8.379-8.551%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27m16%206-8.414%208.586a2%202%200%200%200%202.829%202.829l8.414-8.586a4%204%200%201%200-5.657-5.657l-8.379%208.551a6%206%200%201%200%208.485%208.485l8.379-8.551%27/%3E%3C/svg%3E')}
  .icon-undo{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M9%2014%204%209l5-5%27/%3E%20%20%3Cpath%20d%3D%27M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5%205.5%205.5%200%200%201-5.5%205.5H11%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M9%2014%204%209l5-5%27/%3E%20%20%3Cpath%20d%3D%27M4%209h10.5a5.5%205.5%200%200%201%205.5%205.5%205.5%205.5%200%200%201-5.5%205.5H11%27/%3E%3C/svg%3E')}
  .icon-refresh{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12a9 9 0 1 1-2.64-6.36"/%3E%3Cpath d="M21 3v6h-6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12a9 9 0 1 1-2.64-6.36"/%3E%3Cpath d="M21 3v6h-6"/%3E%3C/svg%3E')}
  .icon-flag{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M4%2022V4a1%201%200%200%201%20.4-.8A6%206%200%200%201%208%202c3%200%205%202%207.333%202%202%200%203.067-.8%203.067-.8A1%201%200%200%201%2020%204v10a1%201%200%200%201-.4.8A6%206%200%200%201%2016%2016c-3%200-5-2-8-2a6%206%200%200%200-4%201.528%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M4%2022V4a1%201%200%200%201%20.4-.8A6%206%200%200%201%208%202c3%200%205%202%207.333%202%202%200%203.067-.8%203.067-.8A1%201%200%200%201%2020%204v10a1%201%200%200%201-.4.8A6%206%200%200%201%2016%2016c-3%200-5-2-8-2a6%206%200%200%200-4%201.528%27/%3E%3C/svg%3E')}
  .icon-check{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M20%206%209%2017l-5-5%27/%3E%3C/svg%3E')}
  .icon-cross{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M18%206%206%2018%27/%3E%20%20%3Cpath%20d%3D%27m6%206%2012%2012%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M18%206%206%2018%27/%3E%20%20%3Cpath%20d%3D%27m6%206%2012%2012%27/%3E%3C/svg%3E')}
  .icon-lock{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27/%3E%20%20%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Crect%20width%3D%2718%27%20height%3D%2711%27%20x%3D%273%27%20y%3D%2711%27%20rx%3D%272%27%20ry%3D%272%27/%3E%20%20%3Cpath%20d%3D%27M7%2011V7a5%205%200%200%201%2010%200v4%27/%3E%3C/svg%3E')}
  .icon-key{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27m15.5%207.5%202.3%202.3a1%201%200%200%200%201.4%200l2.1-2.1a1%201%200%200%200%200-1.4L19%204%27/%3E%20%20%3Cpath%20d%3D%27m21%202-9.6%209.6%27/%3E%20%20%3Ccircle%20cx%3D%277.5%27%20cy%3D%2715.5%27%20r%3D%275.5%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27m15.5%207.5%202.3%202.3a1%201%200%200%200%201.4%200l2.1-2.1a1%201%200%200%200%200-1.4L19%204%27/%3E%20%20%3Cpath%20d%3D%27m21%202-9.6%209.6%27/%3E%20%20%3Ccircle%20cx%3D%277.5%27%20cy%3D%2715.5%27%20r%3D%275.5%27/%3E%3C/svg%3E')}
  .icon-house{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%27/%3E%20%20%3Cpath%20d%3D%27M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%27/%3E%20%20%3Cpath%20d%3D%27M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%27/%3E%3C/svg%3E')}
  .icon-file{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M14%202v5a1%201%200%200%200%201%201h5%27/%3E%20%20%3Cpath%20d%3D%27M10%209H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2013H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2017H8%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M6%2022a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2h8a2.4%202.4%200%200%201%201.704.706l3.588%203.588A2.4%202.4%200%200%201%2020%208v12a2%202%200%200%201-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M14%202v5a1%201%200%200%200%201%201h5%27/%3E%20%20%3Cpath%20d%3D%27M10%209H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2013H8%27/%3E%20%20%3Cpath%20d%3D%27M16%2017H8%27/%3E%3C/svg%3E')}
  .icon-download{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%2015V3%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%20%20%3Cpath%20d%3D%27m7%2010%205%205%205-5%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%2015V3%27/%3E%20%20%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%20%20%3Cpath%20d%3D%27m7%2010%205%205%205-5%27/%3E%3C/svg%3E')}
  .icon-car{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M19%2017h2c.6%200%201-.4%201-1v-3c0-.9-.7-1.7-1.5-1.9C18.7%2010.6%2016%2010%2016%2010s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6%200-1.1.4-1.4.9l-1.4%202.9A3.7%203.7%200%200%200%202%2012v4c0%20.6.4%201%201%201h2%27/%3E%20%20%3Ccircle%20cx%3D%277%27%20cy%3D%2717%27%20r%3D%272%27/%3E%20%20%3Cpath%20d%3D%27M9%2017h6%27/%3E%20%20%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%272%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M19%2017h2c.6%200%201-.4%201-1v-3c0-.9-.7-1.7-1.5-1.9C18.7%2010.6%2016%2010%2016%2010s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6%200-1.1.4-1.4.9l-1.4%202.9A3.7%203.7%200%200%200%202%2012v4c0%20.6.4%201%201%201h2%27/%3E%20%20%3Ccircle%20cx%3D%277%27%20cy%3D%2717%27%20r%3D%272%27/%3E%20%20%3Cpath%20d%3D%27M9%2017h6%27/%3E%20%20%3Ccircle%20cx%3D%2717%27%20cy%3D%2717%27%20r%3D%272%27/%3E%3C/svg%3E')}
  .icon-factory{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%2016h.01%27/%3E%20%20%3Cpath%20d%3D%27M16%2016h.01%27/%3E%20%20%3Cpath%20d%3D%27M3%2019a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V8.5a.5.5%200%200%200-.769-.422l-4.462%202.844A.5.5%200%200%201%2015%2010.5v-2a.5.5%200%200%200-.769-.422L9.77%2010.922A.5.5%200%200%201%209%2010.5V5a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M8%2016h.01%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%2016h.01%27/%3E%20%20%3Cpath%20d%3D%27M16%2016h.01%27/%3E%20%20%3Cpath%20d%3D%27M3%2019a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V8.5a.5.5%200%200%200-.769-.422l-4.462%202.844A.5.5%200%200%201%2015%2010.5v-2a.5.5%200%200%200-.769-.422L9.77%2010.922A.5.5%200%200%201%209%2010.5V5a2%202%200%200%200-2-2H5a2%202%200%200%200-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M8%2016h.01%27/%3E%3C/svg%3E')}
  .icon-flame{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%203q1%204%204%206.5t3%205.5a1%201%200%200%201-14%200%205%205%200%200%201%201-3%201%201%200%200%200%205%200c0-2-1.5-3-1.5-5q0-2%202.5-4%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M12%203q1%204%204%206.5t3%205.5a1%201%200%200%201-14%200%205%205%200%200%201%201-3%201%201%200%200%200%205%200c0-2-1.5-3-1.5-5q0-2%202.5-4%27/%3E%3C/svg%3E')}
  .icon-battery{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M22%2014v-4%27/%3E%20%20%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%2716%27%20height%3D%2712%27%20rx%3D%272%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M22%2014v-4%27/%3E%20%20%3Crect%20x%3D%272%27%20y%3D%276%27%20width%3D%2716%27%20height%3D%2712%27%20rx%3D%272%27/%3E%3C/svg%3E')}
  .icon-zap{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M4%2014a1%201%200%200%201-.78-1.63l9.9-10.2a.5.5%200%200%201%20.86.46l-1.92%206.02A1%201%200%200%200%2013%2010h7a1%201%200%200%201%20.78%201.63l-9.9%2010.2a.5.5%200%200%201-.86-.46l1.92-6.02A1%201%200%200%200%2011%2014z%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M4%2014a1%201%200%200%201-.78-1.63l9.9-10.2a.5.5%200%200%201%20.86.46l-1.92%206.02A1%201%200%200%200%2013%2010h7a1%201%200%200%201%20.78%201.63l-9.9%2010.2a.5.5%200%200%201-.86-.46l1.92-6.02A1%201%200%200%200%2011%2014z%27/%3E%3C/svg%3E')}
  .icon-sun{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27/%3E%20%20%3Cpath%20d%3D%27M12%202v2%27/%3E%20%20%3Cpath%20d%3D%27M12%2020v2%27/%3E%20%20%3Cpath%20d%3D%27m4.93%204.93%201.41%201.41%27/%3E%20%20%3Cpath%20d%3D%27m17.66%2017.66%201.41%201.41%27/%3E%20%20%3Cpath%20d%3D%27M2%2012h2%27/%3E%20%20%3Cpath%20d%3D%27M20%2012h2%27/%3E%20%20%3Cpath%20d%3D%27m6.34%2017.66-1.41%201.41%27/%3E%20%20%3Cpath%20d%3D%27m19.07%204.93-1.41%201.41%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%274%27/%3E%20%20%3Cpath%20d%3D%27M12%202v2%27/%3E%20%20%3Cpath%20d%3D%27M12%2020v2%27/%3E%20%20%3Cpath%20d%3D%27m4.93%204.93%201.41%201.41%27/%3E%20%20%3Cpath%20d%3D%27m17.66%2017.66%201.41%201.41%27/%3E%20%20%3Cpath%20d%3D%27M2%2012h2%27/%3E%20%20%3Cpath%20d%3D%27M20%2012h2%27/%3E%20%20%3Cpath%20d%3D%27m6.34%2017.66-1.41%201.41%27/%3E%20%20%3Cpath%20d%3D%27m19.07%204.93-1.41%201.41%27/%3E%3C/svg%3E')}
  .icon-puzzle{-webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M5%203h4a2%202%200%200%201%202%202v1.5a1.5%201.5%200%201%200%200%203V11a2%202%200%200%200%202%202h1.5a1.5%201.5%200%201%201%203%200H19a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-1.5a1.5%201.5%200%201%201%200-3H11a2%202%200%200%200-2-2H7a2%202%200%200%200-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M5%2021h4a2%202%200%200%200%202-2v-1.5a1.5%201.5%200%201%201%200-3V13a2%202%200%200%201%202-2h1.5%27/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%20%3Cpath%20d%3D%27M5%203h4a2%202%200%200%201%202%202v1.5a1.5%201.5%200%201%200%200%203V11a2%202%200%200%200%202%202h1.5a1.5%201.5%200%201%201%203%200H19a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-1.5a1.5%201.5%200%201%201%200-3H11a2%202%200%200%200-2-2H7a2%202%200%200%200-2%202z%27/%3E%20%20%3Cpath%20d%3D%27M5%2021h4a2%202%200%200%200%202-2v-1.5a1.5%201.5%200%201%201%200-3V13a2%202%200%200%201%202-2h1.5%27/%3E%3C/svg%3E')}
  .icon-menu{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M4 7h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M4 7h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/%3E%3C/svg%3E')}
  .icon-search{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="6.5"/%3E%3Cpath d="M16.5 16.5 21 21"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="11" cy="11" r="6.5"/%3E%3Cpath d="M16.5 16.5 21 21"/%3E%3C/svg%3E')}
  .icon-save{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/%3E%3Cpolyline points="17 21 17 13 7 13 7 21"/%3E%3Cpolyline points="7 3 7 8 15 8"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/%3E%3Cpolyline points="17 21 17 13 7 13 7 21"/%3E%3Cpolyline points="7 3 7 8 15 8"/%3E%3C/svg%3E')}
  .icon-theme{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12.79A9 9 0 1 1 11.21 3 6.5 6.5 0 0 0 21 12.79z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M21 12.79A9 9 0 1 1 11.21 3 6.5 6.5 0 0 0 21 12.79z"/%3E%3C/svg%3E')}
  .icon-bell{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/%3E%3Cpath d="M10.5 21a1.5 1.5 0 0 0 3 0"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/%3E%3Cpath d="M10.5 21a1.5 1.5 0 0 0 3 0"/%3E%3C/svg%3E')}
  .icon-eye{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M2 12s3.8-6.5 10-6.5S22 12 22 12s-3.8 6.5-10 6.5S2 12 2 12z"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M2 12s3.8-6.5 10-6.5S22 12 22 12s-3.8 6.5-10 6.5S2 12 2 12z"/%3E%3Ccircle cx="12" cy="12" r="3"/%3E%3C/svg%3E')}
  .nav-icon-dashboard{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M4 4h7v7H4zm9 0h7v7h-7zM4 13h7v7H4zm9 0h7v7h-7z"/%3E%3C/svg%3E')}
  .nav-icon-analytics{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M5 18h14v2H5zM7 10h2v6H7zM11 6h2v10h-2zM15 12h2v4h-2z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M5 18h14v2H5zM7 10h2v6H7zM11 6h2v10h-2zM15 12h2v4h-2z"/%3E%3C/svg%3E')}
  .nav-icon-projects{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 7h5l1.5 2H20a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 1.5-2z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 7h5l1.5 2H20a1 1 0 0 1 1 1v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 1.5-2z"/%3E%3C/svg%3E')}
  .nav-icon-drawings{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 4h10l4 4v12H5z"/%3E%3Cpath d="M15 4v4h4"/%3E%3Cpath d="M8 15h8"/%3E%3Cpath d="M9 12h2l1-2 1 4 1-2h2"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 4h10l4 4v12H5z"/%3E%3Cpath d="M15 4v4h4"/%3E%3Cpath d="M8 15h8"/%3E%3Cpath d="M9 12h2l1-2 1 4 1-2h2"/%3E%3C/svg%3E')}
  .nav-icon-tasks{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8"/%3E%3Cpath d="M9 12.5l2.2 2.2L16 10"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8"/%3E%3Cpath d="M9 12.5l2.2 2.2L16 10"/%3E%3C/svg%3E')}
  .nav-icon-events{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="5" width="16" height="15" rx="2"/%3E%3Cpath d="M8 3v4"/%3E%3Cpath d="M16 3v4"/%3E%3Cpath d="M4 9h16"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="5" width="16" height="15" rx="2"/%3E%3Cpath d="M8 3v4"/%3E%3Cpath d="M16 3v4"/%3E%3Cpath d="M4 9h16"/%3E%3C/svg%3E')}
  .nav-icon-leads{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 4h7l4 4v12H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/%3E%3Cpath d="M14 4v4h4"/%3E%3Cpath d="M9 12h6"/%3E%3Cpath d="M9 16h6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 4h7l4 4v12H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/%3E%3Cpath d="M14 4v4h4"/%3E%3Cpath d="M9 12h6"/%3E%3Cpath d="M9 16h6"/%3E%3C/svg%3E')}
  .nav-icon-accounting{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="6" width="16" height="12" rx="2"/%3E%3Cpath d="M9 12h5.2"/%3E%3Cpath d="M10 10.2a3 3 0 1 0 0 3.6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="6" width="16" height="12" rx="2"/%3E%3Cpath d="M9 12h5.2"/%3E%3Cpath d="M10 10.2a3 3 0 1 0 0 3.6"/%3E%3C/svg%3E')}
  .nav-icon-inventory{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 8.5 12 4l8 4.5-8 4.5z"/%3E%3Cpath d="M4 8.5v7L12 20l8-4.5v-7"/%3E%3Cpath d="M12 13v7"/%3E%3Cpath d="m8 6.3 8 4.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 8.5 12 4l8 4.5-8 4.5z"/%3E%3Cpath d="M4 8.5v7L12 20l8-4.5v-7"/%3E%3Cpath d="M12 13v7"/%3E%3Cpath d="m8 6.3 8 4.5"/%3E%3C/svg%3E')}
  .nav-icon-file-vault{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 11.5V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5z"/%3E%3Cpath d="M9.5 11.5V9a2.5 2.5 0 1 1 5 0v2.5"/%3E%3Crect x="8" y="11.5" width="8" height="5.5" rx="1.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 11.5V6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 17.5z"/%3E%3Cpath d="M9.5 11.5V9a2.5 2.5 0 1 1 5 0v2.5"/%3E%3Crect x="8" y="11.5" width="8" height="5.5" rx="1.5"/%3E%3C/svg%3E')}
  .nav-icon-components{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 12.5V6l-6-3-6 3v6.5l6 3.5 6-3.5Z"/%3E%3Cpath d="M12 3v6.5"/%3E%3Cpath d="m6 6 6 3 6-3"/%3E%3Cpath d="M6 12.5 12 16l6-3.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 12.5V6l-6-3-6 3v6.5l6 3.5 6-3.5Z"/%3E%3Cpath d="M12 3v6.5"/%3E%3Cpath d="m6 6 6 3 6-3"/%3E%3Cpath d="M6 12.5 12 16l6-3.5"/%3E%3C/svg%3E')}
  .nav-icon-network{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="6" cy="8.5" r="2.5"/%3E%3Ccircle cx="18" cy="5.5" r="2.5"/%3E%3Ccircle cx="18" cy="18.5" r="2.5"/%3E%3Cpath d="M8 9.6 15.2 13"/%3E%3Cpath d="M15.2 7.3 8.6 8.7"/%3E%3Cpath d="M15.4 16 8.2 11.6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="6" cy="8.5" r="2.5"/%3E%3Ccircle cx="18" cy="5.5" r="2.5"/%3E%3Ccircle cx="18" cy="18.5" r="2.5"/%3E%3Cpath d="M8 9.6 15.2 13"/%3E%3Cpath d="M15.2 7.3 8.6 8.7"/%3E%3Cpath d="M15.4 16 8.2 11.6"/%3E%3C/svg%3E')}
  .nav-icon-emails{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z"/%3E%3Cpath d="m4 7 8 6 8-6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z"/%3E%3Cpath d="m4 7 8 6 8-6"/%3E%3C/svg%3E')}
  .nav-icon-inbox{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/%3E%3Cpath d="M4 14h4a4 4 0 0 0 8 0h4"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/%3E%3Cpath d="M4 14h4a4 4 0 0 0 8 0h4"/%3E%3C/svg%3E')}
  .nav-icon-users{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="9" cy="9" r="3"/%3E%3Cpath d="M4.5 19a4.5 4.5 0 0 1 9 0"/%3E%3Ccircle cx="17" cy="10" r="2.5"/%3E%3Cpath d="M14.5 19a3.5 3.5 0 0 1 7 0"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="9" cy="9" r="3"/%3E%3Cpath d="M4.5 19a4.5 4.5 0 0 1 9 0"/%3E%3Ccircle cx="17" cy="10" r="2.5"/%3E%3Cpath d="M14.5 19a3.5 3.5 0 0 1 7 0"/%3E%3C/svg%3E')}
  .nav-icon-settings{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 9.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/%3E%3Cpath d="m4.8 10.5 1.8-.3a5.3 5.3 0 0 1 1.1-1.8l-1-1.6 1.6-1.6 1.6 1a5.3 5.3 0 0 1 1.8-1.1l.3-1.8h2.2l.3 1.8a5.3 5.3 0 0 1 1.8 1.1l1.6-1 1.6 1.6-1 1.6a5.3 5.3 0 0 1 1.1 1.8l1.8.3v2.2l-1.8.3a5.3 5.3 0 0 1-1.1 1.8l1 1.6-1.6 1.6-1.6-1a5.3 5.3 0 0 1-1.8 1.1l-.3 1.8h-2.2l-.3-1.8a5.3 5.3 0 0 1-1.8-1.1l-1.6 1-1.6-1.6 1-1.6a5.3 5.3 0 0 1-1.1-1.8l-1.8-.3z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 9.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z"/%3E%3Cpath d="m4.8 10.5 1.8-.3a5.3 5.3 0 0 1 1.1-1.8l-1-1.6 1.6-1.6 1.6 1a5.3 5.3 0 0 1 1.8-1.1l.3-1.8h2.2l.3 1.8a5.3 5.3 0 0 1 1.8 1.1l1.6-1 1.6 1.6-1 1.6a5.3 5.3 0 0 1 1.1 1.8l1.8.3v2.2l-1.8.3a5.3 5.3 0 0 1-1.1 1.8l1 1.6-1.6 1.6-1.6-1a5.3 5.3 0 0 1-1.8 1.1l-.3 1.8h-2.2l-.3-1.8a5.3 5.3 0 0 1-1.8-1.1l-1.6 1-1.6-1.6 1-1.6a5.3 5.3 0 0 1-1.1-1.8l-1.8-.3z"/%3E%3C/svg%3E')}
  .focus-icon-overview{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="4" width="6.5" height="6.5" rx="1.5"/%3E%3Crect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/%3E%3Crect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/%3E%3Cpath d="M14 16h6"/%3E%3Cpath d="M17 13v6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="4" width="6.5" height="6.5" rx="1.5"/%3E%3Crect x="13.5" y="4" width="6.5" height="6.5" rx="1.5"/%3E%3Crect x="4" y="13.5" width="6.5" height="6.5" rx="1.5"/%3E%3Cpath d="M14 16h6"/%3E%3Cpath d="M17 13v6"/%3E%3C/svg%3E')}
  .focus-icon-target{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="7.5"/%3E%3Ccircle cx="12" cy="12" r="3.5"/%3E%3Cpath d="M12 2.5v3"/%3E%3Cpath d="M12 18.5v3"/%3E%3Cpath d="M2.5 12h3"/%3E%3Cpath d="M18.5 12h3"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="7.5"/%3E%3Ccircle cx="12" cy="12" r="3.5"/%3E%3Cpath d="M12 2.5v3"/%3E%3Cpath d="M12 18.5v3"/%3E%3Cpath d="M2.5 12h3"/%3E%3Cpath d="M18.5 12h3"/%3E%3C/svg%3E')}
  .focus-icon-handshake{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7.5 12.5 5 15l3.5 3.5c.8.8 2 .8 2.8 0l.7-.7"/%3E%3Cpath d="m14.5 12 3.8 3.8a1.9 1.9 0 0 1-2.7 2.7L12 15"/%3E%3Cpath d="m9.5 10.5 2.2-2.2a2.5 2.5 0 0 1 3.5 0l.9.9"/%3E%3Cpath d="m2.5 12.5 4-4 3 3"/%3E%3Cpath d="m21.5 12.5-4-4-3.2 3.2"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7.5 12.5 5 15l3.5 3.5c.8.8 2 .8 2.8 0l.7-.7"/%3E%3Cpath d="m14.5 12 3.8 3.8a1.9 1.9 0 0 1-2.7 2.7L12 15"/%3E%3Cpath d="m9.5 10.5 2.2-2.2a2.5 2.5 0 0 1 3.5 0l.9.9"/%3E%3Cpath d="m2.5 12.5 4-4 3 3"/%3E%3Cpath d="m21.5 12.5-4-4-3.2 3.2"/%3E%3C/svg%3E')}
  .focus-icon-clipboard-check{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="8" y="3" width="8" height="4" rx="1.3"/%3E%3Cpath d="M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2"/%3E%3Cpath d="m8 14 2.5 2.5L16 11"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="8" y="3" width="8" height="4" rx="1.3"/%3E%3Cpath d="M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2"/%3E%3Cpath d="m8 14 2.5 2.5L16 11"/%3E%3C/svg%3E')}
  .focus-icon-check-circle{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8.5"/%3E%3Cpath d="m8 12.5 2.5 2.5L16 9.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8.5"/%3E%3Cpath d="m8 12.5 2.5 2.5L16 9.5"/%3E%3C/svg%3E')}
  .focus-icon-x-circle{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8.5"/%3E%3Cpath d="m9 9 6 6"/%3E%3Cpath d="m15 9-6 6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="8.5"/%3E%3Cpath d="m9 9 6 6"/%3E%3Cpath d="m15 9-6 6"/%3E%3C/svg%3E')}
  .focus-icon-route{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="6" cy="6" r="2.5"/%3E%3Ccircle cx="18" cy="18" r="2.5"/%3E%3Cpath d="M8.5 6h3.5a4 4 0 0 1 0 8H10a4 4 0 0 0 0 8h5.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="6" cy="6" r="2.5"/%3E%3Ccircle cx="18" cy="18" r="2.5"/%3E%3Cpath d="M8.5 6h3.5a4 4 0 0 1 0 8H10a4 4 0 0 0 0 8h5.5"/%3E%3C/svg%3E')}
  .focus-icon-bell{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9a6 6 0 1 1 12 0c0 6 2.5 8 2.5 8h-17S6 15 6 9"/%3E%3Cpath d="M10 20a2 2 0 0 0 4 0"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 9a6 6 0 1 1 12 0c0 6 2.5 8 2.5 8h-17S6 15 6 9"/%3E%3Cpath d="M10 20a2 2 0 0 0 4 0"/%3E%3C/svg%3E')}
  .settings-icon-profile{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="3.5"/%3E%3Cpath d="M5 20a7 7 0 0 1 14 0"/%3E%3Cpath d="M18.5 5.5 20 7l-1.5 1.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="3.5"/%3E%3Cpath d="M5 20a7 7 0 0 1 14 0"/%3E%3Cpath d="M18.5 5.5 20 7l-1.5 1.5"/%3E%3C/svg%3E')}
  .settings-icon-company{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 20V6a2 2 0 0 1 2-2h6v16"/%3E%3Cpath d="M12.5 9H18a2 2 0 0 1 2 2v9"/%3E%3Cpath d="M7.5 8h2"/%3E%3Cpath d="M7.5 12h2"/%3E%3Cpath d="M7.5 16h2"/%3E%3Cpath d="M15.5 13h2"/%3E%3Cpath d="M15.5 17h2"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 20V6a2 2 0 0 1 2-2h6v16"/%3E%3Cpath d="M12.5 9H18a2 2 0 0 1 2 2v9"/%3E%3Cpath d="M7.5 8h2"/%3E%3Cpath d="M7.5 12h2"/%3E%3Cpath d="M7.5 16h2"/%3E%3Cpath d="M15.5 13h2"/%3E%3Cpath d="M15.5 17h2"/%3E%3C/svg%3E')}
  .settings-icon-email{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5.5" width="17" height="13" rx="2.2"/%3E%3Cpath d="m5 8 7 5 7-5"/%3E%3Cpath d="M16 15.5h3"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5.5" width="17" height="13" rx="2.2"/%3E%3Cpath d="m5 8 7 5 7-5"/%3E%3Cpath d="M16 15.5h3"/%3E%3C/svg%3E')}
  .settings-icon-services{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 6h14"/%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M5 18h8"/%3E%3Ccircle cx="17" cy="18" r="2.5"/%3E%3Cpath d="M17 15.5v5"/%3E%3Cpath d="M14.5 18h5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M5 6h14"/%3E%3Cpath d="M5 12h14"/%3E%3Cpath d="M5 18h8"/%3E%3Ccircle cx="17" cy="18" r="2.5"/%3E%3Cpath d="M17 15.5v5"/%3E%3Cpath d="M14.5 18h5"/%3E%3C/svg%3E')}
  .settings-icon-documents{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 21V5a2 2 0 0 1 2-2h6l4 4v14"/%3E%3Cpath d="M14 3v5h5"/%3E%3Cpath d="M8 13h8"/%3E%3Cpath d="M8 17h6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 21V5a2 2 0 0 1 2-2h6l4 4v14"/%3E%3Cpath d="M14 3v5h5"/%3E%3Cpath d="M8 13h8"/%3E%3Cpath d="M8 17h6"/%3E%3C/svg%3E')}
  .settings-icon-automation{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h7"/%3E%3Cpath d="M15 7h5"/%3E%3Ccircle cx="13" cy="7" r="2"/%3E%3Cpath d="M4 17h5"/%3E%3Cpath d="M13 17h7"/%3E%3Ccircle cx="11" cy="17" r="2"/%3E%3Cpath d="M6 12h12"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4 7h7"/%3E%3Cpath d="M15 7h5"/%3E%3Ccircle cx="13" cy="7" r="2"/%3E%3Cpath d="M4 17h5"/%3E%3Cpath d="M13 17h7"/%3E%3Ccircle cx="11" cy="17" r="2"/%3E%3Cpath d="M6 12h12"/%3E%3C/svg%3E')}
  .settings-icon-customer-access{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 21V5.5A2.5 2.5 0 0 1 9.5 3H17v18"/%3E%3Cpath d="M10 12h.01"/%3E%3Cpath d="M17 7h3v14H7"/%3E%3Cpath d="M12 8.5h2.5"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M7 21V5.5A2.5 2.5 0 0 1 9.5 3H17v18"/%3E%3Cpath d="M10 12h.01"/%3E%3Cpath d="M17 7h3v14H7"/%3E%3Cpath d="M12 8.5h2.5"/%3E%3C/svg%3E')}
  .settings-icon-integrations{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="6.5" cy="7.5" r="2.5"/%3E%3Ccircle cx="17.5" cy="7.5" r="2.5"/%3E%3Ccircle cx="12" cy="17" r="2.5"/%3E%3Cpath d="m8.6 8.9 2.4 5.7"/%3E%3Cpath d="m15.4 8.9-2.4 5.7"/%3E%3Cpath d="M9 17h6"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="6.5" cy="7.5" r="2.5"/%3E%3Ccircle cx="17.5" cy="7.5" r="2.5"/%3E%3Ccircle cx="12" cy="17" r="2.5"/%3E%3Cpath d="m8.6 8.9 2.4 5.7"/%3E%3Cpath d="m15.4 8.9-2.4 5.7"/%3E%3Cpath d="M9 17h6"/%3E%3C/svg%3E')}
  .settings-icon-roles{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3 19 6v5c0 4.5-2.7 7.8-7 10-4.3-2.2-7-5.5-7-10V6z"/%3E%3Ccircle cx="12" cy="10" r="2.2"/%3E%3Cpath d="M8.7 16a3.6 3.6 0 0 1 6.6 0"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3 19 6v5c0 4.5-2.7 7.8-7 10-4.3-2.2-7-5.5-7-10V6z"/%3E%3Ccircle cx="12" cy="10" r="2.2"/%3E%3Cpath d="M8.7 16a3.6 3.6 0 0 1 6.6 0"/%3E%3C/svg%3E')}
  .settings-icon-instances{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="4" width="16" height="5" rx="1.5"/%3E%3Crect x="4" y="10.5" width="16" height="5" rx="1.5"/%3E%3Crect x="4" y="17" width="16" height="3" rx="1.2"/%3E%3Cpath d="M7 6.5h.01"/%3E%3Cpath d="M7 13h.01"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="4" y="4" width="16" height="5" rx="1.5"/%3E%3Crect x="4" y="10.5" width="16" height="5" rx="1.5"/%3E%3Crect x="4" y="17" width="16" height="3" rx="1.2"/%3E%3Cpath d="M7 6.5h.01"/%3E%3Cpath d="M7 13h.01"/%3E%3C/svg%3E')}
  .settings-icon-ops{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5" width="17" height="11" rx="2"/%3E%3Cpath d="M7 11h3l1.5-3 2 6 1.5-3h2"/%3E%3Cpath d="M9 20h6"/%3E%3Cpath d="M12 16v4"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5" width="17" height="11" rx="2"/%3E%3Cpath d="M7 11h3l1.5-3 2 6 1.5-3h2"/%3E%3Cpath d="M9 20h6"/%3E%3Cpath d="M12 16v4"/%3E%3C/svg%3E')}
  .settings-icon-audit{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 20V4h8l4 4v4"/%3E%3Cpath d="M14 4v5h5"/%3E%3Cpath d="M8.5 12h5"/%3E%3Ccircle cx="15.5" cy="16.5" r="3"/%3E%3Cpath d="m18 19 2.2 2.2"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 20V4h8l4 4v4"/%3E%3Cpath d="M14 4v5h5"/%3E%3Cpath d="M8.5 12h5"/%3E%3Ccircle cx="15.5" cy="16.5" r="3"/%3E%3Cpath d="m18 19 2.2 2.2"/%3E%3C/svg%3E')}
  .settings-icon-sessions{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5" width="17" height="11" rx="2"/%3E%3Cpath d="M8 20h8"/%3E%3Cpath d="M12 16v4"/%3E%3Ccircle cx="12" cy="10" r="2"/%3E%3Cpath d="M8.5 15a3.7 3.7 0 0 1 7 0"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect x="3.5" y="5" width="17" height="11" rx="2"/%3E%3Cpath d="M8 20h8"/%3E%3Cpath d="M12 16v4"/%3E%3Ccircle cx="12" cy="10" r="2"/%3E%3Cpath d="M8.5 15a3.7 3.7 0 0 1 7 0"/%3E%3C/svg%3E')}
  .btn.primary{background:var(--accent); color:#fff; border-color:transparent; font-weight:700}
  .btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%, #000); border-color:transparent}
  .btn.ghost{background:transparent; border-color:transparent}
  .btn.ghost:hover{background:color-mix(in srgb,var(--accent) 8%, transparent); border-color:transparent}
  .btn.subtle{background:color-mix(in srgb,var(--surface) 70%, transparent)}
  .btn.subtle:hover{background:var(--surface); border-color:var(--accent)}
  .btn.danger{background:#d04545; color:#fff; border-color:transparent}
  .btn.danger:hover{background:#b83333; border-color:transparent}
  .btn.warn{background:color-mix(in srgb,#f7b500 16%, var(--surface)); color:#9a6b00; border-color:color-mix(in srgb,#f7b500 55%, var(--border))}
  .btn.warn:hover{background:color-mix(in srgb,#f7b500 26%, var(--surface)); border-color:#f7b500}
  .btn:hover{border-color:var(--accent)}
  .btn.small{padding:6px 10px; font-size:13px; border-radius:var(--radius-tiny); gap:6px; line-height:1.2; min-height:30px; font-weight:500}
  .btn.small > svg,.btn.small .btn-icon{width:14px; height:14px}
  .btn.small.primary{font-weight:600}
  .btn:disabled,.btn[disabled],button:disabled,button[disabled]{opacity:.55; cursor:not-allowed}
  .btn:disabled:hover,.btn[disabled]:hover,button:disabled:hover,button[disabled]:hover{border-color:color-mix(in srgb,var(--border) 82%,transparent); transform:none; background:color-mix(in srgb,var(--panel) 70%,var(--panel-2))}
  .btn:disabled.primary:hover,.btn[disabled].primary:hover{background:var(--accent)}
  #bell{position:relative; display:inline-flex; align-items:center; justify-content:center}
  #bell .notif-badge{position:absolute; top:2px; right:0; transform:translate(50%,-50%); min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; line-height:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.3)}
  .muted{color:var(--muted)}
  .muted-small{color:var(--muted-2); font-size:12px}
  .lead-heading{display:inline-flex; align-items:center; gap:8px; color:inherit; margin:0}
  .lead-heading-icon{width:18px; height:18px; display:inline-block; background:currentColor; opacity:.85; flex-shrink:0; border-radius:999px; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
  .lead-heading[data-entity="person"] .lead-heading-icon{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="4.2"/%3E%3Cpath d="M5.5 19.5c0-3.5 3.3-6.3 6.5-6.3s6.5 2.8 6.5 6.3"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="4.2"/%3E%3Cpath d="M5.5 19.5c0-3.5 3.3-6.3 6.5-6.3s6.5 2.8 6.5 6.3"/%3E%3C/svg%3E')}
  .lead-heading[data-entity="company"] .lead-heading-icon{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 20.5V5.8a1.3 1.3 0 0 1 1.3-1.3h5.4v16H4.5z"/%3E%3Cpath d="M11.2 20.5h8.3V9.6a1.3 1.3 0 0 0-1.3-1.3h-7"/%3E%3Cpath d="M7.2 8.6h1.8"/%3E%3Cpath d="M7.2 12h1.8"/%3E%3Cpath d="M7.2 15.3h1.8"/%3E%3Cpath d="M15 12h1.8"/%3E%3Cpath d="M15 15.3h1.8"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 20.5V5.8a1.3 1.3 0 0 1 1.3-1.3h5.4v16H4.5z"/%3E%3Cpath d="M11.2 20.5h8.3V9.6a1.3 1.3 0 0 0-1.3-1.3h-7"/%3E%3Cpath d="M7.2 8.6h1.8"/%3E%3Cpath d="M7.2 12h1.8"/%3E%3Cpath d="M7.2 15.3h1.8"/%3E%3Cpath d="M15 12h1.8"/%3E%3Cpath d="M15 15.3h1.8"/%3E%3C/svg%3E')}
  .lead-heading-text{line-height:1.25}
  .lead-heading-text-strong{font-weight:600}
  .card>.row>h2{margin:0}
  .lead-detail-address{display:flex; align-items:center; gap:8px; margin-top:2px; font-size:15px}
  .lead-detail-address::before{content:''; width:16px; height:16px; background:currentColor; opacity:.85; flex-shrink:0; border-radius:999px; -webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 21s6-5.5 6-11a6 6 0 1 0-12 0c0 5.5 6 11 6 11z"/%3E%3Ccircle cx="12" cy="10" r="2.8"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 21s6-5.5 6-11a6 6 0 1 0-12 0c0 5.5 6 11 6 11z"/%3E%3Ccircle cx="12" cy="10" r="2.8"/%3E%3C/svg%3E'); -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
  .detail-context-line{display:flex; align-items:center; gap:8px; margin-top:2px; font-size:15px; color:var(--muted-2)}
  .detail-context-bar{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; width:100%}
  .detail-context-group{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .detail-context-group--right{margin-left:auto; display:flex; flex-direction:column; gap:2px; align-items:flex-end; min-width:max-content}
  @media(max-width:700px){
    .detail-context-group--right{margin-left:0; align-items:flex-start; width:100%}
  }
  .detail-context-line::before{content:''; width:16px; height:16px; background:currentColor; opacity:.85; flex-shrink:0; border-radius:999px; -webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="4.2"/%3E%3Cpath d="M5.5 19.5c0-3.5 3.3-6.3 6.5-6.3s6.5 2.8 6.5 6.3"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="4.2"/%3E%3Cpath d="M5.5 19.5c0-3.5 3.3-6.3 6.5-6.3s6.5 2.8 6.5 6.3"/%3E%3C/svg%3E'); -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; mask-size:contain; mask-repeat:no-repeat; mask-position:center}
  .detail-context-line--push{margin-left:auto}
  .detail-context-line--netz::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M13%202L5%2014H11L10%2022L19%2010H13Z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M13%202L5%2014H11L10%2022L19%2010H13Z"/%3E%3C/svg%3E')}
  .detail-context-line--meister::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M12%204a7%207%200%200%200-7%207v2H4v5h16v-5h-1v-2a7%207%200%200%200-7-7zM9%2011V9a3%203%200%200%201%203-3v5h3V9a3%203%200%200%201%203%203v2H9z"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="black" d="M12%204a7%207%200%200%200-7%207v2H4v5h16v-5h-1v-2a7%207%200%200%200-7-7zM9%2011V9a3%203%200%200%201%203-3v5h3V9a3%203%200%200%201%203%203v2H9z"/%3E%3C/svg%3E')}
  .detail-context-line--business::before{-webkit-mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 20.5V5.8a1.3 1.3 0 0 1 1.3-1.3h5.4v16H4.5z"/%3E%3Cpath d="M11.2 20.5h8.3V9.6a1.3 1.3 0 0 0-1.3-1.3h-7"/%3E%3Cpath d="M7.2 8.6h1.8"/%3E%3Cpath d="M7.2 12h1.8"/%3E%3Cpath d="M7.2 15.3h1.8"/%3E%3Cpath d="M15 12h1.8"/%3E%3Cpath d="M15 15.3h1.8"/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M4.5 20.5V5.8a1.3 1.3 0 0 1 1.3-1.3h5.4v16H4.5z"/%3E%3Cpath d="M11.2 20.5h8.3V9.6a1.3 1.3 0 0 0-1.3-1.3h-7"/%3E%3Cpath d="M7.2 8.6h1.8"/%3E%3Cpath d="M7.2 12h1.8"/%3E%3Cpath d="M7.2 15.3h1.8"/%3E%3Cpath d="M15 12h1.8"/%3E%3Cpath d="M15 15.3h1.8"/%3E%3C/svg%3E')}
  .netz-access-block{
    margin-top:6px;
    padding:18px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    border-radius:18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .netz-access-title{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
  .netz-access-title h4{margin:0}
  .netz-access-meta{color:var(--muted); font-size:13px}
  .netz-access-credentials{display:flex; flex-direction:column; gap:12px}
  .netz-access-portals{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  .netz-access-portals-label{font-weight:600; color:var(--muted)}
  .netz-access-link{display:inline-flex; align-items:center; gap:6px; background:color-mix(in srgb,var(--panel) 74%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--border) 84%,transparent); padding:7px 12px; border-radius:999px; font-size:13px; text-decoration:none; color:var(--text)}
  .netz-access-link:hover{background:var(--surface-hover-bg); border-color:var(--surface-hover-border)}
  .netz-access-link::after{content:'↗'; font-size:11px; color:var(--muted)}
  .netz-access-entry{background:color-mix(in srgb,var(--panel) 74%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--border) 84%,transparent); border-radius:var(--radius-large); padding:14px; display:flex; flex-direction:column; gap:10px}
  .netz-access-count{font-weight:600; color:var(--muted)}
  .netz-access-fields{display:flex; flex-direction:column; gap:10px}
  .netz-access-empty{color:var(--muted)}
  .netz-access-hint{color:var(--muted); font-size:12px}
  .copyable-wrap{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
  .copyable{display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:8px; padding:2px 6px; transition:background .2s ease, box-shadow .2s ease}
  .copyable:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}
  .copyable:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .copyable .copy-icon{margin-left:auto; display:inline-flex; align-items:center; opacity:.6}
  .copyable .copy-icon .icon{width:14px; height:14px; opacity:1}
  .copyable-secret [data-secret-display]{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; letter-spacing:0}
  .copyable-action{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; border:1px solid color-mix(in srgb,var(--border) 84%,transparent); background:color-mix(in srgb,var(--panel) 74%,var(--panel-2)); color:var(--muted); cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease}
  .copyable-action:hover,
  .copyable-action:focus-visible{background:color-mix(in srgb,var(--accent) 12%,var(--panel-2)); border-color:color-mix(in srgb,var(--accent) 38%,var(--border)); color:var(--text)}
  .copyable-action .icon{width:14px; height:14px}
  .copyable-disabled{cursor:default; padding:0; background:none}
  .copyable-disabled:hover{background:none}
  .copyable-disabled:focus-visible{outline:none}
  .copyable-disabled .copy-icon{display:none}
  .layout{display:flex; min-height:calc(100vh - var(--app-header-height))}
  .sidebar{width:240px; border-right:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), var(--panel); padding:12px; position:sticky; top:var(--app-header-height); height:calc(100vh - var(--app-header-height)); overflow:auto; scrollbar-gutter:stable; transition:width .3s ease, padding .3s ease}
  .sidebar.collapsed{width:0; padding:0; border-right:none; overflow:hidden}
  nav .group{margin:10px 0}
  /* Gruppierte Navigation: thematische Abschnitte mit dezentem Label für klare Struktur. */
  nav .nav-group{display:flex; flex-direction:column; gap:6px; margin:0 0 4px}
  nav .nav-group + .nav-group{margin-top:14px; padding-top:14px; border-top:1px solid color-mix(in srgb,var(--border) 55%, transparent)}
  nav .nav-group__label{font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:0 6px 2px; opacity:.85}
  nav a{
    display:flex;
    gap:10px;
    align-items:center;
    padding:14px;
    border-radius:var(--radius-large);
    color:var(--text);
    text-decoration:none;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    box-shadow:none;
  }
  nav a .task-icon{margin-left:auto}
  main{flex:1; padding:var(--main-shell-padding); padding-right:calc(var(--main-shell-padding) + var(--safe-area-right)); padding-bottom:calc(var(--main-shell-padding) + var(--safe-area-bottom)); padding-left:calc(var(--main-shell-padding) + var(--safe-area-left)); min-width:0; overflow:auto; height: calc(100vh - var(--app-header-height))} /* main scrollable area only */
  main > #view{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    min-width:0;
    height:100%;
    min-height:0;
  }
  main > #view > .workspace-shell{
    flex:1 1 auto;
  }

  @media (prefers-reduced-motion: no-preference){
    .app{animation:fadeIn .6s ease-in-out}
    nav a,.btn,button,.card{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
    .brand i{animation:glow 4s ease-in-out infinite alternate}
    /* View-Transitions: weichere Uebergaenge zwischen Hash-Routen statt hartem Re-Render */
    ::view-transition-old(root),
    ::view-transition-new(root){
      animation-duration:.18s;
      animation-timing-function:ease-out;
    }
    ::view-transition-old(root){
      animation-name:view-fade-out;
    }
    ::view-transition-new(root){
      animation-name:view-fade-in;
    }
  }
  @keyframes view-fade-out{from{opacity:1}to{opacity:0}}
  @keyframes view-fade-in{from{opacity:0}to{opacity:1}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes glow{from{box-shadow:0 0 28px color-mix(in srgb, var(--accent) 35%, transparent)}to{box-shadow:0 0 42px rgba(255,215,0,.65)}}
  @keyframes searchDropdownFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
  @keyframes bgMove{from{background-position:50% -200px,0 0}to{background-position:50% -100px,0 0}}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
  body.no-window-anim nav a,
  body.no-window-anim .btn,
  body.no-window-anim button,
  body.no-window-anim .card{transition:none!important}
  body.no-window-anim nav a:hover,
  body.no-window-anim .btn:hover,
  body.no-window-anim button:hover{transform:none!important;box-shadow:none!important}
  body.no-window-anim .card:hover{transform:none!important;box-shadow:var(--shadow)!important}
  /* Intentionally NOT overriding .app's animation here. Toggling
     `animation:none` on and off triggers the fadeIn keyframes to restart,
     which was causing the whole app to "blink" on every navigation. The
     transition resets below stay because they're inert when off. */
  body.no-realtime-anim nav a,
  body.no-realtime-anim .btn,
  body.no-realtime-anim button,
  body.no-realtime-anim .card{transition:none!important}
  body.no-realtime-anim nav a:hover,
  body.no-realtime-anim .btn:hover,
  body.no-realtime-anim button:hover{transform:none!important;box-shadow:none!important}
  body.no-realtime-anim .card:hover{transform:none!important;box-shadow:var(--shadow)!important}
  a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* Auftragsverfolgung */
  .tracking-page{
    grid-row:1/-1;
    min-height:100vh;
    overflow:auto;
    padding:28px 22px 40px;
    background:
      radial-gradient(90% 90% at 0 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%),
      radial-gradient(80% 80% at 100% 0, rgba(255,215,0,.08), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.02), transparent 32%);
  }
  [data-theme="light"] .tracking-page{
    background:
      radial-gradient(90% 90% at 0 0, rgba(0,119,255,.14), transparent 58%),
      radial-gradient(80% 80% at 100% 0, rgba(102,170,255,.14), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 32%);
  }
  .tracking-shell{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
  .tracking-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,440px);gap:20px;align-items:stretch}
  .tracking-hero-card,
  .tracking-search-card,
  .tracking-side-card,
  .tracking-result-shell{
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 52%),
      color-mix(in srgb,var(--panel) 88%,var(--panel-2));
    box-shadow:0 24px 56px rgba(0,0,0,.24);
    position:relative;
    overflow:hidden;
  }
  [data-theme="light"] .tracking-hero-card,
  [data-theme="light"] .tracking-search-card,
  [data-theme="light"] .tracking-side-card,
  [data-theme="light"] .tracking-result-shell{box-shadow:0 20px 46px rgba(12,32,54,.12)}
  .tracking-hero-card{padding:30px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
  .tracking-kicker,
  .tracking-panel-eyebrow{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 36%,var(--border));
    background:color-mix(in srgb,var(--accent) 12%,transparent);
    color:var(--text);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .tracking-hero-card h1{
    margin:0;
    font:700 clamp(24px, 3vw, 30px)/1.02 "Noto Sans", sans-serif;
    letter-spacing:-.04em;
    max-width:11ch;
  }
  .tracking-hero-card p{margin:0;max-width:58ch;color:var(--muted);font-size:15px}
  .tracking-chip-list{display:flex;flex-wrap:wrap;gap:10px}
  .tracking-chip{
    display:inline-flex;
    align-items:center;
    padding:9px 14px;
    border-radius:999px;
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
    font-size:13px;
    color:var(--text);
  }
  .tracking-search-card{padding:24px;display:flex;flex-direction:column;gap:18px}
  .tracking-search-card::before,
  .tracking-result-shell::before{
    content:"";
    position:absolute;
    inset:auto -40px 100% auto;
    width:180px;
    height:180px;
    background:radial-gradient(circle, color-mix(in srgb,var(--accent) 28%,transparent), transparent 68%);
    transform:translateY(78px);
    pointer-events:none;
  }
  .tracking-search-card__header,
  .tracking-section-header,
  .tracking-result-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .tracking-search-card__header h2{margin:8px 0 0;font-size:28px}
  .tracking-panel-tag{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:12px;
    background:color-mix(in srgb,var(--panel) 62%,var(--panel-2));
    border:1px solid var(--border);
    color:var(--muted);
    font-size:12px;
    font-weight:600;
  }
  .tracking-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
  .tracking-field{margin:0}
  .tracking-field label{display:block;margin-bottom:6px;font-weight:600}
  .tracking-input-wrap{position:relative}
  .tracking-input-wrap input{padding-right:44px}
  .tracking-status-indicator{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    min-height:20px;
  }
  .tracking-status-indicator .icon{width:16px;height:16px;opacity:1}
  .tracking-actions{display:flex;gap:10px;flex-wrap:wrap}
  .tracking-note{
    padding:11px 13px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel-2) 88%,transparent);
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
  }
  .tracking-note--success{
    border-color:color-mix(in srgb,var(--good) 40%,var(--border));
    color:color-mix(in srgb,var(--good) 88%,var(--text));
    background:color-mix(in srgb,var(--good) 12%,var(--panel-2));
  }
  .tracking-note--danger{
    border-color:color-mix(in srgb,var(--bad) 40%,var(--border));
    color:color-mix(in srgb,var(--bad) 84%,var(--text));
    background:color-mix(in srgb,var(--bad) 12%,var(--panel-2));
  }
  .tracking-content{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:20px;align-items:start}
  .tracking-side-panel{display:flex;flex-direction:column;gap:16px}
  .tracking-side-card{padding:20px;display:flex;flex-direction:column;gap:14px}
  .tracking-side-card p{margin:0;color:var(--muted);line-height:1.55}
  .tracking-checklist{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
  .tracking-checklist li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text);
    line-height:1.45;
  }
  .tracking-checklist li::before{
    content:"";
    width:18px;
    height:18px;
    margin-top:1px;
    border-radius:999px;
    background:
      linear-gradient(135deg, color-mix(in srgb,var(--accent) 80%,#fff), color-mix(in srgb,var(--accent-2) 60%,#fff));
    box-shadow:0 8px 16px color-mix(in srgb,var(--accent) 24%,transparent);
    flex-shrink:0;
  }
  .tracking-result-shell{padding:24px;min-height:360px;animation:tracking-reveal .24s ease-out}
  .tracking-result-shell--empty,
  .tracking-result-shell--loading{display:flex;align-items:center;justify-content:center}
  .tracking-empty-state,
  .tracking-loading-state{
    width:min(520px,100%);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .tracking-empty-state__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    background:color-mix(in srgb,var(--panel) 64%,var(--panel-2));
    border:1px solid var(--border);
    font-size:12px;
    color:var(--muted);
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .tracking-empty-state h2{margin:0;font-size:28px;letter-spacing:-.03em}
  .tracking-empty-state p,
  .tracking-loading-state span{margin:0;color:var(--muted);line-height:1.55}
  .tracking-result-copy h2{margin:10px 0 0}
  .tracking-result-copy p{margin:12px 0 0;max-width:62ch;color:var(--muted)}
  .tracking-reference-card{
    min-width:min(100%,260px);
    padding:16px 18px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
    background:color-mix(in srgb,var(--panel) 64%,var(--panel-2));
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .tracking-reference-card__label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .tracking-reference-card strong{font-size:18px;line-height:1.25}
  .tracking-reference-card__meta{color:var(--muted);line-height:1.45}
  .tracking-status-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    border-radius:999px;
    font-size:30px;
    font-weight:700;
    letter-spacing:-.04em;
    border:1px solid transparent;
    background:color-mix(in srgb,var(--panel) 60%,var(--panel-2));
  }
  .tracking-status-pill--success{background:color-mix(in srgb,var(--good) 16%,var(--panel));border-color:color-mix(in srgb,var(--good) 40%,var(--border))}
  .tracking-status-pill--warn{background:color-mix(in srgb,var(--warn) 16%,var(--panel));border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}
  .tracking-status-pill--danger{background:color-mix(in srgb,var(--bad) 16%,var(--panel));border-color:color-mix(in srgb,var(--bad) 40%,var(--border))}
  .tracking-status-pill--info{background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-color:color-mix(in srgb,var(--accent) 36%,var(--border))}
  .tracking-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:20px}
  .tracking-result-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:16px;
    border-radius:18px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .tracking-result-card__label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .tracking-result-card__value{font-size:18px;line-height:1.3}
  .tracking-result-card__meta{color:var(--muted);font-size:13px;line-height:1.45}
  .tracking-media-section{display:flex;flex-direction:column;gap:12px;margin-top:22px}
  .tracking-section-header h3{margin:0;font-size:20px}
  .tracking-section-meta{color:var(--muted);font-size:13px}
  .tracking-media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
  .tracking-file-card{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px;
    border-radius:18px;
    border:1px solid var(--border);
    background:color-mix(in srgb,var(--panel) 74%,var(--panel-2));
  }
  .tracking-file-preview{
    width:86px;
    min-width:86px;
    height:86px;
    border-radius:var(--radius-large);
    background:color-mix(in srgb,var(--panel-2) 90%,transparent);
  }
  .tracking-file-preview img{object-fit:cover}
  .tracking-file-card__body{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1}
  .tracking-file-card__name{
    appearance:none;
    border:0;
    background:none;
    padding:0;
    margin:0;
    font:inherit;
    color:var(--text);
    text-align:left;
    cursor:pointer;
    align-self:flex-start;
  }
  .tracking-file-card__name:hover .tracking-file-card__title,
  .tracking-file-card__name:focus-visible .tracking-file-card__title{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
  }
  .tracking-file-card__name:focus-visible{
    outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent);
    outline-offset:4px;
    border-radius:8px;
  }
  .tracking-file-card__title{font-size:15px;line-height:1.35;word-break:break-word}
  @keyframes tracking-reveal{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
  @media (max-width: 980px){
    .tracking-hero,
    .tracking-content{grid-template-columns:1fr}
    .tracking-hero-card h1{max-width:none}
  }
  @media (max-width: 640px){
    .tracking-page{padding:18px 14px 28px}
    .tracking-hero-card,
    .tracking-search-card,
    .tracking-side-card,
    .tracking-result-shell{padding:18px}
    .tracking-status-pill{font-size:24px}
    .tracking-file-card{flex-direction:column}
    .tracking-file-preview{width:100%;min-width:0;height:180px}
  }

  /* Auftragserfassung */
  .order-form-shell{width:100%;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:var(--page-gap);overflow-anchor:none}
  .order-form-shell{min-height:100%}
  .order-form-shell--wide{width:100%;max-width:none;margin:0}
  .order-form-shell--public{max-width:none}
  .order-form-shell--form{
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    min-height:0;
    overflow:hidden;
  }
  .order-form-shell--list{
    /* Kleinerer Abstand zwischen Topbar (Haupt-Tabs) und der Vorgänge-Liste/Status-Tabs,
       damit die beiden Tab-Reihen nicht unnötig weit auseinanderstehen. */
    gap:8px;
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    min-height:0;
    overflow:hidden;
  }
  .order-form-shell--designer{
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    min-height:0;
    overflow:hidden;
  }
  .order-form-shell--public.order-form-shell--form{
    height:100%;
    max-height:none;
  }
  .order-form-shell--designer .order-form-designer-shell{
    flex:1 1 auto;
    width:100%;
    max-width:none;
    margin:0;
    height:100%;
    max-height:none;
    min-height:0;
    gap:18px;
  }
  .order-form-shell--designer .order-form-designer-stack{
    flex:1 1 auto;
    min-height:0;
  }
  .order-form-shell--designer .order-form-designer-layout{
    flex:1 1 auto;
    grid-template-columns:minmax(220px,248px) minmax(0,1fr);
    gap:20px;
    grid-template-rows:minmax(0,1fr);
    align-items:stretch;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .order-form-shell--designer .order-form-designer-sidebar{
    position:relative;
    top:auto;
    align-self:stretch;
    height:100%;
    max-height:none;
    max-width:248px;
  }
  .order-form-shell--designer .order-form-designer-main{
    align-self:stretch;
    min-height:0;
    height:100%;
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:0;
    padding-bottom:0;
    scrollbar-gutter:auto;
  }
  .order-form-shell--designer .order-form-designer-main > *{
    flex:0 0 auto;
  }
  .order-form-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .order-form-header h2{margin:0}
  .order-form-meta{color:var(--muted);font-size:13px}
  .order-form-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  /* Topbar: Haupt-Tabs links/oben, Listen-Aktionen (Suche/Sortierung) oben rechts daneben.
     align-items:flex-start statt center, damit die Tabs oben sitzen und kein Leerraum
     über ihnen entsteht, wenn die Aktionen höher sind. */
  .order-form-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .order-form-topbar__actions{margin-left:auto;flex:0 1 auto}
  .order-form-tab{background:color-mix(in srgb,var(--surface) 80%, transparent);border:var(--border-thin);border-radius:var(--radius-tiny);padding:8px 18px;font-size:14px;color:var(--text);cursor:pointer;transition:all .15s ease}
  .order-form-tab:hover{border-color:var(--accent);color:#fff}
  .order-form-tab.is-active{background:var(--accent);color:#fff;border-color:var(--accent)}
  .order-form-card{
    position:relative;
    overflow:hidden;
    padding:20px;
    border-radius:22px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:var(--surface-card-bg);
    box-shadow:var(--surface-card-shadow);
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease;
  }
  .order-form-reference-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:var(--surface-soft-bg);
    border-color:var(--surface-soft-border);
  }
  .order-form-stack{display:flex;flex-direction:column;gap:16px}
  .order-form-shell--form .order-form-stack{
    flex:1 1 auto;
    min-height:0;
  }
  .order-form-layout{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:20px;align-items:start}
  .order-form-shell--form .order-form-layout{
    flex:1 1 auto;
    grid-template-columns:minmax(300px,380px) minmax(0,1fr);
    gap:24px;
    grid-template-rows:minmax(0,1fr);
    align-items:stretch;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .order-form-sidebar{
    display:flex;
    flex-direction:column;
    gap:16px;
    position:sticky;
    top:0;
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2) - var(--order-form-shell-offset));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2) - var(--order-form-shell-offset));
    min-height:0;
    overflow:hidden;
  }
  .order-form-shell--form .order-form-sidebar{
    position:relative;
    top:auto;
    align-self:stretch;
    height:100%;
    max-height:none;
  }
  .order-form-main{display:flex;flex-direction:column;gap:16px;min-width:0}
  .order-form-shell--form .order-form-main{
    align-self:stretch;
    min-height:0;
    height:100%;
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:0;
    padding-bottom:0;
    scrollbar-gutter:auto;
  }
  .order-form-shell--form .order-form-main > *{
    flex:0 0 auto;
  }
  .order-form-summary-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .order-form-summary-header h2{margin:0}
  .order-form-summary{display:flex;flex-direction:column;gap:14px;
    background:var(--surface-card-bg);
  }
  .order-form-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
  .order-form-overview-item{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;background:color-mix(in srgb,var(--panel) 76%,var(--panel-2));border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border))}
  .order-form-overview-item strong{font-size:15px;line-height:1.35}
  .order-form-overview-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .order-form-step-badge{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:32px;border-radius:var(--badge-radius);background:color-mix(in srgb,var(--accent) 15%, transparent);border:1px solid color-mix(in srgb,var(--accent) 38%, var(--border));color:var(--text);font-weight:600}
  .order-form-nav-title{font-size:var(--label-size);text-transform:uppercase;letter-spacing:var(--label-tracking);font-weight:600;color:var(--muted)}
  /* Linke Spalte des Auftragserfassungs-Formulars an den neuen, flachen Karten-Stil angleichen:
     Surface + kräftige, flache Border + Token-Radius statt 22px-Radius mit Karten-Schatten. */
  .order-form-sidebar .order-form-card{
    border:var(--border-strong);
    border-radius:var(--radius-large);
    background:var(--surface);
    box-shadow:none;
  }
  .order-form-step-overview{
    display:flex;
    flex-direction:column;
    flex:1 1 0;
    height:100%;
    min-height:0;
    background:var(--surface-card-bg);
  }
  .order-form-step-summary-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
    min-height:0;
    overflow:auto;
    padding-right:4px;
    overscroll-behavior:contain;
  }
  .order-form-step-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    padding:14px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    text-align:left;
    color:var(--text);
    box-shadow:none;
    font:inherit;
  }
  .order-form-step-summary.is-active{
    border-color:color-mix(in srgb,var(--accent) 44%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 74%,var(--panel-2));
  }
  .order-form-step-summary.is-complete{border-color:color-mix(in srgb,var(--good) 40%,var(--border))}
  .order-form-step-summary-meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .order-form-step-summary-title{font-weight:600}
  .order-form-step-summary-value{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:48px;
    height:32px;
    border-radius:999px;
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    font-weight:700;
  }
  .order-form-hints ul{margin:8px 0 0 18px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:6px}
  .order-form-hints .required{color:var(--accent);font-weight:700}
  .order-form-step-card h3{margin:0}
  .order-form-step-progress{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:nowrap;flex:0 1 auto}
  .order-form-step-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
  .order-form-inline-banner{padding:12px 14px;border-radius:var(--radius-small);border:1.5px solid color-mix(in srgb,var(--accent) 40%,var(--border));background:color-mix(in srgb,var(--accent) 8%, var(--surface));font-size:13px;line-height:1.5}
  .order-form-inline-banner--progress{display:flex;flex-direction:column;gap:8px;border-color:color-mix(in srgb,var(--accent) 40%,var(--border));background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,var(--panel-2)),color-mix(in srgb,var(--panel-2) 92%,var(--panel)))}
  .order-form-inline-banner__status{display:flex;align-items:center;gap:10px;font-weight:600}
  .order-form-section{display:flex;flex-direction:column;gap:12px;margin-top:14px}
  .order-form-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .order-form-section-header h4{margin:0;font-size:15px}
  .order-form-section-header .muted-small{max-width:320px}
  .order-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
  .order-form-grid .field label{display:flex;align-items:center;gap:6px}
  .order-form-grid .field .required{color:var(--accent);font-weight:700}
  .order-form-grid .field input,
  .order-form-grid .field select,
  .order-form-grid .field textarea{
    /* background-color statt background-Shorthand, damit der globale select-Pfeil
       (background-image, Regel `select{}`) nicht überschrieben wird. */
    background-color:var(--surface);
    border:1.5px solid var(--border);
    border-radius:var(--radius-small);
    padding:9px 12px;
    transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  .order-form-grid .field select{ padding-right:34px; }
  .order-form-grid .field input:hover,
  .order-form-grid .field select:hover,
  .order-form-grid .field textarea:hover{border-color:color-mix(in srgb,var(--accent) 32%, var(--border))}
  .order-form-grid .field input:focus,
  .order-form-grid .field select:focus,
  .order-form-grid .field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent)}
  .order-form-input-with-unit{display:flex;align-items:center;gap:8px}
  .order-form-input-with-unit input,
  .order-form-input-with-unit select,
  .order-form-input-with-unit .order-form-autofill-text{flex:1;min-width:0}
  .order-form-unit{font-size:12px;color:var(--muted);white-space:nowrap}
  .order-form-inline-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
  .order-form-inline-option{border:1.5px solid var(--border);background:var(--surface);border-radius:var(--badge-radius);padding:6px 12px;cursor:pointer;transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
  .order-form-inline-option:hover{border-color:var(--accent)}
  .order-form-inline-option.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%, var(--surface));box-shadow:0 0 0 1px var(--accent)}
  .order-form-inline-option:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent)}
  .order-form-grid input:disabled,.order-form-grid textarea:disabled,.order-form-grid select:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed;opacity:.75}
  .order-form-inline-option:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed;opacity:.75}
  .order-form-autofill-text{padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-small);background:color-mix(in srgb,var(--surface) 80%, var(--panel-2));min-height:38px;display:flex;align-items:center;color:var(--text);user-select:none;pointer-events:none}
  .order-form-static{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--panel-2)}
  .order-form-static-title{font-weight:600;margin-bottom:6px}
  .order-form-static-body{display:flex;flex-direction:column;gap:8px;color:var(--text);font-size:13px}
  .order-form-formula-value{font-weight:700;font-size:16px;line-height:1.3}
  .order-form-pdf-block{gap:10px}
  .order-form-pdf-preview{width:100%;min-height:320px;border-radius:12px;border:1px solid var(--border);background:var(--panel)}
  .order-form-component-input{display:flex;flex-direction:column;gap:8px}
  .order-form-component-display{padding:10px 12px;border-radius:10px;border:1px dashed var(--border);background:var(--panel);display:flex;flex-direction:column;gap:4px;cursor:pointer}
  .order-form-component-display.is-locked{cursor:not-allowed;opacity:0.7}
  .order-form-component-display:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .order-form-component-title{font-weight:600}
  .order-form-component-meta{color:var(--muted);font-size:12px}
  .order-form-component-actions{display:flex;gap:8px;flex-wrap:wrap}
  .order-form-component-modal{display:flex;flex-direction:column;gap:12px}
  .order-form-component-filter{display:flex;gap:12px;flex-wrap:wrap}
  .order-form-component-table{overflow:auto;border:var(--border-strong);border-radius:var(--radius-large);background:var(--surface)}
  .order-form-component-table table{width:100%;border-collapse:collapse;font-size:13px;color:var(--text)}
  .order-form-component-table th{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--muted)}
  .order-form-component-table td{padding:8px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
  .order-form-component-table tr:last-child td{border-bottom:none}
  .order-form-component-row{cursor:pointer}
  .order-form-component-row:hover{background:var(--panel-2)}
  .order-form-component-row:focus-visible{outline:2px solid var(--accent)}
  .order-form-group{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--radius-large);border:var(--border-strong);background:var(--surface);width:100%;flex:0 0 auto;grid-column:1/-1}
  .order-form-shell .stack{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .order-form-card .stack{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .order-form-card .stack > *{width:100%;max-width:100%;flex:0 0 auto}
  .order-form-shell .stack > *{width:100%;max-width:100%;flex:0 0 auto}
  .order-form-group-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;cursor:pointer}
  .order-form-group-toggle-area:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:12px}
  .order-form-group-heading{display:flex;gap:8px;align-items:flex-start}
  .order-form-group-toggle-area{cursor:pointer;flex:1 1 auto}
  .order-form-group-toggle-icon{font-size:16px;line-height:1;color:var(--muted);margin-top:0;display:inline-flex;align-items:center;justify-content:center;min-width:14px}
  .order-form-group-title{font-weight:600;font-size:15px}
  .order-form-group-title,.order-form-group-entry-title,.order-form-grid .field label,.order-form-static-title{user-select:none}
  .order-form-group-meta{color:var(--muted);font-size:12px;margin-top:4px}
  .order-form-group-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .order-form-group-body{display:flex;flex-direction:column;gap:12px}
  .order-form-group-entry{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--radius-medium);border:1.5px solid var(--border);background:var(--surface)}
  .order-form-field-enter{animation:order-form-field-enter .24s ease-out}
  .order-form-group-entry-enter{animation:order-form-group-entry-enter .28s ease-out}
  .order-form-group-entry-leave{animation:order-form-group-entry-leave .2s ease-in forwards;pointer-events:none}
  @keyframes order-form-field-enter{
    from{opacity:0;transform:translateY(8px);filter:blur(2px)}
    to{opacity:1;transform:translateY(0);filter:blur(0)}
  }
  @keyframes order-form-group-entry-enter{
    from{opacity:0;transform:translateY(10px) scale(.99)}
    to{opacity:1;transform:translateY(0) scale(1)}
  }
  @keyframes order-form-group-entry-leave{
    from{opacity:1;transform:translateY(0) scale(1);max-height:1000px}
    to{opacity:0;transform:translateY(-6px) scale(.98);max-height:0}
  }
  .order-form-group-entry-title{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-weight:600}
  .order-form-group-collapsed .order-form-group-body{display:none}
  .order-form-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);font-size:11px;color:var(--muted);cursor:help}
  .order-form-info[data-tooltip]{position:relative}
  .order-form-info[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;top:130%;transform:translateX(-50%);background:var(--panel);color:var(--text);padding:6px 10px;border-radius:8px;border:1px solid var(--border);box-shadow:var(--shadow);min-width:180px;max-width:280px;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:10}
  .order-form-info[data-tooltip]::before{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:var(--border);opacity:0;transition:opacity .2s ease}
  .order-form-info[data-tooltip]:hover::after,
  .order-form-info[data-tooltip]:focus-visible::after,
  .order-form-info[data-tooltip]:hover::before,
  .order-form-info[data-tooltip]:focus-visible::before{opacity:1}
  .order-form-checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
  .order-form-checkbox input{appearance:none;width:18px;height:18px;border-radius:6px;border:1px solid var(--border);background:var(--panel);display:inline-flex;align-items:center;justify-content:center;margin-top:2px;flex-shrink:0;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
  .order-form-checkbox input:checked{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}
  .order-form-checkbox input:checked::after{content:"✕";font-size:12px;font-weight:700;line-height:1;color:var(--accent)}
  .order-form-checkbox input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
  .order-form-checkbox span{line-height:1.4}
  .order-form-signature{display:flex;flex-direction:column;gap:8px}
  .order-form-signature canvas{width:100%;min-height:120px;height:120px;border-radius:12px;border:1px dashed var(--border);background:var(--panel-2);touch-action:none}
  .order-form-signature-actions{display:flex;gap:8px;flex-wrap:wrap}
  .order-form-collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-tiny);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-size:14px;cursor:pointer;transition:border-color .15s ease, color .15s ease}
  .order-form-collapse-toggle:hover{color:var(--accent);border-color:var(--accent)}
  .order-upload{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--border) 85%,transparent);background:linear-gradient(180deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 70%,var(--panel)))}
  .order-upload-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .order-upload-title span{font-weight:600}
  .order-upload-dropzone{display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content:center;padding:16px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));background:var(--panel);cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease}
  .order-upload-dropzone-title{font-weight:600}
  .order-upload-dropzone:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 10%,transparent)}
  .order-upload-dropzone:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
  .order-upload-dropzone.is-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--panel));box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 22%,transparent)}
  .order-upload-files{display:flex;flex-direction:column;gap:8px}
  .order-upload-file{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--panel);padding:8px 10px;border-radius:10px;border:1px solid var(--border)}
  .order-upload-file .muted-small{margin-left:auto}
  .order-form-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
  .order-form-actions .btn{min-width:120px}
  .order-form-error{color:var(--bad);font-size:12px;font-weight:600}
  .order-progress-bar{position:relative;width:clamp(120px,20vw,180px);height:8px;border-radius:var(--badge-radius);background:color-mix(in srgb,var(--surface) 70%, var(--panel-2));border:1.5px solid var(--border);overflow:hidden;flex:0 1 auto}
  .order-progress-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 70%, var(--accent-2)));border-radius:var(--badge-radius)}
  .order-form-review-card{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;border:1px solid var(--border);background:var(--panel-2)}
  .order-form-review-card.is-complete{border-color:color-mix(in srgb,var(--good) 36%,var(--border));background:color-mix(in srgb,var(--good) 10%,var(--panel-2))}
  /* Vorgangsliste der Auftragserfassung: Mailbox-Stil via .app-page.order-forms-page */
  .order-form-shell--list .app-page.order-forms-page{
    flex:1 1 auto;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .order-forms-page__search{flex:1 1 240px;min-width:200px;max-width:340px}
  .order-forms-page__sort{flex:0 1 auto;max-width:240px}
  .order-forms-page__status-tab .app-tab__count{margin-left:6px;font-weight:600}
  .order-forms-list-item{padding-top:32px}
  .order-forms-detail{padding:24px;display:flex;flex-direction:column;gap:18px;flex:1;min-height:0;overflow-y:auto}
  /* Schlüssel-Wert-Zeilen als ruhiges „Datenblatt": feine Trennlinien statt bloßer Lücken
     verbessern die Scanbarkeit; letzte Zeile ohne Linie. */
  .app-detail__info-list{display:flex;flex-direction:column;gap:0}
  .app-detail__info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--border) 45%, transparent)}
  .app-detail__info-row:last-child{border-bottom:none;padding-bottom:0}
  .app-detail__info-row:first-child{padding-top:0}
  .app-detail__info-row span{font-size:12px;line-height:1.45;color:var(--muted)}
  .app-detail__info-row strong{font-size:13px;line-height:1.45;text-align:right;color:var(--text);font-weight:600}
  /* Klickbarer Wert in Info-Zeilen (z. B. verknüpfter Auftrag/Lead) — als Link gestaltet. */
  .app-detail__info-link{background:none;border:none;padding:0;margin:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-align:right;text-decoration:none}
  .app-detail__info-link:hover{text-decoration:underline}
  .app-detail__actions{display:flex;flex-direction:column;gap:8px}
  .app-detail__actions-row{display:flex;gap:8px;flex-wrap:wrap}
  .app-detail__actions-row--workflow{padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--border) 70%,transparent)}
  /* Aktions-Buttons im Vorgänge-Detail: rahmenlose (ghost) Buttons bekommen eine
     dezente Umrandung, damit sie klar als Buttons erkennbar sind. */
  .order-forms-detail .app-detail__actions .btn.ghost{border-color:var(--border)}
  .order-forms-detail .app-detail__actions .btn.ghost:hover{border-color:var(--accent)}
  .order-form-review-context{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
  .order-form-review-context-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  .order-form-review-history{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:color-mix(in srgb,var(--panel-2) 90%,transparent)}
  .order-form-review-history--compact{margin-top:0;padding:0;border:none;border-radius:0;background:transparent;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 10px}
  .order-form-review-history--compact .order-form-review-history-item{display:none}
  .order-form-review-history-item{display:flex;flex-direction:column;gap:4px}
  /* Korrektur-Begründungen behalten ihre Zeilenumbrüche (white-space:pre-line). */
  .order-form-review-reason{white-space:pre-line}
  /* Prüfverlauf (vollständig) als klar gegliederte Karte: Kopfzeile, getrennte Einträge,
     hervorgehobene Begründung. Die Kompakt-Variante (Pillenzeile) bleibt unverändert. */
  .order-form-review-history:not(.order-form-review-history--compact){padding:0;gap:0;border:var(--border-strong);border-radius:var(--radius-medium);background:var(--surface);overflow:hidden}
  .order-form-review-history:not(.order-form-review-history--compact) > .order-form-overview-label{padding:11px 14px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);background:color-mix(in srgb,var(--panel-2) 55%,transparent)}
  .order-form-review-history:not(.order-form-review-history--compact) > .muted-small{padding:12px 14px}
  .order-form-review-history:not(.order-form-review-history--compact) .order-form-review-history-item{gap:8px;padding:12px 14px}
  .order-form-review-history-item + .order-form-review-history-item{border-top:1px solid color-mix(in srgb,var(--border) 45%,transparent)}
  .order-form-review-history-item__head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .order-form-review-history-item__reason{padding:8px 10px;border-radius:var(--radius-tiny);background:color-mix(in srgb,var(--panel-2) 70%,transparent);border-left:2px solid color-mix(in srgb,var(--accent) 45%,var(--border));font-size:12px;line-height:1.5;color:var(--muted)}
  .order-form-success{display:flex;flex-direction:column;gap:12px;text-align:center}
  @media (max-width: 960px){
    .order-form-layout{grid-template-columns:1fr}
    .order-form-shell--form .order-form-layout{
      grid-template-columns:minmax(0,1fr);
      height:auto;
    }
    .order-form-sidebar{position:static;height:auto;max-height:none;min-height:auto;overflow:visible}
    .order-form-step-overview{height:auto;min-height:auto;flex:0 0 auto}
    .order-form-step-summary-list{min-height:auto;overflow:visible;padding-right:0}
    .order-form-shell--form{height:auto;min-height:100%;overflow:visible}
    .order-form-shell--list{height:auto;max-height:none;min-height:100%;overflow:visible}
    .order-form-shell--form .order-form-stack,
    .order-form-shell--form .order-form-layout{min-height:auto;overflow:visible}
    .order-form-shell--form .order-form-main{height:auto;min-height:auto;overflow:visible;padding-right:0;padding-bottom:0;scrollbar-gutter:auto}
    .order-form-step-progress{width:100%;justify-content:flex-start}
    .order-progress-bar{flex:1 1 160px;width:auto;max-width:none}
    .order-step-status{display:none}
    .app-page.order-forms-page .app-page__layout{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion: reduce){
    .order-form-field-enter,
    .order-form-group-entry-enter,
    .order-form-group-entry-leave{animation:none}
  }
  .order-public-shell{height:100vh;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .order-public-shell header{position:sticky;top:0}
  .order-public-content{flex:1 1 auto;min-height:0;overflow:auto;padding:20px;display:flex;flex-direction:column}
  .order-public-content > #orderFormView{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .order-public-footer{padding:12px;text-align:center;color:var(--muted);font-size:12px}
  .order-form-editor{display:flex;flex-direction:column;gap:16px;max-height:70vh;overflow:auto;padding-right:4px}
  .order-form-editor .card{position:relative}
  .order-form-draggable{cursor:grab;transition:box-shadow .16s ease,transform .16s ease,opacity .16s ease}
  .order-form-draggable.dragging{cursor:grabbing;opacity:0.52;box-shadow:0 8px 24px rgba(0,0,0,.18),0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent)}
  .order-form-editor .muted-small{line-height:1.4}
  .order-form-step-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .order-form-step-body{display:flex;flex-direction:column;gap:12px}
  .order-form-step-collapsed .order-form-step-body{display:none}
  .order-form-rule{display:flex;flex-direction:column;gap:6px}
  .order-form-rule-row{display:flex;gap:8px;flex-wrap:wrap}
  .order-form-rule[data-mode="always"] .order-form-rule-equals{display:none}
  .order-form-rule[data-mode="advanced"] .order-form-rule-equals{display:none}
  .order-form-rule[data-mode="builder"] .order-form-rule-equals{display:none}
  .order-form-rule[data-mode="always"] .order-form-rule-advanced{display:none}
  .order-form-rule[data-mode="equals"] .order-form-rule-advanced{display:none}
  .order-form-rule[data-mode="builder"] .order-form-rule-advanced{display:none}
  .order-form-rule[data-mode="always"] .order-form-rule-builder{display:none}
  .order-form-rule[data-mode="equals"] .order-form-rule-builder{display:none}
  .order-form-rule[data-mode="advanced"] .order-form-rule-builder{display:none}
  .order-form-required-row{margin-top:8px}
  .order-form-designer{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;align-items:start}
  .order-form-designer-shell.order-form-designer{display:flex;flex-direction:column;gap:16px;align-items:stretch}
  .order-form-designer .order-form-block,
  .order-form-designer .order-form-step-toolbar,
  .order-form-designer .order-form-palette-item,
  .order-form-designer .order-form-dropzone{user-select:none}
  .order-form-palette{position:sticky;top:12px;display:flex;flex-direction:column;gap:12px;max-height:100%;overflow:auto;padding-right:6px;overscroll-behavior:contain}
  .order-form-designer-shell .order-form-palette{position:static;top:auto;max-height:none;overflow:visible;padding-right:0}
  .order-form-designer-nav-card{gap:16px}
  .order-form-designer-nav-card .settings-nav-group:last-child{flex:1 1 auto}
  .order-form-designer-nav-card .order-form-palette{gap:10px}
  .order-form-designer-main{padding-right:0}
  .order-form-designer-main .settings-section-copy{max-width:none}
  .order-form-palette-section{display:flex;flex-direction:column;gap:8px}
  .order-form-palette-title,
  .order-form-canvas-title{margin:0}
  .order-form-palette-caption{margin-bottom:4px}
  .order-form-designer-title-field{width:100%;max-width:none}
  .order-form-palette-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;border:1px dashed var(--border);background:var(--panel-2);cursor:grab;font-weight:600}
  .order-form-palette-item:active{cursor:grabbing}
  .order-form-palette-item span{font-weight:500;font-size:12px;color:var(--muted)}
  .order-form-canvas{display:flex;flex-direction:column;gap:12px}
  .order-form-canvas-header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
  .order-form-canvas-header > :first-child{flex:1 1 760px;min-width:0}
  .order-form-dropzone{display:flex;align-items:center;justify-content:center;border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);border-radius:10px;padding:6px 8px;min-height:22px;background:color-mix(in srgb, var(--accent) 8%, transparent);color:var(--muted);text-align:center;font-size:11px;transition:border-color .12s ease,background-color .12s ease,box-shadow .12s ease}
  .order-form-step-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    background:var(--surface);
    border:var(--border-strong);
    border-radius:var(--radius-large);
  }
  .order-form-step-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;cursor:pointer}
  .order-form-step-toolbar > .row:first-child{flex:1 1 auto;min-width:0}
  .order-form-block-list{display:flex;flex-direction:column;gap:8px}
  .order-form-block{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);cursor:pointer}
  .order-form-block:hover{border-color:color-mix(in srgb, var(--accent) 50%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent)}
  .order-form-block-title{font-weight:600}
  .order-form-block-meta{font-size:12px;color:var(--muted)}
  .order-form-block-actions{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
  .order-form-block-actions .btn{padding:6px 8px}
  .order-form-section-title{display:flex;align-items:center;gap:8px;font-weight:600;margin-top:6px}
  .order-form-settings-hint{font-size:12px;color:var(--muted)}
  .order-form-designer .order-form-editor{max-height:none;overflow:visible;padding-right:0}
  .order-form-dropzone.is-empty{background:color-mix(in srgb, var(--accent) 4%, transparent)}
  .order-form-designer:not(.is-drag-active) .order-form-dropzone,
  .order-form-designer:not(.is-drag-active) .order-form-insert-slot{display:none}
  .order-form-designer .order-form-dropzone,
  .order-form-designer .order-form-insert-slot{opacity:0;pointer-events:none;max-height:0;overflow:hidden;margin:0;transition:opacity .15s ease, max-height .15s ease, margin .15s ease}
  .order-form-designer.is-drag-active .order-form-dropzone,
  .order-form-designer.is-drag-active .order-form-insert-slot{display:flex;opacity:1;pointer-events:auto;max-height:28px}
  .order-form-designer.is-drag-active .order-form-insert-slot{display:block}
  .order-form-designer.is-drag-active .order-form-block-list .order-form-insert-slot{margin:1px 0;max-height:10px}
  .order-form-drop-before{box-shadow:inset 0 3px 0 color-mix(in srgb, var(--accent) 90%, transparent),0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent)}
  .order-form-drop-after{box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--accent) 90%, transparent),0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent)}
  .order-form-dropzone.order-form-drop-before,
  .order-form-dropzone.order-form-drop-after{border-color:color-mix(in srgb, var(--accent) 95%, transparent);background:color-mix(in srgb, var(--accent) 16%, transparent)}
  .order-form-insert-slot{height:4px;border-radius:8px;transition:background-color .15s,box-shadow .15s}
  .order-form-insert-slot.order-form-drop-before,.order-form-insert-slot.order-form-drop-after{background:color-mix(in srgb, var(--accent) 22%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent)}
  .order-form-insert-slot.order-form-drop-before{height:10px;margin:3px 0}
  .order-form-designer .order-form-step-toolbar .order-form-group-toggle-icon{margin-top:0}
  .order-form-designer.is-drag-active .order-form-draggable:not(.dragging):hover{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent)}
  @media (max-width: 980px){
    .order-form-designer{grid-template-columns:1fr}
    .order-form-palette{position:static;max-height:none;overflow:visible;padding-right:0}
  }
  .settings-stack{display:flex;flex-direction:column;gap:12px}
  .settings-shell{
    width:100%;
    max-width:none;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:22px;
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    min-height:0;
    overflow:hidden;
  }
  .settings-nav-card,
  .settings-surface{
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    border-radius:22px;
    background:var(--surface-card-bg);
    box-shadow:var(--surface-card-shadow);
    overflow:hidden;
    position:relative;
  }
  .settings-kicker{
    display:inline-flex;
    align-items:center;
    width:max-content;
    min-height:28px;
    padding:7px 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));
    background:color-mix(in srgb,var(--accent) 12%,transparent);
    color:var(--text);
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .settings-panel__eyebrow,
  .settings-editor-card__eyebrow,
  .workspace-sidebar-intro__eyebrow,
  .workspace-panel__eyebrow,
  .workspace-focus-eyebrow,
  .dashboard-card-eyebrow,
  .project-component-card__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:max-content;
    min-height:20px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .settings-badge-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .settings-side-heading{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .settings-side-heading h3{
    margin:0;
    font-size:20px;
    line-height:1.14;
    letter-spacing:-.02em;
  }
  .settings-side-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 14px;
    border-radius:var(--radius-large);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  }
  .settings-side-item strong{
    font-size:13px;
    line-height:1.4;
  }
  .settings-side-item span{
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
  }
  .settings-layout{
    display:grid;
    grid-template-columns:minmax(250px,290px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:18px;
    align-items:stretch;
    flex:1 1 auto;
    width:100%;
    max-width:100%;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .settings-sidebar{
    display:flex;
    flex-direction:column;
    gap:16px;
    position:relative;
    top:auto;
    align-self:stretch;
    height:100%;
    max-height:none;
    min-height:0;
    overflow:hidden;
  }
  .settings-nav-card{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    height:100%;
    min-height:0;
    max-height:100%;
    overflow:auto;
    padding:15px;
    padding-right:10px;
    overscroll-behavior:contain;
  }
  .settings-nav-group{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .settings-nav-group + .settings-nav-group{
    padding-top:11px;
    border-top:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  }
  .settings-nav-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    padding:0 4px;
  }
  .settings-nav-list{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .settings-nav-btn{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    box-shadow:none;
    text-align:left;
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
  }
  .settings-nav-btn:hover,
  .settings-nav-btn:focus-visible{
    transform:none;
    box-shadow:none;
    background:var(--surface-hover-bg);
    border-color:var(--surface-hover-border);
  }
  .settings-nav-btn.is-active{
    background:var(--surface-active-bg);
    border-color:var(--surface-active-border);
  }
  .settings-icon-badge{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--text) 18%,var(--border));
    background:color-mix(in srgb,var(--panel-2) 84%,var(--panel));
    color:color-mix(in srgb,var(--text) 88%,var(--muted));
  }
  [data-theme="light"] .settings-icon-badge{
    background:color-mix(in srgb,var(--panel-2) 82%,var(--panel));
  }
  .settings-icon-badge .icon,
  .settings-nav-btn .icon{
    width:16px;
    height:16px;
    opacity:.95;
  }
  .settings-nav-btn:hover .settings-icon-badge,
  .settings-nav-btn:focus-visible .settings-icon-badge,
  .settings-nav-btn.is-active .settings-icon-badge{
    border-color:color-mix(in srgb,var(--text) 28%,var(--surface-active-border));
    background:color-mix(in srgb,var(--surface-active-bg) 78%,var(--panel));
    color:var(--text);
  }
  .settings-nav-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .settings-nav-copy strong{
    font-size:13px;
    line-height:1.3;
  }
  .settings-nav-copy span{
    font-size:11px;
    line-height:1.35;
    color:var(--muted);
  }
  .settings-main{
    display:flex;
    flex-direction:column;
    gap:18px;
    align-self:stretch;
    justify-self:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    height:100%;
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:0;
    padding-bottom:0;
    scrollbar-gutter:auto;
  }
  .settings-main > *{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    align-self:stretch;
  }
  .settings-surface{
    padding:22px;
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .settings-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    flex-wrap:wrap;
  }
  .settings-section-head h2{
    margin:4px 0 0;
    font-size:28px;
    line-height:1.08;
    letter-spacing:-.03em;
  }
  .settings-section-copy{
    margin:0;
    max-width:68ch;
    color:var(--muted);
    line-height:1.65;
  }
  .settings-section-actions,
  .settings-split-actions,
  .settings-inline-stats{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
  }
  .settings-section-actions .btn,
  .settings-tab-row .btn{
    box-shadow:none;
  }
  .settings-metric-grid{
    display:none;
  }
  .settings-metric{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:15px 16px;
    border-radius:var(--radius-large);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
  }
  .settings-metric-label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .settings-metric-value{
    font-size:22px;
    font-weight:700;
    line-height:1.1;
  }
  .settings-metric-text{
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
  }
  .settings-grid-2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
    align-items:start;
  }
  .settings-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:14px;
    align-self:stretch;
    width:100%;
    min-width:0;
    padding:20px;
    border-radius:20px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    overflow:hidden;
  }
  .settings-panel::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 62%);
    opacity:.55;
    pointer-events:none;
  }
  .settings-panel > *{
    position:relative;
  }
  .settings-panel--accent{
    border-color:color-mix(in srgb,var(--accent) 24%,var(--surface-soft-border));
    background:var(--surface-card-bg);
  }
  .settings-panel__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
  }
  .settings-panel__header h3{
    margin:0;
    font-size:20px;
    line-height:1.14;
    letter-spacing:-.02em;
  }
  .settings-panel__header p{
    margin:4px 0 0;
    color:var(--muted);
    line-height:1.55;
  }
  .workspace-shell{
    align-self:stretch;
    width:100%;
    max-width:none;
    margin:0;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    min-height:0;
    overflow:hidden;
  }
  .workspace-shell.emails-workspace-shell{
    width:100%;
    max-width:none;
  }
  .workspace-shell--nav{
    gap:0;
  }
  .workspace-layout{
    width:100%;
    max-width:100%;
    height:100%;
    min-height:0;
  }
  .workspace-sidebar{
    min-width:0;
  }
  .workspace-sidebar-intro{
    flex:0 0 auto;
    gap:12px;
    padding:18px;
    background:var(--surface-card-bg);
  }
  .workspace-sidebar-intro__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .workspace-sidebar-intro__copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
  }
  .workspace-sidebar-intro__copy h1{
    margin:0;
    font:700 clamp(24px, 2.9vw, 30px)/1.06 "Noto Sans", sans-serif;
    letter-spacing:-.04em;
  }
  .workspace-sidebar-intro__copy p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.58;
  }
  .workspace-sidebar-intro__badge{
    flex:0 0 auto;
  }
  .workspace-sidebar-intro__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .workspace-main{
    flex:1 1 auto;
    align-self:stretch;
    justify-self:stretch;
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
  }
  .workspace-nav-card{
    gap:12px;
    height:auto;
    scrollbar-gutter:stable;
  }
  .workspace-nav-list{
    gap:8px;
  }
  .workspace-main > *{
    width:100%;
    max-width:100%;
    align-self:stretch;
    min-height:0;
  }
  .workspace-main > .workspace-panel:only-child{
    flex:1 1 auto;
    min-height:0;
  }
  .workspace-main > .workspace-panel:only-child > .workspace-list-shell,
  .workspace-main > .workspace-panel:only-child > .scroll-list,
  .workspace-main > .workspace-panel:only-child > .analytics-content-frame{
    flex:1 1 auto;
    min-height:0;
  }
  .workspace-nav-button .badge{
    min-width:32px;
    justify-content:center;
  }
  .workspace-focus-stat{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .workspace-focus-stat__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .workspace-focus-stat__value{
    font-size:19px;
    line-height:1.08;
  }
  .workspace-form-note{
    margin-bottom:12px;
  }
  .workspace-form-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:8px;
  }
  .workspace-panel{
    flex:1 1 auto;
    align-self:stretch;
    width:100%;
    max-width:100%;
    min-height:0;
    padding:18px 20px;
    gap:12px;
    border-radius:14px;
    border:1.5px solid var(--border);
    background:var(--surface);
    transition:border-color .15s ease;
  }
  .workspace-panel:hover{
    border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
  }
  .workspace-panel__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding-bottom:10px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 60%, transparent);
  }
  .workspace-panel__head--actions-only{
    align-items:center;
    justify-content:flex-end;
    min-height:0;
    padding-bottom:0;
    border-bottom:none;
  }
  .workspace-panel__copy{
    min-width:0;
  }
  .workspace-panel__eyebrow{
    margin-bottom:2px;
  }
  .workspace-panel__copy h2{
    margin:4px 0 0;
    font-size:18px;
    line-height:1.25;
    letter-spacing:-.01em;
    font-weight:600;
  }
  .workspace-panel__copy p{
    margin:6px 0 0;
    max-width:68ch;
    color:var(--muted);
    font-size:13px;
    line-height:1.5;
  }
  .workspace-panel__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .workspace-panel > .scroll-list{
    flex:1 1 auto;
    min-height:0;
  }
  .workspace-list-shell{
    display:flex;
    flex:1 1 auto;
    min-height:0;
    height:100%;
  }
  .workspace-list-layout{
    display:grid;
    grid-template-columns:minmax(220px,260px) minmax(0,1fr);
    gap:14px;
    grid-template-rows:minmax(0,1fr);
    align-items:stretch;
    flex:1 1 auto;
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .workspace-list-layout--solo{
    grid-template-columns:minmax(0,1fr);
  }
  .workspace-list-sidebar{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
    top:auto;
    align-self:stretch;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .workspace-list-sidebar-card{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border-radius:var(--radius-large);
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    flex:1 1 auto;
    height:100%;
    min-height:0;
    max-height:100%;
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:10px;
  }
  .workspace-list-sidebar-label{
    display:inline-flex;
    align-items:center;
    gap:6px;
    width:max-content;
    min-height:20px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .workspace-list-focus-stack{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .workspace-list-sidebar-note{
    margin-top:auto;
  }
  .workspace-list-stage{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:12px;
    align-self:stretch;
    height:100%;
    min-height:0;
    overflow:hidden;
    overscroll-behavior:contain;
    padding-right:0;
    scrollbar-gutter:auto;
  }
  .workspace-list-stage.scroll-list{
    overflow:hidden;
  }
  .workspace-list-stage > *{
    width:100%;
    min-width:0;
  }
  .workspace-list-stage > :not(.workspace-list-sticky){
    flex:1 1 auto;
    min-height:0;
  }
  .workspace-list-stage > :not(.workspace-list-sticky):not(.workspace-record-list-table){
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .workspace-list-sticky{
    position:sticky;
    top:0;
    z-index:8;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:0 0 4px;
    background:none;
    backdrop-filter:none;
  }
  .workspace-list-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .workspace-list-commandbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,260px);
    gap:10px;
    align-items:end;
    width:100%;
    padding:12px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 90%,transparent);
    position:relative;
    overflow:hidden;
    isolation:isolate;
    background-clip:padding-box;
    background:var(--surface-card-bg);
    background-image:none;
    box-shadow:var(--surface-card-shadow);
  }
  .workspace-list-actionbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    width:100%;
    margin-bottom:8px;
  }
  .workspace-list-commandbar-meta{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
    align-self:end;
    grid-column:1 / -1;
  }
  .workspace-list-commandbar__actions{
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    gap:8px;
    flex-wrap:wrap;
  }
  .workspace-list-control{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .workspace-list-control input,
  .workspace-list-control select{
    width:100%;
  }
  .workspace-list-stage > .workspace-record-list-table,
  .workspace-list-stage > :not(.workspace-list-sticky) > .workspace-record-list-table{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:2px;
    scrollbar-gutter:stable;
  }
  .workspace-record-list-table{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}
  .workspace-record-list-table-head{
    display:grid;
    grid-template-columns:minmax(260px,1.45fr) minmax(210px,1.04fr) minmax(190px,.92fr) minmax(150px,.72fr);
    gap:10px;
    padding:0 14px;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .workspace-record-list-table-body{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0}
  .workspace-record-pill-row{display:flex;gap:6px;flex-wrap:wrap}
  .workspace-record-detail-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:13px;
    border-radius:14px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .workspace-record-detail-card--actions{
    padding:0;
    border:none;
    background:transparent;
  }
  .workspace-record-detail-title{font-size:15px;line-height:1.35}
  .workspace-record-info-list{display:flex;flex-direction:column;gap:6px}
  .workspace-record-info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
  .workspace-record-info-row span{font-size:12px;line-height:1.4;color:var(--muted)}
  .workspace-record-info-row strong{font-size:13px;line-height:1.4;text-align:right}
  .tasks-record-note{
    padding:12px 13px;
    border-radius:14px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    color:var(--muted);
    line-height:1.55;
    font-size:13px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }
  .workspace-record-actions{display:block;width:100%;min-width:0}
  .workspace-record-action-panel{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    padding:12px;
    border-radius:14px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .workspace-record-action-panel-head{display:flex;flex-direction:column;gap:4px}
  .workspace-record-action-quick,
  .workspace-record-action-main{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .workspace-record-action-quick{
    padding-bottom:8px;
    border-bottom:1px dashed color-mix(in srgb,var(--border) 88%,transparent);
  }
  .workspace-record-action-quick .btn,
  .workspace-record-action-main .btn{
    width:100%;
    min-width:0;
    max-width:none;
    justify-content:flex-start;
    padding:7px 10px;
    font-size:12px;
    line-height:1.3;
    white-space:normal;
  }
  .workspace-record-list-empty{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:24px;
    border-radius:var(--radius-large);
    border:1px dashed color-mix(in srgb,var(--border) 88%,transparent);
    background:var(--surface-soft-bg);
  }
  .workspace-subsection{
    gap:14px;
  }
  .workspace-subsection__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .workspace-subsection__copy{
    min-width:0;
  }
  .workspace-subsection__copy h3{
    margin:0;
    font-size:18px;
    line-height:1.25;
  }
  .workspace-subsection__copy p{
    margin:6px 0 0;
    color:var(--muted);
    line-height:1.58;
  }
  .tracking-hero-card p,
  .settings-section-copy,
  .settings-panel__header p,
  .workspace-panel__copy p,
  .workspace-subsection__copy p{
    display:none;
  }
  .workspace-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
    align-items:start;
  }
  .workspace-entity-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    border-radius:18px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    box-shadow:none;
  }
  .workspace-entity-card--attention{
    border-color:color-mix(in srgb,var(--warn) 34%,var(--border));
  }
  .workspace-entity-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .workspace-entity-card__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .workspace-entity-card__copy h3{
    margin:0;
    font-size:18px;
    line-height:1.25;
  }
  .workspace-entity-card__copy p{
    margin:0;
    color:var(--muted);
    line-height:1.5;
  }
  .workspace-entity-card__badges{
    display:flex;
    align-items:flex-start;
    gap:6px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .workspace-entity-card__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .workspace-entity-card__meta span{
    display:inline-flex;
    align-items:center;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    font-size:12px;
    line-height:1.45;
  }
  .workspace-entity-card__foot{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
  }
  #inboxNotifList{
    overscroll-behavior:contain;
    padding-right:4px;
  }
  @media (max-width:1180px){
    .workspace-shell{height:auto;max-height:none;overflow:visible}
  }
  @media (max-width:760px){
    .workspace-shell,
    .workspace-shell.workspace-shell--nav,
    .workspace-layout,
    .workspace-main{
      height:auto;
      max-height:none;
      min-height:auto;
      overflow:visible;
    }
    .workspace-sidebar-intro,
    .workspace-panel,
    .workspace-subsection,
    .workspace-entity-card{padding:16px}
    .workspace-panel{
      flex:0 1 auto;
      min-height:auto;
      overflow:visible;
    }
    .workspace-panel > .scroll-list{
      flex:0 1 auto;
      min-height:auto;
      overflow:visible;
    }
    .workspace-list-shell{height:auto}
    .workspace-list-layout{
      grid-template-columns:1fr;
      min-height:auto;
      height:auto;
      overflow:visible;
    }
    .workspace-list-sidebar{
      position:static;
      top:auto;
      height:auto;
      max-height:none;
      overflow:visible;
    }
    .workspace-list-sidebar-card{
      gap:12px;
      height:auto;
      max-height:none;
      overflow:visible;
      padding-right:14px;
    }
    .workspace-list-stage{
      height:auto;
      min-height:auto;
      overflow:visible;
      padding-right:0;
      scrollbar-gutter:auto;
    }
    .workspace-list-stage.scroll-list{
      overflow:visible;
    }
    .workspace-list-stage > .workspace-record-list-table{
      flex:0 1 auto;
      min-height:0;
      overflow:visible;
      padding-right:0;
      scrollbar-gutter:auto;
    }
    .workspace-list-stage > :not(.workspace-list-sticky){
      flex:0 1 auto;
      min-height:0;
      overflow:visible;
    }
    /* Specificity-Match mit der Desktop-Regel (0,3,0) — sonst gewinnt dort
       `overflow:hidden` trotz @media-Block und kappt z.B. #projectList,
       sodass nur die ersten 1–2 Karten der Liste sichtbar sind (B1-Bug). */
    .workspace-list-stage > :not(.workspace-list-sticky):not(.workspace-record-list-table){
      overflow:visible;
      display:block;
      max-height:none;
    }
    .workspace-list-stage > :not(.workspace-list-sticky) > .workspace-record-list-table{
      flex:0 1 auto;
      min-height:0;
      overflow:visible;
      padding-right:0;
      scrollbar-gutter:auto;
    }
    .workspace-list-focus-stack{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .workspace-list-commandbar{
      grid-template-columns:1fr;
    }
    .workspace-list-actionbar{justify-content:flex-start}
    .workspace-list-commandbar__actions{justify-content:flex-start}
    .workspace-list-commandbar-meta{justify-content:flex-start}
    .workspace-panel__head,
    .workspace-subsection__head{flex-direction:column}
    .workspace-entity-card__badges{justify-content:flex-start}
    .workspace-entity-card__foot{flex-direction:column}
    .workspace-record-list-table-head{display:none}
  }
  @media (max-width:560px){
    .workspace-list-focus-stack{
      grid-template-columns:1fr;
    }
  }
  @media (max-width:680px){
    .workspace-record-action-quick,
    .workspace-record-action-main{grid-template-columns:1fr}
  }
  @media (max-height:920px){
    .workspace-shell{
      gap:12px;
    }
    .workspace-panel{
      padding:16px;
    }
    .workspace-focus-stat__value{
      font-size:18px;
    }
    .workspace-panel__copy h2{
      font-size:16px;
    }
  }
  .settings-toggle-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .settings-toggle-row--compact{
    margin-top:8px;
  }
  .settings-toggle-row .switch,
  .settings-check-item .switch{
    margin-right:0;
  }
  .settings-note{
    padding:12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
    background:color-mix(in srgb,var(--panel) 68%,var(--panel-2));
    color:var(--muted);
    line-height:1.6;
  }
  .settings-help-list{
    margin:0;
    padding-left:18px;
    display:flex;
    flex-direction:column;
    gap:8px;
    color:var(--muted);
  }
  .settings-tab-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .settings-tab-row .btn{
    padding:8px 14px;
    border-radius:999px;
  }
  .settings-editor-shell{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .settings-editor-shell .card{
    border-radius:var(--radius-large);
    padding:16px;
    box-shadow:none;
  }
  .settings-editor-shell .card:hover{
    transform:none;
    box-shadow:none;
  }
  .settings-role-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
    align-items:start;
  }
  .settings-select-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:12px;
    align-items:start;
  }
  .settings-check-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:10px;
    align-items:start;
  }
  .settings-check-item{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 68%,var(--panel-2));
  }
  .settings-check-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .settings-attachment-field{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .settings-attachment-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .settings-attachment-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:10px;
  }
  .settings-attachment-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:14px 15px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .settings-attachment-item.is-active{
    border-color:color-mix(in srgb,var(--accent) 42%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 10%,transparent), transparent 70%),
      color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .settings-attachment-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    cursor:pointer;
  }
  .settings-attachment-copy strong{
    font-size:14px;
    line-height:1.35;
  }
  .settings-attachment-copy span{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
  }
  .settings-check-copy strong{
    font-size:14px;
    line-height:1.4;
  }
  .settings-check-copy span{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .settings-code-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .settings-code-card{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    flex-wrap:wrap;
    padding:16px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border));
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .settings-code-meta{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .settings-code-meta strong{
    font-size:15px;
    line-height:1.4;
  }
  .settings-token-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .settings-token-card strong{
    font-size:15px;
  }
  .settings-status-message{
    font-size:12px;
    line-height:1.6;
    color:var(--muted);
  }
  .settings-status-message--error{
    color:var(--bad);
  }
  .settings-status-message--warn{
    color:var(--warn);
  }
  .settings-instance-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .settings-instance-list{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .settings-code-head{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .automation-status-rule-card__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .emails-workspace-shell{
    width:100%;
    max-width:none;
    margin:0;
    min-width:0;
  }
  .emails-workspace-card{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow:hidden;
  }
  .emails-workspace-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
  }
  .emails-workspace-scroll,
  .emails-workspace-card .settings-metric-grid,
  .emails-workspace-card .settings-tab-row,
  .emails-workspace-card .settings-panel,
  .emails-workspace-card .table-wrap{
    min-width:0;
    max-width:100%;
  }
  .emails-workspace-card .settings-token-card,
  .emails-workspace-card .settings-note,
  .emails-workspace-card .muted-small{
    overflow-wrap:anywhere;
  }
  .emails-workspace-card .table-wrap table{
    width:100%;
    max-width:100%;
    table-layout:fixed;
    white-space:normal;
  }
  .emails-workspace-card .table-wrap th,
  .emails-workspace-card .table-wrap td{
    vertical-align:top;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .settings-list-empty{
    padding:24px;
    text-align:center;
    border-radius:var(--radius-large);
    border:1px dashed color-mix(in srgb,var(--border) 80%,transparent);
    color:var(--muted);
  }
  .settings-editor-list{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .settings-pane[hidden]{
    display:none !important;
  }
  .settings-editor-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:18px 20px;
    border-radius:14px;
    border:1.5px solid var(--border);
    background:var(--surface-soft-bg);
    box-shadow:none;
    transition:border-color .15s ease, transform .15s ease;
  }
  .settings-editor-card:hover{
    border-color:color-mix(in srgb,var(--accent) 28%,var(--border));
  }
  .settings-editor-card--accent{
    background:
      radial-gradient(110% 90% at 100% 0, color-mix(in srgb, var(--accent) 14%, transparent), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  [data-theme="light"] .settings-editor-card--accent{
    background:
      radial-gradient(110% 90% at 100% 0, rgba(0,119,255,.12), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.64), rgba(255,255,255,0) 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .settings-editor-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding-bottom:10px;
    border-bottom:1px solid color-mix(in srgb,var(--border) 60%, transparent);
  }
  .settings-editor-card__title{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .settings-editor-card__title strong{
    font-size:16px;
    line-height:1.3;
    letter-spacing:-.01em;
    font-weight:600;
  }
  .settings-editor-card__title span{
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
  }
  .settings-editor-card__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .settings-editor-card__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:12px;
    align-items:start;
  }
  .settings-editor-card__grid--wide{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  }
  .settings-editor-card__field--full{
    grid-column:1/-1;
  }
  .settings-editor-note{
    padding:12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 16%,var(--border));
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    color:var(--muted);
    line-height:1.6;
  }
  .settings-editor-empty{
    padding:18px;
    border-radius:var(--radius-large);
    border:1px dashed color-mix(in srgb,var(--border) 78%,transparent);
    color:var(--muted);
    text-align:center;
  }
  .settings-editor-toggle-stack{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .settings-editor-toggle{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .settings-editor-toggle__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .settings-editor-toggle__copy strong{
    font-size:14px;
    line-height:1.4;
  }
  .settings-editor-toggle__copy span{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .settings-upload-btn{
    position:relative;
    overflow:hidden;
    margin:0;
  }
  .settings-upload-btn input{
    display:none;
  }
  .settings-automation-fieldset{
    margin:0;
    padding:0;
    border:0;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .settings-automation-fieldset[disabled],
  .settings-automation-fieldset.is-disabled{
    opacity:.6;
  }
  .settings-choice-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:10px;
    align-items:start;
  }
  .settings-choice-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .settings-choice-item label:last-child{
    min-width:0;
    flex:1 1 auto;
  }
  .settings-choice-item__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .settings-choice-item__copy strong{
    font-size:14px;
    line-height:1.4;
  }
  .settings-choice-item__copy span{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .component-config-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .component-config-section{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .component-config-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .component-config-head h4{
    margin:0;
  }
  .modal-copy{
    margin:0;
  }
  .modal-action-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .modal-action-row--end{
    justify-content:flex-end;
  }
  .modal-actions-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:12px;
  }
  .modal-result{
    margin-top:8px;
  }
  .nb-portal-toggle{
    margin-top:6px;
    justify-content:flex-end;
  }
  .file-drop-zone__toolbar{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .hidden-file-input{
    display:none;
  }
  .component-doc-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .settings-template-card{
    position:relative;
    margin:0;
    padding:14px 16px;
    background:var(--surface);
    border:1.5px solid var(--border);
    border-radius:12px;
    box-shadow:none;
    transition:border-color .15s ease, transform .15s ease;
  }
  .settings-template-card:hover{
    border-color:var(--accent);
    transform:translateY(-1px);
  }
  .settings-template-card[open]{
    border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent);
    background:color-mix(in srgb,var(--accent) 6%, var(--surface));
  }
  .settings-template-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    list-style:none;
    cursor:pointer;
    padding:2px 0;
  }
  .settings-template-summary::-webkit-details-marker{
    display:none;
  }
  .settings-template-summary__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    flex:1 1 auto;
    text-align:left;
  }
  .settings-template-summary__title{
    font-size:14px;
    font-weight:600;
    line-height:1.3;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .settings-template-summary__meta{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .settings-template-summary__badges{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    flex:0 0 auto;
  }
  .settings-template-body{
    margin-top:14px;
    padding:14px;
    border-top:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .settings-template-body__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex-wrap:wrap;
  }
  .settings-template-body__actions .muted-small{
    margin-right:auto;
    text-align:left;
  }
  .settings-status-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .settings-status-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:12px 14px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .settings-status-row__index{
    width:34px;
    height:34px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:color-mix(in srgb,var(--accent) 16%,transparent);
    color:var(--accent);
    font-size:12px;
    font-weight:700;
  }
  .settings-status-row input{
    flex:1 1 220px;
    min-width:220px;
  }
  .settings-status-row__actions{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-left:auto;
  }
  /* Status-Ablauf im Auftrag: effektive Schritt-Kette + Zusatzmodul-Toggles */
  .status-flow{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .status-flow__list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
  }
  .status-flow__step{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 12px 6px 6px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--muted-2);
    font-size:12px;
  }
  .status-flow__marker{
    width:22px;
    height:22px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:color-mix(in srgb,var(--muted-2) 16%,transparent);
    color:var(--muted-2);
    font-size:11px;
    font-weight:700;
  }
  .status-flow__step.is-done{
    color:var(--text);
    border-color:color-mix(in srgb,var(--good) 45%,transparent);
  }
  .status-flow__step.is-done .status-flow__marker{
    background:color-mix(in srgb,var(--good) 20%,transparent);
    color:var(--good);
  }
  .status-flow__step.is-current{
    color:var(--text);
    border-color:color-mix(in srgb,var(--accent) 55%,transparent);
    background:color-mix(in srgb,var(--accent) 10%,var(--panel));
    font-weight:600;
  }
  .status-flow__step.is-current .status-flow__marker{
    background:color-mix(in srgb,var(--accent) 24%,transparent);
    color:var(--accent);
  }
  .status-flow__module-tag{
    padding:2px 8px;
    border-radius:999px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    background:color-mix(in srgb,var(--warn) 16%,transparent);
    color:var(--warn);
  }
  .status-flow__cancelled{
    font-size:12px;
    color:var(--bad);
  }
  .status-flow__modules{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:12px;
    border-top:1px dashed color-mix(in srgb,var(--border) 82%,transparent);
  }
  .status-flow__modules-label{
    font-size:var(--label-size, 11px);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
  }
  .status-flow__module-toggle{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:var(--radius-large, 14px);
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    cursor:pointer;
    width:fit-content;
    font-size:13px;
  }
  .status-flow__module-toggle input[type="checkbox"]{
    accent-color:var(--accent);
  }
  .status-flow__module-toggle input[type="checkbox"]:disabled{
    cursor:not-allowed;
  }
  .status-flow__module-name{
    font-weight:600;
  }
  .status-flow__module-count{
    font-size:11px;
    color:var(--muted-2);
  }
  /* Ablauf-Module: Modul-Verwaltung + Modul-Zuordnung je Status (dynamischer Status-Ablauf) */
  .settings-status-row__module{
    flex:0 1 240px;
    min-width:190px;
  }
  .settings-status-row--module{
    border-style:dashed;
    background:color-mix(in srgb,var(--panel) 55%,var(--panel-2));
  }
  .settings-status-row--module .settings-status-row__index{
    background:color-mix(in srgb,var(--warn, #d7a133) 18%,transparent);
    color:var(--warn, #d7a133);
  }
  .settings-status-modules{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:4px;
    border-bottom:1px dashed color-mix(in srgb,var(--border) 82%,transparent);
  }
  .settings-status-modules__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .settings-status-modules__title{
    font-size:var(--label-size, 11px);
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
    font-weight:700;
  }
  .settings-mapping-stack{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .settings-mapping-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:18px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .settings-mapping-card.is-disabled{
    opacity:.68;
  }
  .settings-mapping-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .settings-mapping-card__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .settings-mapping-card__copy strong{
    font-size:16px;
    line-height:1.35;
  }
  .settings-mapping-card__copy span{
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
  }
  .settings-mapping-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:12px;
    align-items:start;
  }
  .settings-connection-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
    align-items:start;
  }
  .settings-connection-grid--spaced{
    margin-top:12px;
  }
  .settings-field-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .settings-field-row > .field{
    flex:1 1 220px;
    min-width:0;
  }
  .settings-field-row > .field--narrow{
    flex-basis:180px;
  }
  .automation-task-sections{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .automation-task-section{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .automation-task-section h4{
    margin:0;
    font-size:14px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .automation-task-service{
    padding:0 18px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    border-radius:18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 56%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .automation-task-service > summary{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:16px 0;
    cursor:pointer;
    list-style:none;
  }
  .automation-task-service > summary::-webkit-details-marker{
    display:none;
  }
  .automation-task-service__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .automation-task-service__copy strong{
    font-size:15px;
    line-height:1.35;
  }
  .automation-task-service__copy span{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .automation-task-service__body{
    padding:0 0 18px;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .automation-task-row-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .automation-task-row{
    margin:0;
    padding:16px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    box-shadow:none;
  }
  .automation-task-row__header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .automation-task-row__title{
    flex:1 1 280px;
    min-width:220px;
  }
  .automation-task-row__controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .automation-task-row__grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:10px;
    align-items:start;
  }
  .automation-task-field{
    display:flex;
    flex-direction:column;
    gap:4px;
    color:var(--muted);
    font-size:12px;
  }
  .automation-task-field input,
  .automation-task-field select{
    color:var(--text);
  }
  .automation-task-field--narrow{
    max-width:140px;
  }
  .automation-task-field--full{
    grid-column:1/-1;
  }
  .settings-inline-code{
    font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size:12px;
    color:var(--muted);
    word-break:break-all;
  }
  @media (max-width:1080px){
    .order-form-shell--designer{height:auto;max-height:none;min-height:100%;overflow:visible}
    .order-form-shell--designer .order-form-designer-shell{height:auto;max-height:none;min-height:100%}
    .settings-layout{grid-template-columns:1fr}
    .settings-shell{height:auto;min-height:100%;overflow:visible}
    .settings-layout{min-height:auto;overflow:visible}
    .settings-sidebar{position:static;height:auto;max-height:none;min-height:auto;overflow:visible}
    .settings-nav-card{height:auto;max-height:none;overflow:visible;padding-right:18px}
    .settings-main{height:auto;min-height:auto;overflow:visible;padding-right:0;padding-bottom:0;scrollbar-gutter:auto}
  }
  @media (max-width:700px){
    .settings-nav-card,
    .settings-surface{padding:18px}
    .settings-section-head h2{font-size:24px}
    .settings-nav-btn{padding:11px 12px}
  }

  .dashboard-shell{
    width:100%;
    max-width:none;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:16px;
    height:auto;
    min-height:100%;
  }
  .dashboard-shell > section{
    flex-shrink:0;
  }
  .dashboard-hero{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(320px,380px);
    gap:16px;
    align-items:stretch;
  }
  .dashboard-panel{
    padding:18px;
    gap:14px;
  }
  .dashboard-panel--hero{
    min-height:260px;
    padding:24px;
    justify-content:space-between;
    gap:18px;
  }
  .dashboard-hero-copy{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .dashboard-hero-headline{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .dashboard-day-label{
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
    font-weight:600;
  }
  .dashboard-hero-title{
    margin:0;
    font:700 clamp(28px, 3.6vw, 44px)/1.06 "Noto Sans", sans-serif;
    letter-spacing:-.04em;
    max-width:12ch;
  }
  .dashboard-hero-text{
    margin:0;
    max-width:60ch;
    color:var(--muted);
    font-size:15px;
    line-height:1.6;
  }
  .dashboard-hero-footer{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .dashboard-side-stack{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
  }
  .dashboard-focus-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .dashboard-focus-stat{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:11px 12px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .dashboard-focus-stat__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .dashboard-focus-stat__value{
    font-size:22px;
    line-height:1.05;
  }
  .dashboard-panel--summary{
    gap:12px;
    padding-block:14px;
  }
  .dashboard-summary-head{
    align-items:center;
  }
  .dashboard-status-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }
  .dashboard-priority-list,
  .dashboard-rail-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .dashboard-priority-item,
  .dashboard-rail-item{
    width:100%;
    box-shadow:none;
  }
  .dashboard-priority-item:hover,
  .dashboard-priority-item:focus-visible,
  .dashboard-rail-item:hover,
  .dashboard-rail-item:focus-visible{
    transform:none;
    border-color:color-mix(in srgb,var(--accent) 34%,var(--border));
    box-shadow:none;
    background:var(--surface-hover-bg);
  }
  .dashboard-summary-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }
  .dashboard-status-chip{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    text-align:left;
    font:inherit;
    color:inherit;
    appearance:none;
  }
  .dashboard-status-chip--interactive{
    cursor:pointer;
    transition:transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }
  .dashboard-status-chip--interactive:hover{
    transform:translateY(-1px);
    border-color:color-mix(in srgb,var(--accent) 32%,var(--border));
    background:var(--surface-hover-bg);
    box-shadow:0 14px 28px -24px rgba(15,23,42,.45);
  }
  .dashboard-status-chip--interactive:focus-visible{
    outline:none;
    border-color:color-mix(in srgb,var(--accent) 40%,var(--border));
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
  }
  .dashboard-status-chip__copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }
  .dashboard-status-chip__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .dashboard-status-chip__value{
    font-size:18px;
    line-height:1.05;
  }
  .dashboard-priority-item{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:12px 14px;
    border-radius:var(--radius-large);
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    text-align:left;
  }
  .dashboard-priority-copy{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
  }
  .dashboard-priority-label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .dashboard-priority-copy strong{
    font-size:14px;
    line-height:1.4;
  }
  .dashboard-priority-meta{
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
  }
  .dashboard-priority-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    min-width:max-content;
  }
  .dashboard-priority-action{
    font-size:12px;
    color:var(--muted);
  }
  .dashboard-meta-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
    font-size:12px;
    line-height:1.2;
    white-space:nowrap;
  }
  .dashboard-meta-badge--ok{
    border-color:color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
  }
  .dashboard-meta-badge--warn{
    border-color:color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
  }
  .dashboard-meta-badge--danger{
    border-color:color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
  }
  .dashboard-meta-badge--info{
    border-color:color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
  }
  .dashboard-meta-badge--neutral{
    border-color:color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
  }
  .dashboard-activity-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:360px;
    overflow:auto;
    padding-right:4px;
  }
  .dashboard-activity-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:12px 14px;
    border-radius:var(--radius-large);
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .dashboard-activity-avatar{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
  }
  .dashboard-activity-avatar__placeholder{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    color:var(--accent);
    font-size:18px;
    line-height:1;
  }
  [data-theme="light"] .dashboard-activity-avatar__placeholder{
    background:rgba(0,119,255,.12);
  }
  .dashboard-activity-main{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .dashboard-activity-message{
    line-height:1.55;
  }
  .dashboard-activity-meta{
    font-size:12px;
    line-height:1.55;
    color:var(--muted);
  }
  .dashboard-activity-side{flex:0 0 auto}
  .dashboard-rail-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:11px 13px;
    border-radius:14px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    text-align:left;
  }
  .dashboard-rail-item__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .dashboard-rail-item__copy strong{
    font-size:14px;
    line-height:1.45;
  }
  .dashboard-rail-item__copy span{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .dashboard-rail-item__side{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:max-content;
  }
  .dashboard-empty-state{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:18px 16px;
    border-radius:var(--radius-large);
    border:1px dashed color-mix(in srgb,var(--border) 80%,transparent);
    background:var(--surface-soft-bg);
    color:var(--muted);
  }
  .dashboard-empty-state strong{
    font-size:14px;
    color:var(--text);
  }
  .dashboard-empty-state span{
    font-size:12px;
    line-height:1.55;
  }
  @media (max-width:1180px){
    .dashboard-hero,
    .app-page--overview .app-page__hero{grid-template-columns:1fr}
  }
  @media (max-width:700px){
    .dashboard-hero-title{max-width:none;font-size:30px}
    .dashboard-focus-grid{grid-template-columns:1fr}
    .dashboard-status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .dashboard-panel{padding:16px}
    .dashboard-priority-item,
    .dashboard-rail-item{flex-direction:column;align-items:flex-start}
    .dashboard-priority-side,
    .dashboard-rail-item__side{align-items:flex-start;min-width:0}
    .dashboard-summary-badges{width:100%}
    .dashboard-status-chip{align-items:flex-start;flex-direction:column}
  }

  /* Cards, tables */
  .grid{display:grid; gap:12px}
  .cols-2{grid-template-columns:repeat(auto-fit, minmax(260px,1fr))}
  .cols-3{grid-template-columns:repeat(3, 1fr)}
  .analytics-panel{
    flex:1 1 auto;
    min-height:0;
    padding:20px;
    gap:14px;
    border-radius:20px;
  }
  .analytics-workspace .workspace-main{
    align-items:stretch;
  }
  .analytics-workspace .workspace-main > .analytics-panel{
    flex:0 0 auto;
    min-height:100%;
    overflow:visible;
  }
  .workspace-nav-list{
    display:flex;
    flex-direction:column;
    gap:7px;
  }
  .workspace-nav-button{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    box-shadow:none;
    text-align:left;
    color:inherit;
  }
  .workspace-nav-button:hover,
  .workspace-nav-button:focus-visible{
    transform:none;
    box-shadow:none;
    border-color:color-mix(in srgb,var(--accent) 32%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 8%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .workspace-nav-button.is-active{
    border-color:color-mix(in srgb,var(--accent) 44%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 74%,var(--panel-2));
  }
  .workspace-nav-button__main{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .workspace-nav-button__icon{
    width:30px;
    height:30px;
    padding:0;
    border-radius:10px;
    box-sizing:border-box;
    border:1px solid color-mix(in srgb,var(--text) 18%,var(--border));
    background:color-mix(in srgb,var(--panel-2) 84%,var(--panel));
    color:color-mix(in srgb,var(--text) 88%,var(--muted));
  }
  .workspace-nav-button__icon .icon{
    width:16px;
    height:16px;
    opacity:.95;
  }
  .workspace-nav-button:hover .workspace-nav-button__icon,
  .workspace-nav-button:focus-visible .workspace-nav-button__icon,
  .workspace-nav-button.is-active .workspace-nav-button__icon{
    border-color:color-mix(in srgb,var(--text) 28%,var(--surface-active-border));
    background:color-mix(in srgb,var(--surface-active-bg) 78%,var(--panel));
    color:var(--text);
  }
  .workspace-nav-button__copy{
    display:flex;
    flex-direction:column;
    gap:0;
    min-width:0;
  }
  .workspace-nav-button__copy strong{
    font-size:13px;
    line-height:1.3;
  }
  .workspace-nav-button__copy > span:last-child{
    font-size:11px;
    line-height:1.4;
    color:var(--muted);
  }
  .workspace-nav-button__side{
    min-width:max-content;
    align-self:center;
  }
  .analytics-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }
  .analytics-panel-copy h2{
    margin:4px 0 0;
    font-size:28px;
    line-height:1.08;
    letter-spacing:-.03em;
  }
  .analytics-panel-copy p{
    margin:8px 0 0;
    max-width:64ch;
    color:var(--muted);
    line-height:1.62;
  }
  .analytics-panel-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .analytics-segmented{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:4px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .analytics-segmented-button{
    border:0;
    background:transparent;
    color:var(--muted);
    padding:8px 14px;
    border-radius:999px;
    font:600 13px/1.2 "Noto Sans", sans-serif;
    box-shadow:none;
  }
  .analytics-segmented-button:hover,
  .analytics-segmented-button:focus-visible{
    transform:none;
    box-shadow:none;
    color:var(--text);
    background:color-mix(in srgb,var(--panel) 48%,var(--panel-2));
  }
  .analytics-segmented-button.is-active{
    color:var(--text);
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 14%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 82%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  }
  .analytics-chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
  }
  .analytics-chart-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    padding:20px;
    border-radius:20px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .analytics-chart-card--projects{
    grid-column:span 2;
    border-color:color-mix(in srgb,var(--accent) 24%,var(--surface-soft-border));
    background:
      linear-gradient(135deg, color-mix(in srgb,var(--accent) 10%,transparent), transparent 46%),
      var(--surface-soft-bg);
  }
  .analytics-chart-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .analytics-chart-card__copy{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .analytics-chart-card__copy h3{
    margin:0;
    font-size:20px;
    line-height:1.14;
    letter-spacing:-.02em;
  }
  .analytics-chart-card__text{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.56;
  }
  .analytics-metrics{
    display:grid;
    gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  }
  .analytics-metrics--compact{
    gap:10px;
    grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  }
  .analytics-metric{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 15px;
    border-radius:var(--radius-large);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
  }
  .analytics-metric-label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .analytics-metric-value{
    font-size:22px;
    font-weight:700;
    line-height:1.08;
  }
  .analytics-metric-text{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .analytics-content-frame{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-width:0;
    min-height:0;
  }
  .analytics-chart-shell{
    position:relative;
    min-height:280px;
    padding:16px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 68%,var(--panel-2));
  }
  .analytics-chart-shell--projects{
    min-height:320px;
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 8%,transparent), transparent 62%),
      color-mix(in srgb,var(--panel) 70%,var(--panel-2));
  }
  .analytics-chart-shell--tall{
    min-height:340px;
  }
  .analytics-chart-shell canvas{
    width:100%!important;
    height:100%!important;
    display:block;
  }
  .analytics-table-wrap{
    overflow:auto;
    border-radius:var(--radius-large);
    border:var(--border-strong);
    padding:6px 10px 10px;
    background:var(--surface);
  }
  .analytics-table-wrap--compact{
    max-width:720px;
  }
  .analytics-table-wrap table{
    width:max-content;
    min-width:100%;
    white-space:nowrap;
  }
  .analytics-table-wrap tbody tr:hover{
    outline:none;
    cursor:default;
  }
  .projects-shell{
    width:100%;
    max-width:none;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    flex:1 1 auto;
    min-height:0;
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    overflow:hidden;
  }
  .projects-segmented{
    align-self:flex-start;
  }
  .projects-segmented .analytics-segmented-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .projects-files-segmented{
    display:flex;
    width:100%;
    flex:1 1 auto;
    min-width:0;
    flex-wrap:nowrap;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }
  .projects-files-segmented .analytics-segmented-button{
    flex:0 0 auto;
    white-space:nowrap;
  }
  .projects-segmented-count,
  .workspace-segmented-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
    font-size:11px;
    line-height:1;
  }
  .projects-detail-shell{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .workspace-shell.projects-detail-shell{
    height:100%;
    max-height:100%;
    min-height:0;
    overflow:hidden;
  }
  .projects-detail-shell .workspace-layout{
    grid-template-columns:minmax(228px,268px) minmax(0,1fr);
    gap:14px;
    height:100%;
    min-height:0;
    overflow:hidden;
  }
  .projects-detail-shell .workspace-sidebar{
    height:100%;
    max-height:none;
    min-height:0;
    overflow:hidden;
  }
  .projects-detail-shell .workspace-sidebar-intro{
    padding:14px;
    gap:8px;
  }
  .projects-detail-shell .workspace-sidebar-intro__copy{
    gap:3px;
  }
  .projects-detail-shell .workspace-panel{
    padding:14px;
    gap:10px;
  }
  .projects-detail-shell .workspace-nav-card{
    flex:1 1 auto;
    min-height:0;
    max-height:100%;
    overflow:auto;
    overscroll-behavior:contain;
    padding-right:10px;
  }
  .projects-detail-shell .workspace-nav-list{
    gap:6px;
  }
  .projects-detail-shell .workspace-main{
    height:100%;
    min-height:0;
    overflow:hidden;
    overscroll-behavior:contain;
    padding-right:0;
    gap:10px;
    scrollbar-gutter:auto;
  }
  .projects-detail-shell .workspace-main > .workspace-panel,
  .projects-detail-shell .workspace-main > .projects-detail-content,
  .projects-detail-shell .projects-detail-content > .workspace-panel{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
  }
  .projects-detail-shell .workspace-main > .projects-detail-content{
    flex:1 1 auto;
  }
  .projects-detail-shell .projects-detail-content > .workspace-panel,
  .projects-detail-shell .projects-detail-content > .projects-content-panel--full{
    flex:1 1 auto;
  }
  .projects-detail-context-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .projects-detail-context-item{
    margin-top:0;
    padding:9px 10px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .projects-detail-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
  }
  .projects-detail-stat-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .projects-detail-stat{
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:10px 11px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .projects-detail-stat__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .projects-detail-stat__value{
    font-size:18px;
    line-height:1.2;
  }
  .projects-detail-stat__meta{
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
  }
  .projects-detail-content{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    gap:10px;
    width:100%;
    min-width:0;
    min-height:0;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:auto;
  }
  .projects-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .projects-detail-split{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:8px;
    min-width:0;
    min-height:0;
  }
  .projects-detail-split > .projects-content-panel--full{
    grid-column:auto;
  }
  .projects-material-components{
    min-width:0;
  }
  .projects-content-panel{
    min-width:0;
    padding:14px;
    gap:8px;
  }
  .projects-content-panel--full{
    grid-column:1/-1;
    min-height:0;
  }
  .projects-detail-content > .projects-content-panel--full{
    height:auto;
    min-height:100%;
  }
  .projects-content-panel--full > .projects-content-scroll,
  .projects-content-panel--full > .scroll-list,
  .projects-content-panel--full > .file-drop-zone,
  .projects-content-panel--full > .projects-files-dropzone{
    flex:1 1 auto;
    min-height:0;
  }
  .projects-detail-shell .workspace-panel__head{
    gap:4px;
    flex:0 0 auto;
  }
  .projects-detail-shell .workspace-panel__copy h2{
    margin:0;
    font-size:22px;
    line-height:1.1;
    letter-spacing:-.02em;
  }
  .projects-detail-shell .workspace-panel__copy p{
    margin:4px 0 0;
    font-size:12px;
    line-height:1.4;
  }
  .projects-content-panel .workspace-panel__copy h2{
    font-size:19px;
    line-height:1.18;
  }
  .projects-content-panel .workspace-panel__copy p{
    display:none;
  }
  .projects-detail-shell .workspace-panel__actions,
  .projects-detail-shell .projects-detail-actions{
    min-width:0;
    max-width:100%;
  }
  .projects-detail-shell .workspace-panel__actions > *,
  .projects-detail-shell .projects-detail-actions > *{
    min-width:0;
    max-width:100%;
  }
  .projects-detail-shell .workspace-panel__actions .row{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .projects-detail-inline-actions{
    gap:8px;
    align-items:center;
  }
  .projects-inline-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .projects-inline-detail-column{
    min-width:0;
  }
  .projects-content-scroll{
    min-height:0;
    /* 2px Luft, damit Karten mit hover-translateY(-1/-2px) am oberen Rand nicht vom Scroll-Container beschnitten werden */
    padding-top:2px;
  }
  .projects-files-toolbar{
    width:100%;
    max-width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    justify-content:stretch;
    gap:10px;
    min-width:0;
  }
  .projects-files-toolbar > *{
    min-width:0;
    max-width:100%;
  }
  .projects-files-toolbar > .btn,
  .projects-files-toolbar > .projects-inline-note{
    justify-self:end;
  }
  .projects-files-dropzone{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:12px 14px 16px;
    border-radius:18px;
    background:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    overflow-x:auto;
  }
  .projects-files-dropzone--expanded{
    min-height:clamp(300px,46vh,760px);
  }
  .projects-files-dropzone > div{
    min-width:0;
  }
  .projects-files-dropzone h4{
    margin:0 0 14px;
  }
  .projects-inline-note{
    min-height:36px;
    display:flex;
    align-items:center;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
  }
  .projects-components-wrap{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .card{background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium); box-shadow:var(--shadow); padding:18px}
  .card.events-hero-card{
    background:var(--surface-card-bg);
  }
  @media (max-width:1180px){
    .projects-shell{
      height:auto;
      max-height:none;
      min-height:100%;
      overflow:visible;
    }
    .projects-detail-actions{justify-content:flex-start}
  }
  @media (max-width:760px){
    .analytics-panel{padding:16px}
    .analytics-panel-head{flex-direction:column}
    .analytics-segmented{width:100%}
    .analytics-segmented-button{flex:1 1 140px;text-align:center}
    .analytics-chart-card--projects{grid-column:auto}
    .analytics-chart-shell{min-height:250px}
    .analytics-chart-shell--tall{min-height:300px}
    .analytics-chart-shell--projects{min-height:300px}
    .projects-detail-shell .workspace-layout{
      grid-template-columns:1fr;
      grid-template-rows:auto auto;
      height:auto;
      max-height:none;
      min-height:auto;
      overflow:visible;
    }
    .projects-detail-shell .workspace-sidebar{
      height:auto;
      min-height:0;
      max-height:none;
      overflow:visible;
    }
    .projects-detail-shell .workspace-nav-card{
      min-height:0;
      max-height:100%;
      overflow:auto;
      padding-right:10px;
    }
    /* Auftrags-Detail-Reiter: auf Mobile als horizontale, scrollbare Tab-Leiste
       statt 2x3-Grid (kostete >170px vertikal, sah aus wie Aktions-Buttons). */
    .projects-detail-shell .workspace-nav-list{
      display:flex;
      flex-direction:row;
      flex-wrap:nowrap;
      overflow-x:auto;
      overscroll-behavior-x:contain;
      gap:8px;
      padding:0 2px 4px;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:thin;
    }
    .projects-detail-shell .workspace-nav-list > .workspace-nav-button{
      flex:0 0 auto;
      min-width:max-content;
      scroll-snap-align:start;
      padding:8px 14px;
    }
    .projects-detail-shell .workspace-main{
      height:auto;
      max-height:none;
      min-height:auto;
      overflow:visible;
      padding-right:0;
      scrollbar-gutter:auto;
    }
    .workspace-shell.projects-detail-shell,
    .projects-detail-content{
      height:auto;
      max-height:none;
      min-height:auto;
      overflow:visible;
    }
    .projects-detail-shell .workspace-sidebar-intro,
    .projects-detail-shell .workspace-nav-card,
    .projects-detail-shell .workspace-panel,
    .projects-content-panel{padding:13px}
    .projects-detail-shell .workspace-panel__copy h2{font-size:21px;line-height:1.12}
    .projects-content-panel .workspace-panel__copy h2{font-size:18px}
    .projects-detail-shell .workspace-sidebar-intro__copy h1{font-size:22px;line-height:1.1}
    .projects-detail-stat-grid,
    .projects-detail-grid,
    .projects-detail-split,
    .projects-inline-detail-grid{grid-template-columns:1fr}
    .projects-segmented{width:100%}
    .projects-files-toolbar{
      grid-template-columns:minmax(0,1fr);
      justify-content:flex-start;
    }
    .projects-files-toolbar > .btn,
    .projects-files-toolbar > .projects-inline-note{justify-self:start}
    .file-item--list{flex-wrap:wrap; align-items:flex-start}
    .file-item-side{width:100%; align-items:stretch}
    .file-item-actions-row{justify-content:flex-end; flex-wrap:wrap}
  }

  /* Events */
  .events-shell{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .events-hero-card{
    padding:22px;
    background:var(--surface-card-bg);
  }
  .events-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,380px);
    gap:14px;
    align-items:stretch;
  }
  .events-hero-main{
    display:flex;
    flex-direction:column;
    gap:18px;
    min-width:0;
  }
  .events-hero-copy{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .events-hero-copy h1{
    margin:0;
    font:700 clamp(24px, 3vw, 30px)/1.05 "Noto Sans", sans-serif;
    letter-spacing:-.04em;
  }
  .events-hero-copy p{
    margin:0;
    max-width:60ch;
    color:var(--muted);
    line-height:1.62;
  }
  .events-hero-copy p{
    display:none;
  }
  .events-toolbar{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
  }
  .events-search{
    display:flex;
    width:100%;
    min-width:0;
  }
  .events-search input{
    width:100%;
    min-width:0;
    min-height:48px;
    border-radius:var(--radius-large);
  }
  .events-segmented{
    width:100%;
    max-width:100%;
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
  }
  .events-focus-card{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:20px;
    border-radius:22px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:var(--surface-card-bg);
  }
  .events-focus-card__head{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .events-focus-card__head h3{
    margin:0;
    font-size:20px;
    line-height:1.14;
    letter-spacing:-.02em;
  }
  .events-hero-stats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .events-hero-stat{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px 13px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .events-hero-stat__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .events-hero-stat__value{
    font-size:22px;
    line-height:1.08;
  }
  .events-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:14px;
    align-items:start;
  }
  .events-panel{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
    padding:20px;
    border-radius:20px;
    background:var(--surface-soft-bg);
  }
  .events-panel__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .events-panel__copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }
  .events-panel__copy h3{
    margin:0;
    font-size:22px;
    line-height:1.16;
    letter-spacing:-.02em;
  }
  .events-panel__copy p{
    margin:0;
    max-width:62ch;
    color:var(--muted);
    line-height:1.58;
  }
  .events-panel__side{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .events-panel__body{
    min-width:0;
    min-height:0;
  }
  .events-panel__body.scroll-list{
    overflow:auto;
  }
  .events-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:14px;
  }
  .event-list-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
    padding:16px;
    border-radius:20px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    box-shadow:none;
  }
  .event-list-card--danger{border-color:color-mix(in srgb,var(--bad) 22%,var(--border))}
  .event-list-card--warn{border-color:color-mix(in srgb,var(--warn) 24%,var(--border))}
  .event-list-card--ok{border-color:color-mix(in srgb,var(--good) 20%,var(--border))}
  .event-list-card__compact{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .event-list-card__copy{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
    flex:1 1 auto;
  }
  .event-list-card__copy h3{
    margin:0;
    font-size:17px;
    line-height:1.28;
    overflow-wrap:anywhere;
  }
  .event-list-card__summary{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
  .event-list-card__compact-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    flex:0 0 auto;
  }
  .event-list-card__side{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .event-list-card__toggle{
    min-width:108px;
    justify-content:center;
    white-space:nowrap;
  }
  .event-list-card__body{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-top:2px;
    border-top:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  }
  .event-list-card__meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .event-list-card__meta-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex:1 1 180px;
    min-width:0;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .event-list-card__meta-item strong{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .event-list-card__meta-item span,
  .event-list-card__meta-item a{
    color:var(--text);
    text-decoration:none;
    font-size:14px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
  .event-list-card__meta-item a:hover{
    color:var(--accent);
  }
  .event-list-card__stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .event-list-card__stat{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .event-list-card__stat span{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .event-list-card__stat strong{
    font-size:16px;
    line-height:1.28;
  }
  .event-list-card__reschedule{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px 12px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb, var(--warn) 34%, transparent);
    background:color-mix(in srgb, var(--warn) 12%, transparent);
  }
  .event-list-card__reschedule span{
    font-size:12px;
    line-height:1.55;
    overflow-wrap:anywhere;
  }
  .event-list-card__chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  @media (max-width:1180px){
    .events-hero-grid,
    .events-layout{grid-template-columns:1fr}
  }
  @media (max-width:760px){
    .events-hero-card,
    .events-focus-card,
    .events-panel{padding:16px}
    .events-hero-stats,
    .events-list,
    .event-list-card__stats{grid-template-columns:1fr}
    .events-segmented{width:100%}
    .event-list-card__compact{flex-direction:column; align-items:flex-start}
    .event-list-card__compact-side,
    .event-list-card__side{align-items:flex-start; justify-content:flex-start}
  }

  table{width:100%; border-collapse:separate; border-spacing:0 8px}
  .address-suggestions{position:fixed; background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); display:flex; flex-direction:column; min-width:220px; max-width:360px; max-height:320px; overflow:auto; z-index:10600}
  .address-suggestions[hidden]{display:none}
  .address-suggestion{padding:10px 12px; display:flex; flex-direction:column; gap:4px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.04)}
  .address-suggestion:last-child{border-bottom:none}
  .address-suggestion:hover,.address-suggestion.active{background:color-mix(in srgb, var(--accent) 12%, transparent)}
  .address-suggestion-primary{font-weight:600; color:var(--text)}
  .address-suggestion-secondary{font-size:12px; color:var(--muted)}
  .address-suggestion-meta{font-size:11px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em}
  thead th{
    color:var(--muted);
    font-weight:600;
    text-align:left;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    cursor:pointer;
    position:relative;
    padding:0 12px 0 18px;
  }
  thead th::before{
    content:'⇅';
    position:absolute;
    left:4px;
    top:50%;
    transform:translateY(-50%);
    font-size:11px;
    opacity:.45;
    transition:opacity .2s ease, transform .2s ease;
  }
  thead th.sort-asc::before{
    content:'▲';
    opacity:.85;
    transform:translateY(-50%) scale(1.1);
  }
  thead th.sort-desc::before{
    content:'▼';
    opacity:.85;
    transform:translateY(-50%) scale(1.1);
  }
  thead th:hover::before,
  thead th:focus-visible::before{opacity:.7}
  thead th[data-sortable="false"],
  thead th.no-sort{cursor:inherit; padding:0 12px}
  thead th[data-sortable="false"]::before,
  thead th.no-sort::before{content:none}
  tbody tr{background:var(--panel); border:1px solid var(--border); border-radius:12px}
  tbody tr td{padding:10px 12px}
  tbody tr:hover,.hover-outline:hover{outline:2px solid color-mix(in srgb,var(--accent) 12%, transparent); cursor:pointer}
  tbody tr.lead-row-highlight:hover{outline:2px solid color-mix(in srgb, var(--good) 35%, transparent);}

  /* Horizontal scrolling tables (Mailbox-konformer Wrap, F10) */
  .table-wrap{overflow:auto; border-radius:var(--radius-large); border:var(--border-strong); background:var(--surface)}
  .table-wrap table{width:max-content; min-width:100%; white-space:nowrap}

  /* Project components tab */
  .components-tab{display:flex; flex-direction:column; gap:24px}
  .components-panel{
    position:relative;
    border-radius:calc(var(--radius) + 4px);
    padding:22px;
    background:
      radial-gradient(140% 120% at 100% 0, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
      linear-gradient(160deg, rgba(255,255,255,.05), transparent 55%),
      var(--panel-2);
    border:1px solid rgba(255,255,255,.04);
    box-shadow:0 18px 50px rgba(5,10,20,.35);
    overflow:hidden;
  }
  [data-theme="light"] .components-panel{
    border:1px solid rgba(13,36,56,.08);
    box-shadow:0 18px 46px rgba(15,36,56,.12);
    background:
      radial-gradient(140% 120% at 100% 0, rgba(0,119,255,.12), transparent),
      linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.1) 60%),
      var(--panel-2);
  }
  .components-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.08), transparent 65%);
    opacity:.7;
    pointer-events:none;
  }
  .components-panel>*{position:relative}
  .components-panel__header{display:flex; gap:18px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
  .components-panel__header h3{margin:0}
  .components-panel__header p{margin:4px 0 0; max-width:520px}
  .components-panel__meta{flex:1; min-width:220px}
  .components-panel__icon{
    width:48px;
    height:48px;
    border-radius:var(--radius-large);
    background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 85%, transparent), rgba(255,215,0,.6));
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:0 8px 18px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .components-panel__icon .icon{width:24px; height:24px; opacity:.95}
  [data-theme="light"] .components-panel__icon{
    background:linear-gradient(135deg, rgba(0,119,255,.85), rgba(102,170,255,.6));
    box-shadow:0 10px 24px rgba(0,119,255,.25);
    color:#0d2438;
  }
  .components-panel__actions{display:flex; align-items:center; gap:10px}
  .components-panel__body{margin-top:18px}
  .components-panel__footer{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}
  .components-form-grid{align-items:flex-end}
  .components-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:46px;
    padding:10px 16px;
    border-radius:999px;
    background:color-mix(in srgb, var(--accent) 18%, transparent);
    color:var(--accent);
    font-weight:700;
    font-size:16px;
    box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 25%, transparent);
  }
  [data-theme="light"] .components-badge{background:color-mix(in srgb, var(--accent) 12%, transparent); color:#0056c9; box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 15%, transparent)}
  .components-empty{
    padding:32px;
    border:1px dashed rgba(255,255,255,.12);
    border-radius:var(--radius);
    text-align:center;
    background:rgba(255,255,255,.02);
  }
  [data-theme="light"] .components-empty{border-color:color-mix(in srgb, var(--text) 12%, transparent); background:color-mix(in srgb, var(--text) 4%, transparent)}
  .components-panel__hint{line-height:1.6}
  .components-manage-btn{padding:8px 14px; font-size:13px}
  .components-panel--list .components-panel__header{align-items:center}
  .components-panel--list .components-panel__header p{max-width:none}
  .project-components-summary{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .project-components-stat{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:14px 16px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 76%,var(--panel-2));
  }
  .project-components-stat span{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .project-components-stat strong{
    font-size:28px;
    line-height:1;
  }
  .project-components-stat small{
    color:var(--muted);
    line-height:1.45;
  }
  .project-components-categories{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
  }
  .project-components-category-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--muted);
    font-size:12px;
  }
  .project-components-category-chip strong{
    color:var(--text);
    font-size:12px;
  }
  .project-components-assign{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .project-components-assign__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .project-components-stack{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .project-components-group{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:16px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .project-components-group--missing{
    border-style:dashed;
  }
  .project-components-group__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .project-components-group__copy{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .project-components-group__copy h4{
    margin:0;
    font-size:18px;
    line-height:1.2;
  }
  .project-components-group__count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    min-height:38px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    font-weight:700;
  }
  .project-components-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
  }
  .technical-drawing-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px;
    align-items:end;
  }
  .technical-drawing-workbench{
    display:grid;
    grid-template-columns:minmax(260px,340px) minmax(0,1fr);
    gap:16px;
    align-items:start;
  }
  .technical-drawing-sidebar{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
  }
  .technical-drawing-config,
  .technical-drawing-compliance,
  .technical-drawing-module-section,
  .technical-drawing-layout{
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--panel) 78%,var(--panel-2));
    min-width:0;
    animation:technicalDrawingPanelIn .18s ease-out;
  }
  .technical-drawing-config{padding:14px}
  .technical-drawing-compliance{
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .technical-drawing-compliance.is-ok{
    border-color:color-mix(in srgb,var(--good) 34%,var(--border));
    background:color-mix(in srgb,var(--good) 8%,var(--panel));
  }
  .technical-drawing-compliance.is-warning{
    border-color:color-mix(in srgb,var(--warn) 34%,var(--border));
    background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  }
  .technical-drawing-compliance__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .technical-drawing-compliance__head strong{font-size:14px}
  .technical-drawing-compliance__head span,
  .technical-drawing-compliance p,
  .technical-drawing-compliance li{
    color:var(--muted);
    font-size:12px;
  }
  .technical-drawing-compliance ul{
    margin:0;
    padding-left:18px;
  }
  .technical-drawing-compliance p{margin:0}
  .technical-drawing-compliance__notes{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .technical-drawing-compliance__notes span{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:4px 8px;
    border-radius:999px;
    background:color-mix(in srgb,var(--panel) 80%,var(--panel-2));
    color:var(--muted);
    font-size:11px;
    line-height:1.2;
  }
  .technical-drawing-module-section{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px;
  }
  .technical-drawing-section-title,
  .technical-drawing-layout-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
  }
  .technical-drawing-section-title strong,
  .technical-drawing-layout-head strong{
    display:block;
    color:var(--text);
    font-size:14px;
  }
  .technical-drawing-section-title span,
  .technical-drawing-layout-head span{
    color:var(--muted);
    font-size:12px;
  }
  .technical-drawing-layout{
    overflow:hidden;
    padding:14px;
  }
  .technical-drawing-layout-head{margin-bottom:12px}
  .technical-drawing-modules{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .technical-drawing-module{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:11px;
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--panel) 84%,var(--panel-2));
    transition:transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .technical-drawing-module:hover{
    transform:translateY(-1px);
  }
  .technical-drawing-module:has(input[type="checkbox"]:checked){
    border-color:color-mix(in srgb,var(--accent) 38%,var(--border));
    background:color-mix(in srgb,var(--accent) 8%,var(--panel));
  }
  .technical-drawing-module-toggle{
    display:grid;
    grid-template-columns:auto 34px minmax(0,1fr);
    gap:10px;
    align-items:center;
    margin:0;
  }
  .technical-drawing-module-toggle input{margin:0}
  .technical-drawing-module-glyph{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:8px;
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
    background:color-mix(in srgb,var(--panel) 70%,var(--accent));
    color:var(--text);
    font-size:11px;
    font-weight:800;
  }
  .technical-drawing-module-copy{min-width:0}
  .technical-drawing-module strong{display:block;font-size:13px}
  .technical-drawing-module small{display:block;color:var(--muted);margin-top:3px}
  .technical-drawing-role-fields{
    display:grid;
    grid-template-columns:76px minmax(0,1fr);
    gap:8px;
  }
  .technical-drawing-role-fields label{margin:0}
  .technical-drawing-role-fields input{width:100%;min-width:0}
  .technical-drawing-preview-shell{
    overflow:auto;
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:8px;
    background:color-mix(in srgb,var(--panel) 82%,var(--panel-2));
    padding:12px;
    margin:12px 0;
  }
  .technical-drawing-preview-shell--interactive{
    margin:0;
    padding:10px;
    max-height:clamp(420px,64vh,720px);
  }
  .technical-drawing-preview{
    display:block;
    width:100%;
    min-width:720px;
    height:auto;
    border-radius:6px;
    box-shadow:0 12px 28px rgba(15,23,42,.12);
  }
  .technical-drawing-preview--interactive{
    min-width:760px;
    touch-action:none;
    user-select:none;
  }
  .technical-drawing-connection{pointer-events:none}
  .technical-drawing-connection.is-disabled{opacity:.24}
  .technical-drawing-element{
    outline:none;
    transition:opacity .16s ease, filter .16s ease, transform .16s ease;
  }
  .technical-drawing-element.is-draggable{cursor:grab}
  .technical-drawing-element.is-dragging{
    cursor:grabbing;
    filter:drop-shadow(0 10px 14px rgba(15,23,42,.24));
  }
  .technical-drawing-element:focus-visible{
    filter:drop-shadow(0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)) drop-shadow(0 8px 12px rgba(15,23,42,.18));
  }
  .technical-drawing-element.is-disabled{
    opacity:.28;
  }
  @keyframes technicalDrawingPanelIn{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:translateY(0)}
  }
  @media (prefers-reduced-motion: reduce){
    .technical-drawing-config,
    .technical-drawing-compliance,
    .technical-drawing-module-section,
    .technical-drawing-layout,
    .technical-drawing-module,
    .technical-drawing-element{
      animation:none;
      transition:none;
    }
  }
  .technical-drawing-template-editor{display:flex;flex-direction:column;gap:16px}
  .technical-drawing-template-editor .settings-section-actions{
    margin-top:0;
  }
  .technical-drawing-slot-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:10px;
  }
  .technical-drawing-slot-row{
    display:grid;
    grid-template-columns:minmax(140px,1fr) 72px 72px minmax(120px,1fr);
    gap:8px;
    align-items:end;
    padding:10px;
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:8px;
  }
  .technical-drawing-slot-row span{font-weight:700;font-size:13px}
  .technical-drawing-slot-row label{margin:0}
  .technical-drawing-slot-row input{width:100%}
  .technical-drawing-file-list{display:flex;flex-direction:column;gap:10px}
  .technical-drawing-file-row{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    padding:12px;
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    border-radius:8px;
  }
  .technical-drawing-file-row small{display:block;color:var(--muted);margin-top:4px}
  @media (max-width: 980px){
    .technical-drawing-workbench{
      grid-template-columns:1fr;
    }
    .technical-drawing-preview-shell--interactive{
      max-height:520px;
    }
  }
  @media (max-width: 640px){
    .technical-drawing-role-fields{
      grid-template-columns:1fr;
    }
    .technical-drawing-module-toggle{
      grid-template-columns:auto minmax(0,1fr);
    }
    .technical-drawing-module-glyph{
      display:none;
    }
  }
  .project-component-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    padding:18px;
    border-radius:20px;
    border:1px solid color-mix(in srgb,var(--accent) 12%,var(--border));
    background:
      radial-gradient(120% 100% at 0 0, color-mix(in srgb,var(--accent) 8%,transparent), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .project-component-card--missing{
    border-style:dashed;
  }
  .project-component-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .project-component-card__copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }
  .project-component-card__copy h4{
    margin:0;
    font-size:20px;
    line-height:1.16;
    letter-spacing:-.02em;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .project-component-card__copy p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
  }
  .project-component-card__specs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .project-component-spec{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel) 76%,var(--panel-2));
    font-size:12px;
    line-height:1.45;
  }
  .project-component-spec--muted{
    color:var(--muted);
  }
  .project-component-card__footer{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .project-component-card__docs,
  .project-component-card__actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .project-component-doc{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }
  .project-component-doc--muted{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px dashed color-mix(in srgb,var(--border) 82%,transparent);
    color:var(--muted);
    font-size:12px;
  }
  @media (max-width:900px){
    .project-components-summary{
      grid-template-columns:1fr;
    }
  }
  @media (max-width:720px){
    .project-components-assign__footer,
    .project-component-card__footer{
      flex-direction:column;
      align-items:stretch;
    }
    .project-component-card__docs,
    .project-component-card__actions{
      width:100%;
    }
  }

  /* Responsive Buchhaltungstabelle: blendet bei kleineren Bildschirmen weniger relevante Spalten aus */
  .table-wrap table.accounting-table{width:100%; white-space:nowrap; table-layout:fixed}
  .accounting-table th,
  .accounting-table td{overflow:hidden; text-overflow:ellipsis}
  @media (max-width:1800px){
    .accounting-table th:nth-child(n+18),
    .accounting-table td:nth-child(n+18){display:none}
  }
  @media (max-width:1600px){
    .accounting-table th:nth-child(n+16),
    .accounting-table td:nth-child(n+16){display:none}
  }
  @media (max-width:1400px){
    .accounting-table th:nth-child(n+14),
    .accounting-table td:nth-child(n+14){display:none}
  }
  @media (max-width:1200px){
    .accounting-table th:nth-child(n+12),
    .accounting-table td:nth-child(n+12){display:none}
  }
  @media (max-width:1000px){
    .accounting-table th:nth-child(n+9),
    .accounting-table td:nth-child(n+9){display:none}
  }
  @media (max-width:800px){
    .accounting-table th:nth-child(n+7),
    .accounting-table td:nth-child(n+7){display:none}
  }
  @media (max-width:600px){
    .accounting-table th:nth-child(n+6),
    .accounting-table td:nth-child(n+6){display:none}
  }

  /* Forms */
  .field{display:flex; flex-direction:column; gap:6px; min-width:0}
  .inventory-sku-input-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    min-width:0;
  }
  .inventory-sku-input-row > input{
    min-width:0;
  }
  .inventory-barcode-modal{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .inventory-barcode-view{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    min-height:220px;
    overflow:hidden;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
    background:color-mix(in srgb,var(--panel-2) 86%,var(--panel));
  }
  .inventory-barcode-view video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .inventory-barcode-frame{
    position:absolute;
    inset:22%;
    border:2px solid color-mix(in srgb,var(--accent) 76%,white 12%);
    border-radius:14px;
    box-shadow:0 0 0 999px rgba(0,0,0,.28);
    pointer-events:none;
  }
  .inventory-category-modal{
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .inventory-category-modal__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  .inventory-category-modal__title{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .inventory-category-modal__title h3{
    margin:0;
    font-size:24px;
    line-height:1.14;
  }
  .inventory-category-modal__title p{
    margin:0;
    max-width:62ch;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
  }
  .inventory-category-modal__layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(300px,.86fr);
    gap:14px;
    align-items:start;
  }
  .inventory-category-form-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(220px,280px);
    gap:12px;
    align-items:start;
  }
  .inventory-category-active-field{
    min-width:0;
    align-self:end;
  }
  .inventory-category-active-field .settings-toggle-row{
    min-height:44px;
  }
  .inventory-category-subcategory-field{
    grid-column:1 / -1;
  }
  .inventory-category-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:390px;
    min-height:0;
    overflow:auto;
    padding-right:2px;
  }
  .inventory-category-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:start;
    padding:12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .inventory-category-card__copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .inventory-category-card__copy strong{
    font-size:14px;
    line-height:1.35;
  }
  .inventory-category-card__subcategories{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    min-width:0;
  }
  .inventory-category-chip{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:color-mix(in srgb,var(--panel-2) 80%,var(--panel));
    color:var(--muted);
    font-size:12px;
    line-height:1.35;
  }
  .inventory-category-card__meta{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    flex-wrap:wrap;
  }
  @media (max-width:760px){
    .inventory-category-modal__head,
    .inventory-category-card{
      grid-template-columns:1fr;
      flex-direction:column;
      align-items:stretch;
    }
    .inventory-category-modal__layout,
    .inventory-category-form-grid{
      grid-template-columns:1fr;
    }
    .inventory-category-active-field{
      align-self:stretch;
    }
    .inventory-category-list{
      max-height:none;
      overflow:visible;
      padding-right:0;
    }
    .inventory-category-card__meta{
      justify-content:flex-start;
    }
  }
  .field.order-form-error-focus{position:relative}
  .field.order-form-error-focus::after{content:"";position:absolute;inset:-6px;border-radius:var(--radius-large);border:2px solid color-mix(in srgb,var(--bad) 72%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--bad) 16%,transparent);pointer-events:none;animation:order-form-error-focus-ring 1.2s ease-out}
  .field.order-form-error-focus input,
  .field.order-form-error-focus textarea,
  .field.order-form-error-focus select,
  .field.order-form-error-focus .order-form-component-display,
  .field.order-form-error-focus .order-upload-dropzone,
  .field.order-form-error-focus .order-form-autofill-text,
  .field.order-form-error-focus .order-form-formula-value{border-color:color-mix(in srgb,var(--bad) 68%,var(--border))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 18%,transparent)}
  @keyframes order-form-error-focus-ring{
    0%{opacity:0;transform:scale(.985)}
    18%{opacity:1;transform:scale(1)}
    100%{opacity:0;transform:scale(1.015)}
  }
  .field>.field-label{font-weight:600}
  .lexware-items-list{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
  .lexware-item-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
  .lexware-item-field{margin-bottom:0}
  .lexware-item-service{flex:1 1 220px}
  .lexware-item-description{flex:1 1 100%;order:5}
  .lexware-item-quantity{flex:0 1 120px}
  .lexware-item-price{flex:0 1 160px}
  .lexware-item-unit{flex:0 1 120px}
  .lexware-item-tax{flex:0 1 160px}
  .lexware-item-remove{align-self:flex-end;padding:8px 10px;order:6}
  .lexware-items-summary{margin-top:14px;display:flex;flex-direction:column;gap:6px}
  .lexware-items-summary-row{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2)}
  .lexware-items-summary-row strong{font-weight:600}
  .lexware-offer-preview{display:flex;flex-direction:column;gap:18px}
  .lexware-offer-preview-section{display:flex;flex-direction:column;gap:10px}
  .lexware-offer-preview-section h4{margin:0;font-size:16px;font-weight:600}
  .lexware-offer-preview-contact{display:flex;flex-direction:column;gap:4px;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;padding:12px}
  .lexware-offer-preview-contact strong{font-weight:600}
  .lexware-offer-preview-total{display:flex;justify-content:flex-end;font-weight:700;font-size:16px;margin-top:6px}
  .lexware-offer-preview-actions{display:flex;justify-content:flex-end;gap:8px}
  @media (max-width:640px){
    .lexware-item-service,.lexware-item-description{flex:1 1 100%}
    .lexware-item-quantity,.lexware-item-price,.lexware-item-unit,.lexware-item-tax{flex:1 1 160px}
  }
  input, select, textarea{background:color-mix(in srgb,var(--panel) 70%,var(--panel-2)); color:var(--text); border:1px solid color-mix(in srgb,var(--border) 82%,transparent); border-radius:10px; padding:10px; width:100%; box-sizing:border-box; box-shadow:none; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease}
  textarea{min-height:100px; resize:vertical}
  textarea.autosize{min-height:0; height:auto; overflow-y:hidden}

  /* Switches — Legacy 40x22 (BC), neue Bereiche nutzen .app-switch (36x20) */
  .switch{position:relative;display:inline-block;flex:0 0 auto;width:40px;min-width:40px;max-width:40px;height:22px;margin-right:8px}
  .switch input{opacity:0;width:0;height:0}
  .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--border);transition:background-color .2s ease,border-color .2s ease;border-radius:var(--badge-radius)}
  .switch .slider:before{position:absolute;content:"";height:18px;width:18px;left:2px;bottom:2px;background:var(--panel);transition:transform .2s ease,background-color .2s ease;border-radius:50%}
  .switch input:checked+.slider{background:var(--accent)}
  .switch input:checked+.slider:before{transform:translateX(18px)}
  .row{display:flex; gap:10px; align-items:center}
  .field + .row{margin-top:8px}
  .row.switch-row{margin-top:8px}
  .stack{display:flex; gap:10px; flex-wrap:wrap}
  .pill{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--badge-radius); font-size:12px; line-height:1.4; border:var(--border-thin); background:color-mix(in srgb,var(--surface) 80%, transparent); color:var(--text); box-shadow:none}
  .status-pill[data-s="Abgeschlossen"]{background:color-mix(in srgb,var(--good) 20%,transparent); border-color:color-mix(in srgb,var(--good) 35%,transparent)}
  .status-pill[data-s="Storniert"]{background:color-mix(in srgb,var(--bad) 20%,transparent); border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
  .status-pill-interactive{cursor:pointer; position:relative; transition:background .15s ease, color .15s ease}
  .status-pill-interactive:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .status-pill-interactive .status-caret{font-size:10px; opacity:.6; transition:transform .15s ease}
  .status-pill-interactive[aria-expanded="true"] .status-caret{transform:rotate(180deg)}
  .status-menu{position:fixed; z-index:260; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:var(--shadow); min-width:160px; opacity:0; transform:translateY(-4px); transition:opacity .15s ease, transform .15s ease; pointer-events:none}
  .status-menu.show{opacity:1; transform:translateY(0); pointer-events:auto}
  .status-menu-item{padding:6px 12px; border-radius:8px; cursor:pointer; outline:none}
  .status-menu-item:hover,.status-menu-item:focus-visible{background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .status-menu-item.active{background:var(--accent); color:#fff}
  .badge{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:var(--border-thin); background:color-mix(in srgb,var(--surface) 80%, transparent); color:var(--text); border-radius:var(--badge-radius); font-size:12px; line-height:1.4}
  .nb-upload-area{margin-top:12px; padding:16px; border:1px dashed var(--border); border-radius:12px; background:var(--panel-2); display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:border-color .2s ease, background .2s ease, box-shadow .2s ease}
  .nb-upload-area.disabled{opacity:.55; cursor:not-allowed}
  .nb-upload-area.disabled button{pointer-events:none; opacity:.8}
  .nb-upload-area .nb-upload-main{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .nb-upload-area .nb-upload-copy{display:flex; flex-direction:column; gap:6px}
  .nb-upload-area .nb-upload-icon{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); color:var(--text)}
  .nb-upload-area .nb-upload-icon .icon{width:20px; height:20px; opacity:.9}
  [data-theme="light"] .nb-upload-area{background:rgba(0,0,0,.02)}
  [data-theme="light"] .nb-upload-area .nb-upload-icon{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent)}
  .nb-upload-area.dragover{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent)}
  .nb-upload-area .muted-small{margin:0}
  .netz-row-header{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
  .netz-row-badges{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}
  .danger{background:color-mix(in srgb, var(--bad) 12%, transparent); border-color:color-mix(in srgb, var(--bad) 30%, transparent)}
  .warn{background:color-mix(in srgb, var(--warn) 12%, transparent); border-color:color-mix(in srgb, var(--warn) 30%, transparent)}
  .ok{background:color-mix(in srgb, var(--good) 12%, transparent); border-color:color-mix(in srgb, var(--good) 30%, transparent)}
  .task.danger, tr.danger{background:color-mix(in srgb, var(--bad) 20%, transparent);}
  .task.warn, tr.warn{background:color-mix(in srgb, var(--warn) 20%, transparent);}
  .project-task.danger{border-color:color-mix(in srgb, var(--bad) 35%, transparent); background:color-mix(in srgb, var(--bad) 18%, transparent);}
  .project-task.warn{border-color:color-mix(in srgb, var(--warn) 30%, transparent); background:color-mix(in srgb, var(--warn) 16%, transparent);}
  .project-task.ok{border-color:color-mix(in srgb, var(--good) 30%, transparent); background:color-mix(in srgb, var(--good) 16%, transparent);}
  tbody tr.lead-row-highlight{background:color-mix(in srgb, var(--good) 18%, transparent); border-color:color-mix(in srgb, var(--good) 45%, transparent);}
  [data-theme="light"] tbody tr.lead-row-highlight{background:rgba(15,169,88,.14); border-color:rgba(15,169,88,.35);}
  .task-icon{
    position:relative;
    display:inline-block;
    min-width:24px;
    height:24px;
    background:var(--accent);
    color:#fff;
    border-radius:6px;
    font-weight:700;
    line-height:24px;
    text-align:center;
    margin-left:6px;
    padding:0 6px;
  }
  .task-icon .overdue{
    position:absolute;
    top:-6px;
    right:-6px;
    background:var(--bad);
    color:#fff;
    border-radius:50%;
    padding:0 4px;
    font-size:12px;
    line-height:16px;
    min-width:16px;
    height:16px;
  }
  .avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:block}
  .avatar-placeholder{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 70%,var(--panel)),color-mix(in srgb,var(--accent-2) 58%,var(--panel-2)));color:#fff;font-weight:700;font-size:13px}
  .sep{height:1px; background:var(--border); margin:10px 0}

  /* Global Search centered & solid */
  .search-wrap{display:flex; justify-content:center}
  .search{width: 720px; max-width: calc(100vw - 420px); position:relative}
  .search input{width:100%; padding-left:38px}
  .search i{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.7; color:var(--muted); width:18px; height:18px}
  .search-results{
    position:absolute; top:44px; left:0; right:0;
    display:none; z-index:120; max-height:420px; overflow:auto;
    padding:12px; border-radius:var(--radius-large);
    background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.02)) var(--panel);
    border:1px solid color-mix(in srgb, var(--border) 70%, transparent);
    box-shadow:0 18px 46px rgba(0,0,0,.55);
    backdrop-filter:blur(14px);
    transform-origin:top center;
    animation:searchDropdownFade .18s ease;
  }
  .search-results.show{display:flex; flex-direction:column; gap:10px}
  .search-group{display:flex; flex-direction:column; gap:8px}
  .search-group + .search-group{border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent); padding-top:8px; margin-top:2px}
  .search-results .group-title{
    display:flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted);
    padding:0 4px;
  }
  .search-results .group-title::before{
    content:''; width:8px; height:8px; border-radius:999px;
    background:color-mix(in srgb, var(--accent) 65%, transparent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .search-results .item{
    position:relative; display:flex; align-items:flex-start; gap:12px;
    padding:10px 12px; border-radius:12px;
    background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    border:1px solid transparent; box-shadow:inset 0 1px rgba(255,255,255,.04);
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .search-results .item:hover{
    background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
    border-color:color-mix(in srgb, var(--accent) 45%, transparent);
    transform:translateY(-1px);
  }
  .search-results .item:focus-within{outline:2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset:2px}
  .search-item-badge{
    display:inline-flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
    padding:4px 10px; border-radius:999px;
    background:color-mix(in srgb, var(--accent) 22%, transparent);
    color:color-mix(in srgb, var(--accent) 85%, white 15%);
    flex-shrink:0;
  }
  .search-item-content{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0}
  .search-item-title{color:var(--text); font-weight:600; text-decoration:none; line-height:1.4}
  .search-item-title:hover{color:var(--accent)}
  .search-item-subtitle{color:var(--muted); font-size:13px; line-height:1.3}
  .search-item-meta{display:flex; flex-wrap:wrap; gap:6px}
  .search-item-chip{
    display:inline-flex; align-items:center; justify-content:center;
    padding:2px 8px; border-radius:999px; font-size:11px;
    background:color-mix(in srgb, var(--panel-2) 60%, transparent);
    border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
    color:var(--muted);
  }
  .search-results .item:hover .search-item-chip{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
  .search-results-empty{
    padding:16px; text-align:center; border-radius:12px;
    background:linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    color:var(--muted);
  }

  /* Dropdown visibility (dark & light) */
  :root { color-scheme: light dark }
  select{
    appearance:none; padding-right:36px;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--muted) 50%),
      linear-gradient(135deg, var(--muted) 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 20px) 16px, calc(100% - 12px) 16px, calc(100% - 2.6em) 0.5em;
    background-size:6px 6px, 6px 6px, 1px 2em; background-repeat:no-repeat;
  }
  select:focus{outline:2px solid color-mix(in oklab, var(--accent) 70%, transparent); outline-offset:2px}
  option{background:var(--panel); color:var(--text)}

  /* Tasks */
  .tasks-shell{
    display:flex;
    flex-direction:column;
    gap:14px;
    height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
    min-height:0;
    overflow:hidden;
  }
  .tasks-overview,
  .tasks-command{
    display:flex;
    flex-direction:column;
    gap:18px;
    padding:20px;
    flex:0 0 auto;
    background:
      radial-gradient(120% 120% at 0 0, color-mix(in srgb,var(--accent) 18%,transparent), transparent 52%),
      radial-gradient(90% 120% at 100% 0, rgba(107,226,255,.12), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 62%),
      color-mix(in srgb,var(--panel) 86%,var(--panel-2));
  }
  .tasks-overview{gap:18px}
  .tasks-overview__topline,
  .tasks-command__hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:flex-start;
  }
  .tasks-overview__topline{grid-template-columns:minmax(0,1fr) auto}
  .tasks-overview__intro,
  .tasks-command__copy{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
  }
  .tasks-overview__title-row,
  .tasks-command__title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .tasks-overview__intro h1{
    margin:0;
    font:700 clamp(24px, 3vw, 30px)/1.02 "Noto Sans", sans-serif;
    letter-spacing:-.04em;
  }
  .tasks-overview__intro p{
    margin:0;
    max-width:74ch;
    color:var(--muted);
    font-size:14px;
    line-height:1.58;
  }
  .tasks-overview__badges,
  .tasks-overview__actions,
  .tasks-workbench__badges,
  .tasks-panel__footer--chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .tasks-overview__actions{
    align-items:flex-start;
    justify-content:flex-end;
  }
  .tasks-overview__strip,
  .tasks-command__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
  }
  .tasks-overview__strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tasks-panel{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    padding:16px;
    border-radius:22px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
      color-mix(in srgb,var(--panel) 76%,var(--panel-2));
    box-shadow:0 16px 36px rgba(0,0,0,.14);
  }
  .tasks-panel--focus{
    background:
      radial-gradient(120% 90% at 0 0, color-mix(in srgb, var(--bad) 14%, transparent), transparent 56%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
      color-mix(in srgb,var(--panel) 76%,var(--panel-2));
  }
  .tasks-panel--metrics{
    background:
      radial-gradient(120% 90% at 0 0, color-mix(in srgb,var(--accent) 16%,transparent), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
      color-mix(in srgb,var(--panel) 76%,var(--panel-2));
  }
  .tasks-panel--history{
    background:
      radial-gradient(120% 90% at 100% 0, color-mix(in srgb, var(--good) 12%, transparent), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
      color-mix(in srgb,var(--panel) 76%,var(--panel-2));
  }
  .tasks-panel__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .tasks-panel__head h2{
    margin:4px 0 0;
    font-size:20px;
    line-height:1.12;
  }
  .tasks-panel__eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--text);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700;
  }
  .tasks-panel__list{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:0;
  }
  .tasks-panel__footer{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
  }
  .tasks-panel__footer span{
    overflow-wrap:anywhere;
  }
  .tasks-digest-item{
    appearance:none;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:13px 14px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 74%,var(--panel-2));
    color:var(--text);
    text-align:left;
    cursor:pointer;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .tasks-digest-item:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 28px rgba(0,0,0,.16);
    border-color:color-mix(in srgb,var(--accent) 34%,var(--border));
  }
  .tasks-digest-item:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
    border-color:color-mix(in srgb,var(--accent) 52%,var(--border));
  }
  .tasks-digest-item__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .tasks-digest-item__title{
    flex:1 1 auto;
    min-width:0;
    font-size:14px;
    font-weight:700;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .tasks-digest-item__meta{
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
  .tasks-digest-item__badge{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .tasks-digest-item__badge--danger{border-color:color-mix(in srgb, var(--bad) 34%, transparent);background:color-mix(in srgb, var(--bad) 14%, transparent)}
  .tasks-digest-item__badge--warn{border-color:color-mix(in srgb, var(--warn) 34%, transparent);background:color-mix(in srgb, var(--warn) 14%, transparent)}
  .tasks-digest-item__badge--ok{border-color:color-mix(in srgb, var(--good) 32%, transparent);background:color-mix(in srgb, var(--good) 14%, transparent)}
  .tasks-digest-item__badge--info{border-color:rgba(107,226,255,.32);background:rgba(107,226,255,.14)}
  .tasks-overview__stats,
  .tasks-command__stats{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tasks-hero-stat{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-height:88px;
    padding:12px 13px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .tasks-hero-stat--danger{border-color:color-mix(in srgb, var(--bad) 32%, transparent);background:color-mix(in srgb,var(--bad) 10%,var(--panel-2))}
  .tasks-hero-stat--warn{border-color:color-mix(in srgb, var(--warn) 32%, transparent);background:color-mix(in srgb,var(--warn) 12%,var(--panel-2))}
  .tasks-hero-stat--ok{border-color:color-mix(in srgb, var(--good) 30%, transparent);background:color-mix(in srgb,var(--good) 10%,var(--panel-2))}
  .tasks-hero-stat__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .tasks-hero-stat__value{
    font-size:21px;
    line-height:1.08;
  }
  .tasks-hero-stat__meta{
    font-size:12px;
    line-height:1.4;
    color:var(--muted);
  }
  .tasks-lane-grid{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .tasks-lane-card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px 13px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--lane-accent, var(--accent)) 22%,var(--border));
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .tasks-lane-card__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .tasks-lane-card__name{
    font-size:13px;
    font-weight:700;
    color:var(--text);
  }
  .tasks-lane-card__count{
    font-size:20px;
    line-height:1;
  }
  .tasks-lane-card__meta{
    display:flex;
    flex-direction:column;
    gap:4px;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
  }
  .tasks-board-card,
  .tasks-workbench,
  .tasks-stage{
    display:flex;
    flex-direction:column;
    gap:16px;
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    padding:18px;
    background:
      radial-gradient(120% 120% at 0 0, color-mix(in srgb,var(--accent) 12%,transparent), transparent 52%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 58%),
      color-mix(in srgb,var(--panel) 74%,var(--panel-2));
  }
  .tasks-workbench{gap:16px}
  .tasks-workbench__head,
  .tasks-stage__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  .tasks-workbench__copy,
  .tasks-stage__copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
  }
  .tasks-workbench__copy h2{
    margin:0;
    line-height:1.16;
    font-size:22px;
  }
  .tasks-stage__copy h1{
    margin:0;
    font:700 clamp(24px, 3vw, 30px)/1.02 "Noto Sans", sans-serif;
    letter-spacing:-.04em;
  }
  .tasks-workbench__copy p{
    margin:0;
    color:var(--muted);
    line-height:1.58;
    max-width:70ch;
  }
  .tasks-stage__actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .tasks-board,
  .kanban{
    display:grid;
    flex:1 1 auto;
    min-height:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(0,1fr);
    gap:16px;
    width:100%;
    align-items:stretch;
  }
  .tasks-column,
  .col{
    display:flex;
    flex-direction:column;
    min-height:0;
    height:100%;
    padding:0;
    border-radius:24px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    background:
      radial-gradient(120% 70% at 18% 10%, color-mix(in srgb,var(--col-accent, var(--accent)) 12%, transparent), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 62%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    position:relative;
    overflow:hidden;
    box-shadow:0 18px 34px rgba(0,0,0,.16);
  }
  .tasks-column--open{
    background:
      radial-gradient(120% 80% at 18% 8%, color-mix(in srgb,var(--accent) 18%,transparent), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 62%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .tasks-column--waiting{
    background:
      radial-gradient(120% 80% at 18% 8%, rgba(107,226,255,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 62%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .tasks-column__panel{
    display:flex;
    flex-direction:column;
    gap:14px;
    flex:1 1 auto;
    min-height:0;
    padding:16px;
  }
  .tasks-column__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:0;
    position:relative;
    z-index:1;
  }
  .tasks-column__title-stack{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    flex:1 1 auto;
  }
  .tasks-column__signal{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 11px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:color-mix(in srgb,var(--panel) 76%,var(--panel-2));
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    flex:0 0 auto;
  }
  .tasks-column__title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .tasks-column__summary-grid{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .tasks-column__summary-card{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:6px;
    min-height:72px;
    padding:12px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--accent) 14%,var(--border));
    background:color-mix(in srgb,var(--panel) 72%,var(--panel-2));
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    line-height:1.45;
  }
  .tasks-column__summary-card strong{
    font-size:22px;
    line-height:1;
    color:var(--text);
  }
  .tasks-column__summary-card span{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .col-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    position:relative;
    z-index:1;
  }
  .col-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:15px;
    font-weight:800;
    color:var(--text);
    letter-spacing:.01em;
  }
  .col-dot{
    width:10px;
    height:10px;
    border-radius:999px;
    background:var(--col-accent, var(--accent));
    box-shadow:0 0 0 4px color-mix(in srgb,var(--col-accent, var(--accent)) 28%,transparent);
  }
  .col-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--col-accent, var(--accent)) 30%,transparent);
    background:color-mix(in srgb,var(--col-accent, var(--accent)) 16%,transparent);
    color:color-mix(in srgb,var(--col-accent, var(--accent)) 86%, white 12%);
    font-weight:800;
  }
  .col .dropzone{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px;
    position:relative;
    z-index:1;
    background:color-mix(in srgb,var(--panel-2) 80%,transparent);
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  }
  .tasks-column__list{
    margin:0;
    padding:12px;
  }
  .tasks-column__list > *{
    width:100%;
    min-width:0;
  }
  .task,
  .task-card{
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    gap:12px;
    align-items:flex-start;
    padding:15px;
    margin:0;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 30%,var(--border));
    border-left:4px solid color-mix(in srgb,var(--task-accent, var(--accent)) 84%,var(--accent));
    background:
      linear-gradient(160deg, color-mix(in srgb,var(--panel-2) 86%,transparent), color-mix(in srgb,var(--task-accent, var(--accent)) 11%,var(--panel))),
      color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
  }
  .task::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, color-mix(in srgb,var(--task-accent, var(--accent)) 12%,transparent), transparent 60%);
    opacity:.7;
    pointer-events:none;
    z-index:0;
  }
  .task[draggable=true]{cursor:grab}
  .task[draggable=true]:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(0,0,0,.22);
  }
  .task.ok{border-color:color-mix(in srgb, var(--good) 34%, transparent);background:linear-gradient(160deg,color-mix(in srgb,var(--good) 10%,var(--panel-2)),color-mix(in srgb,var(--good) 14%,var(--panel)))}
  .task-card__compact,
  .task-card__body,
  .task-card__top,
  .task-card__support,
  .task .meta{
    position:relative;
    z-index:1;
    width:100%;
  }
  .task-card__compact{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .task-card__compact-copy{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    flex:1 1 auto;
  }
  .task-card__body{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-top:2px;
    border-top:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 16%,transparent);
  }
  .task-card__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .task-card__title-row{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  .task-card__status{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 28%,transparent);
    background:color-mix(in srgb,var(--task-accent, var(--accent)) 12%,transparent);
    color:var(--text);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .task-card__status--danger{border-color:color-mix(in srgb, var(--bad) 34%, transparent);background:color-mix(in srgb, var(--bad) 14%, transparent)}
  .task-card__status--warn{border-color:color-mix(in srgb, var(--warn) 34%, transparent);background:color-mix(in srgb, var(--warn) 14%, transparent)}
  .task-card__status--ok{border-color:color-mix(in srgb, var(--good) 32%, transparent);background:color-mix(in srgb, var(--good) 14%, transparent)}
  .task-card__status--info{border-color:rgba(107,226,255,.32);background:rgba(107,226,255,.14)}
  .task-card__flag{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    border:1px dashed color-mix(in srgb,var(--task-accent, var(--accent)) 26%,transparent);
    background:color-mix(in srgb,var(--panel-2) 84%,transparent);
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .task .task-title{
    font-weight:800;
    font-size:15px;
    color:var(--text);
    line-height:1.45;
    letter-spacing:.01em;
    flex:1 1 auto;
    min-width:0;
    overflow-wrap:anywhere;
  }
  .task-card__project{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    overflow-wrap:anywhere;
  }
  .task-card__project .icon{width:14px;height:14px;color:var(--muted)}
  a.task-card__project:hover{color:var(--accent)}
  .task-card__toggle{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    min-width:108px;
    justify-content:center;
    white-space:nowrap;
  }
  .task-card__due-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .task .task-date{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 30%,transparent);
    background:color-mix(in srgb,var(--task-accent, var(--accent)) 14%,transparent);
    color:color-mix(in srgb,var(--task-accent, var(--accent)) 82%, white 14%);
    font-size:12px;
    white-space:nowrap;
    flex:0 0 auto;
    align-self:flex-start;
  }
  .task .task-date.overdue{border-color:color-mix(in srgb, var(--bad) 34%, transparent);background:color-mix(in srgb, var(--bad) 16%, transparent);color:color-mix(in srgb,var(--bad) 86%,white 14%)}
  .task .task-date.today{background:color-mix(in srgb,var(--accent) 22%,transparent)}
  .task-card__meta-grid{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .task-card__owner,
  .task-card__meta-item{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    padding:10px 12px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 16%,transparent);
    background:color-mix(in srgb,var(--panel-2) 78%,transparent);
  }
  .task-card__owner{width:100%}
  .task-card__support{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .task-card__label{
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .task-card__value{
    color:var(--text);
    font-size:14px;
    font-weight:700;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .task-card__description{
    position:relative;
    z-index:1;
    margin:0;
    width:100%;
    padding:12px 13px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 16%,transparent);
    background:color-mix(in srgb,var(--panel-2) 72%,transparent);
    color:var(--muted);
    line-height:1.55;
    font-size:13px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
  }
  .task .meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    color:var(--muted);
    font-size:12px;
    margin-top:0;
  }
  .task-card__chips{margin-top:2px}
  .task .task-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 22%,transparent);
    background:color-mix(in srgb,var(--task-accent, var(--accent)) 6%,transparent);
    color:color-mix(in srgb,var(--task-accent, var(--accent)) 72%, white 12%);
    font-weight:700;
  }
  .task .task-chip.outlined{
    background:color-mix(in srgb,var(--panel-2) 88%,transparent);
    border-style:dashed;
  }
  .tasks-board-card,
  .tasks-workbench,
  .tasks-stage{
    background:
      radial-gradient(100% 90% at 100% 0, color-mix(in srgb,var(--accent) 10%,transparent), transparent 58%),
      linear-gradient(180deg, color-mix(in srgb,var(--panel) 86%,var(--panel-2)), color-mix(in srgb,var(--panel-2) 78%,var(--panel)));
    border-color:color-mix(in srgb,var(--border) 86%,transparent);
  }
  .tasks-board,
  .kanban{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:14px;
  }
  .tasks-column,
  .col{
    border-radius:22px;
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--panel) 90%,var(--panel-2)), color-mix(in srgb,var(--panel-2) 78%,var(--panel))),
      var(--panel);
    box-shadow:0 16px 34px rgba(0,0,0,.14);
  }
  .tasks-column--done{
    background:
      radial-gradient(120% 80% at 18% 8%, color-mix(in srgb, var(--good) 16%, transparent), transparent 60%),
      linear-gradient(180deg, color-mix(in srgb,var(--panel) 88%,var(--panel-2)), color-mix(in srgb,var(--panel-2) 78%,var(--panel)));
  }
  .tasks-column__head{
    align-items:center;
    padding-bottom:2px;
  }
  .tasks-column__summary-grid{
    gap:8px;
  }
  .tasks-column__summary-card{
    min-height:58px;
    padding:10px;
    border-radius:14px;
  }
  .col .dropzone{
    padding:10px;
    background:color-mix(in srgb,var(--panel-2) 66%,transparent);
  }
  .task,
  .task-card{
    gap:14px;
    padding:16px 16px 16px 18px;
    border-radius:20px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 22%,var(--border));
    border-left:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 22%,var(--border));
    background:
      linear-gradient(145deg, color-mix(in srgb,var(--panel) 92%,var(--task-accent, var(--accent)) 8%), color-mix(in srgb,var(--panel-2) 82%,var(--panel))),
      var(--panel);
    box-shadow:0 12px 28px rgba(0,0,0,.14);
  }
  .task-card__rail{
    position:absolute;
    inset:12px auto 12px 0;
    width:4px;
    border-radius:0 999px 999px 0;
    background:color-mix(in srgb,var(--task-accent, var(--accent)) 84%,var(--accent));
    z-index:1;
  }
  .task-card__eyebrow,
  .task-card__context-row{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    min-width:0;
  }
  .task-card__context-row{
    justify-content:space-between;
  }
  .task-card__assignee{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 9px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--task-accent, var(--accent)) 18%,transparent);
    background:color-mix(in srgb,var(--panel-2) 82%,transparent);
    color:var(--muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
  }
  .task-card__compact{
    align-items:flex-start;
  }
  .task-card__body{
    padding-top:12px;
  }
  .task-card__top{
    align-items:center;
  }
  .task-card__meta-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  @media (max-width:1280px){
    .tasks-overview__strip,
    .tasks-command__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .tasks-panel--history{grid-column:1 / -1}
  }
  @media (max-width:1080px){
    .tasks-shell{
      height:auto;
      max-height:none;
      min-height:100%;
      overflow:visible;
    }
    .tasks-board,
    .kanban{
      min-height:auto;
      grid-auto-rows:auto;
    }
    .tasks-column,
    .col,
    .tasks-column__panel,
    .col .dropzone{
      height:auto;
      max-height:none;
      min-height:auto;
    }
    .col .dropzone{
      overflow:visible;
    }
    .tasks-overview__topline,
    .tasks-command__hero{grid-template-columns:1fr}
    .tasks-board,
    .kanban{grid-template-columns:1fr}
    .tasks-column__summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (max-width:820px){
    .tasks-overview,
    .tasks-command,
    .tasks-board-card,
    .tasks-stage{padding:16px}
    .tasks-overview__strip,
    .tasks-command__grid{grid-template-columns:1fr}
    .tasks-panel--history{grid-column:auto}
    .tasks-overview__actions{justify-content:flex-start}
    .tasks-workbench__head,
    .tasks-stage__head{flex-direction:column}
    .tasks-workbench__badges{justify-content:flex-start}
    .tasks-column__panel{padding:14px}
  }
  @media (max-width:760px){
    .tasks-overview__stats,
    .tasks-command__stats,
    .tasks-lane-grid,
    .task-card__meta-grid{grid-template-columns:1fr}
    .tasks-column__summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:520px){
    .tasks-overview__title-row,
    .tasks-column__head,
    .task-card__compact,
    .task-card__top,
    .tasks-column__title-row,
    .tasks-lane-card__top,
    .tasks-digest-item__top{flex-direction:column; align-items:flex-start}
    .tasks-column__summary-grid{grid-template-columns:1fr}
    .task .task-date{white-space:normal}
    .task-card__toggle{min-width:0}
  }
  @media (max-width:1180px) and (min-width:761px){
    .workspace-shell.workspace-shell--nav,
    .workspace-shell.workspace-shell--nav.tasks-shell{
      height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
      max-height:calc(100vh - var(--app-header-height) - (var(--main-shell-padding) * 2));
      min-height:0;
      overflow:hidden;
    }
    .workspace-shell--nav .workspace-layout{
      grid-template-columns:1fr;
      grid-template-rows:auto minmax(0,1fr);
      height:100%;
      min-height:0;
      overflow:hidden;
    }
    .workspace-shell--nav .workspace-sidebar{
      height:auto;
      min-height:0;
      max-height:min(26vh, 220px);
      overflow:hidden;
    }
    .workspace-shell--nav .workspace-sidebar-intro{
      padding:14px 16px;
    }
    .workspace-shell--nav .workspace-nav-card{
      min-height:0;
      max-height:100%;
      overflow:auto;
      overscroll-behavior:contain;
      padding-right:14px;
    }
    .workspace-shell--nav .workspace-nav-list{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    }
    .workspace-shell--nav .workspace-main{
      height:100%;
      min-height:0;
      overflow:auto;
      overscroll-behavior:contain;
      padding-right:0;
      scrollbar-gutter:auto;
    }
    .workspace-shell--nav .tasks-board,
    .workspace-shell--nav .kanban{
      min-height:0;
    }
    .workspace-shell--nav.projects-detail-shell{
      min-height:0;
      overflow:hidden;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-layout{
      grid-template-columns:minmax(200px,228px) minmax(0,1fr);
      grid-template-rows:minmax(0,1fr);
      height:100%;
      min-height:0;
      overflow:hidden;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-sidebar{
      height:100%;
      max-height:none;
      min-height:0;
      overflow:hidden;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-nav-card{
      height:100%;
      max-height:100%;
      overflow:auto;
      padding-right:10px;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-nav-list{
      display:flex;
      grid-template-columns:none;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-main{
      height:100%;
      min-height:0;
      overflow:hidden;
      padding-right:0;
      scrollbar-gutter:auto;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-panel__head{
      flex-direction:column;
      align-items:stretch;
    }
    .workspace-shell--nav.projects-detail-shell .workspace-sidebar-intro__copy h1{
      font-size:clamp(22px, 3vw, 28px);
    }
  }
  .activity{padding:4px;border-radius:8px;align-items:flex-start;}
  .activity .avatar{flex:0 0 auto;}
  .activity.editable:hover{outline:2px solid color-mix(in srgb, var(--accent) 12%, transparent);cursor:pointer;}
  .drop{outline:2px dashed color-mix(in srgb, var(--accent) 12%, transparent)}
  .over{outline:2px dashed var(--accent)}

  .img-drop{border:2px dashed color-mix(in srgb, var(--accent) 30%, transparent); border-radius:10px; padding:10px; text-align:center; color:var(--muted); cursor:pointer}
  .img-drop.over{border-color:var(--accent); color:var(--accent)}
  .img-drop img{max-width:100%; max-height:100px; display:block; margin-top:6px}
  .rich-images{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
  .rich-images img{max-width:200px; max-height:200px; display:block; cursor:pointer; border-radius:8px; outline:none}
  .rich-images img:focus{box-shadow:0 0 0 3px var(--primary, #0066ff)}
  .img-preview{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
  .img-preview .thumb{position:relative}
  .img-preview .thumb img{width:60px; height:60px; object-fit:cover; border-radius:8px; display:block}
  .img-preview .thumb .remove{position:absolute; top:-6px; right:-6px; background:var(--bad); color:#fff; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; cursor:pointer}
  .img-preview .thumb .remove .icon{width:10px; height:10px; opacity:.9}

  /* Modal */
  .modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:200}
  .modal.show{display:flex}
  /* Scroll-Pass-through ins Hintergrund-`main` blockieren, solange ein Modal geöffnet ist (vor allem Touch-Geräte) */
  body:has(.modal.show) main{overflow:hidden;overscroll-behavior:contain;touch-action:none}
  .modal .box{overscroll-behavior:contain}
  .modal{
    padding:18px;
    background:rgba(5,10,20,.7);
    backdrop-filter:blur(16px);
  }
  .modal .box{
    background:
      radial-gradient(120% 100% at 100% 0, color-mix(in srgb,var(--accent) 14%,transparent), transparent 56%),
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 54%),
      color-mix(in srgb,var(--panel) 88%,var(--panel-2));
    border:1px solid color-mix(in srgb,var(--border) 82%,transparent);
    border-radius:24px;
    box-shadow:0 28px 70px rgba(0,0,0,.42);
    width:min(980px, calc(100vw - 36px));
    max-height:86vh;
    overflow:auto;
    padding:22px;
  }
  .modal .box.box--preview{
    width:min(1180px, calc(100vw - 24px));
    max-height:92vh;
  }
  /* Wenn ein Modal das neue .app-modal__panel-Pattern nutzt, soll der legacy
     .modal .box-Wrapper nur als Zentrierer dienen — der innere Panel
     uebernimmt Hintergrund/Border/Padding selbst. */
  .modal .box:has(> .app-modal__panel){
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0;
    width:auto;
    max-width:none;
    max-height:none;
    overflow:visible;
  }
  .modal-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0}
  .modal-tabs .btn{padding:8px 14px; font-weight:600}
  .modal-tab-panel{display:flex; flex-direction:column; gap:12px}
  .modal-tab-panel[hidden]{display:none}
  .modal-section{background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium); padding:18px; display:flex; flex-direction:column; gap:12px}
  .modal-section-title{font-weight:600; font-size:15px}
  .modal-section-subtext{color:var(--muted); font-size:13px}
  .nb-access-list{display:flex; flex-direction:column; gap:10px}
  .nb-access-card{background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium); padding:18px; display:flex; flex-direction:column; gap:10px}
  .nb-access-header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
  .nb-access-master{font-weight:600}
  .nb-access-credentials{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .nb-access-label{font-size:12px; color:var(--muted)}
  .nb-access-value{font-weight:500; word-break:break-word}
  .nb-access-actions{display:flex; gap:6px}
  .nb-mode-hint{color:var(--muted); font-size:13px}

  /* Notification popup */
  .notif-popup{position:fixed; right:18px; top:72px; width:320px; max-height:60vh; overflow:auto; overflow-x:hidden; z-index:220;
    background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px;}
  .notif-popup .item{padding:8px; border-bottom:1px dashed rgba(255,255,255,.02)}
  .notif-popup .item:last-child{border-bottom:0}
  .notif-popup__header,
  .notif-popup__footer{display:flex; align-items:center; justify-content:space-between; gap:12px}
  .notif-popup__footer{justify-content:flex-end}
  .notif-item{display:flex; gap:12px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; width:100%;}
  .notif-item .notif-main{flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
  .notif-item .notif-actions{flex-shrink:0; display:flex; align-items:center; gap:8px;}
  .notif-item .notif-actions .btn{white-space:nowrap;}
  .notif-item--inbox{
    padding:16px 18px;
    border-radius:18px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .notif-item--inbox .notif-actions{align-self:center}
  .inbox-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    padding:14px 16px;
    border-radius:var(--radius-large);
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .inbox-footer__status{
    flex:1 1 auto;
    min-width:0;
  }
  .inbox-footer__actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

  .toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%) translateY(20px);background:var(--panel);color:var(--text);padding:8px 16px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transition:opacity .3s,transform .3s;z-index:10600}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast .btn{margin-left:8px}
  /* U2: Toast-Varianten — dezenter Akzentstreifen links, damit Erfolg/Fehler/Warnung unterscheidbar sind. */
  .toast--success{border-left:3px solid var(--ok,#28a745)}
  .toast--error,.toast--danger{border-left:3px solid var(--danger,#d04545)}
  .toast--warning{border-left:3px solid #d8a200}
  .toast--info{border-left:3px solid var(--accent,#4a90d9)}
  .toast-choice{border:1px solid transparent}
  .toast-choice.toast-alert{animation:toastAlert .6s ease}
  body.toast-input-active .app{filter:blur(6px); pointer-events:none; user-select:none; transition:filter .2s ease}
  body.toast-input-active::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(5,10,20,.55);
    backdrop-filter:blur(6px);
    z-index:230;
  }
  body.toast-input-active .toast-choice{z-index:10600}
  @keyframes toastAlert{
    0%{box-shadow:var(--shadow);border-color:transparent}
    40%{box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 45%, transparent);border-color:var(--bad)}
    60%{box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 45%, transparent);border-color:var(--bad)}
    100%{box-shadow:var(--shadow);border-color:transparent}
  }

  /* Scrollable lists */
  .scroll-list{overflow-y:auto}

  /* File upload */
  .upload-area{border:2px dashed var(--border);border-radius:10px;padding:20px;text-align:center;color:var(--muted);cursor:pointer;transition:border-color .2s,color .2s}
  .upload-area.over{border-color:var(--accent);color:var(--accent)}
  .file-drop-zone{position:relative;border:2px dashed transparent;border-radius:10px;padding:8px;transition:border-color .2s,background-color .2s}
  .file-drop-zone.file-drop-zone--active{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 12%, transparent)}
  .file-drop-zone.file-drop-zone--disabled{opacity:.6;cursor:not-allowed}
  .proof-dropzone{border:2px dashed var(--border);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;background:color-mix(in oklab, var(--panel) 88%, transparent);cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s,box-shadow .2s}
  .proof-dropzone:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 22px rgba(5,10,20,.28)}
  .proof-dropzone--hover{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 14%, transparent)}
  .proof-dropzone--has-file{border-color:color-mix(in oklab, var(--accent) 45%, var(--border));box-shadow:0 10px 26px rgba(5,10,20,.32)}
  .proof-dropzone__icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab, var(--accent) 20%, transparent);color:var(--text);flex-shrink:0;box-shadow:0 6px 18px rgba(5,10,20,.18)}
  .proof-dropzone--has-file .proof-dropzone__icon{background:color-mix(in oklab, var(--accent) 38%, transparent);color:#fff}
  .proof-dropzone__icon .icon{width:20px;height:20px}
  .proof-dropzone__text{display:flex;flex-direction:column;gap:4px}
  .proof-dropzone__title{font-weight:600}
  .proof-dropzone__files{color:var(--muted)}
  .proof-file-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:color-mix(in oklab, var(--accent) 16%, transparent);margin:3px 6px 0 0;font-size:13px;color:var(--text);border:1px solid color-mix(in oklab, var(--accent) 28%, var(--border))}

  /* File list */
  .file-item{display:flex; justify-content:space-between; align-items:center; gap:12px; min-width:0; max-width:100%; border:1px solid var(--border); border-radius:10px; padding:8px; margin:6px 0}
  .file-item--list{align-items:center}
  .file-item-main{flex:1 1 auto; min-width:0}
  .file-item-side{display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:0 1 240px; min-width:0; max-width:100%}
  .file-item-side .file-tag-select{max-width:100%}
  .file-item-link{
    display:inline-flex;
    align-items:center;
    padding:0;
    border:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-weight:700;
    text-align:left;
    cursor:pointer;
  }
  .file-item-link:hover,
  .file-item-link:focus-visible{
    text-decoration:underline;
    outline:none;
  }
  .file-gallery{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:stretch; margin:18px 0 8px}
  .projects-files-more{display:block; margin:14px auto 4px}
  .file-gallery .file-item{margin:0}
  .file-item--gallery{display:flex; flex-direction:column; gap:14px; height:100%; padding:16px; border-radius:var(--radius-large); background:var(--panel-2); border:1px solid var(--border); box-shadow:var(--shadow)}
  .file-item--gallery .file-preview{border-radius:10px; margin-right:0; width:100%}
  .file-item--gallery .file-preview img{object-fit:contain}
  .file-item--gallery .file-item-body{display:flex; flex-direction:column; gap:10px; flex:1; min-height:0}
  .file-item--gallery .file-item-meta{display:flex; flex-direction:column; gap:4px; min-height:0}
  .file-item--gallery .file-name{word-break:break-word}
  .file-preview-delete-btn{
    position:absolute;
    top:10px;
    right:10px;
    width:34px;
    height:34px;
    border-radius:999px;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(12,20,32,.65);
    color:#fff;
    cursor:pointer;
    box-shadow:0 6px 14px rgba(0,0,0,.35);
    z-index:2;
    transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .file-preview-delete-btn:hover{transform:translateY(-2px); background:rgba(12,20,32,.78); box-shadow:0 10px 20px rgba(0,0,0,.4)}
  [data-theme="light"] .file-preview-delete-btn{background:color-mix(in srgb, var(--text) 55%, transparent); box-shadow:0 6px 18px rgba(13,36,56,.24)}
  [data-theme="light"] .file-preview-delete-btn:hover{background:color-mix(in srgb, var(--text) 70%, transparent); box-shadow:0 10px 24px rgba(13,36,56,.28)}
  .file-item--gallery .file-item-controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:auto}
  .file-item--gallery .file-tag-select{flex:1 1 180px; min-width:0}
  .file-item--gallery .file-item-actions-row{display:flex; gap:6px; margin-left:auto}
  .file-item--gallery .file-item-actions-row .btn{padding:6px 10px}
  .file-preview{position:relative;width:60px;height:60px;border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-right:12px;cursor:pointer;background:var(--panel-2);transition:box-shadow .2s ease}
  .file-preview--gallery{width:100%;height:260px;margin-right:0;border-radius:14px;background:color-mix(in srgb,var(--panel) 74%,var(--panel-2))}
  @media (min-width: 1200px){
    .file-preview--gallery{height:320px}
  }
  .file-preview img{width:100%;height:100%;object-fit:contain;pointer-events:none;border:0;overflow:hidden;display:block;opacity:0;transition:opacity .2s ease}
  .file-preview .file-preview-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(0,0,0,.08));transition:opacity .2s ease}
  .file-preview.file-preview--ready img{opacity:1}
  .file-preview.file-preview--ready .file-preview-spinner{opacity:0;pointer-events:none}
  .file-preview.file-preview--pending{cursor:default}
  .file-preview.file-preview--fallback{border-style:dashed}
  .file-preview.file-preview--missing{border-color:color-mix(in oklab, var(--danger, #c0392b) 45%, var(--border));opacity:.7}
  .file-preview.file-preview--missing .file-preview-fallback{color:var(--danger, #c0392b);background:color-mix(in oklab, var(--danger, #c0392b) 10%, transparent)}
  .file-item-data-lost-badge{margin-left:8px;vertical-align:middle;white-space:nowrap}
  .file-preview-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:600;font-size:12px;text-transform:uppercase;color:var(--muted);background:color-mix(in oklab, var(--accent) 12%, transparent)}
  .component-tab-nav{display:flex;gap:8px;margin:12px 0 18px;border-bottom:1px solid var(--border);padding-bottom:6px}
  .component-tab-btn{
    background:color-mix(in oklab, var(--accent) 16%, transparent);
    border:1px solid color-mix(in oklab, var(--accent) 45%, var(--border));
    color:color-mix(in oklab, var(--accent) 70%, var(--muted));
    padding:6px 14px;
    border-radius:999px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  }
  .component-tab-btn:hover,
  .component-tab-btn:focus-visible{
    color:var(--text);
    background:color-mix(in oklab, var(--accent) 26%, transparent);
    border-color:color-mix(in oklab, var(--accent) 65%, var(--border));
  }
  .component-tab-btn.active{
    color:#fff;
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 8px 20px color-mix(in oklab, var(--accent) 35%, rgba(0,0,0,.6));
  }
  .component-tab-section{display:none;flex-direction:column;gap:18px}
  .component-tab-section.active{display:flex}

  /* Unified portal hover and selection states */
  :where(
    nav a:hover,
    nav a.active,
    .settings-nav-btn:hover,
    .settings-nav-btn:focus-visible,
    .settings-nav-btn.is-active,
    .btn:not(.primary):hover,
    button:not(.primary):hover,
    .card:hover,
    .order-form-card:hover,
    input:hover,
    select:hover,
    textarea:hover,
    .order-form-component-display:hover,
    .order-form-autofill-text:hover,
    .order-form-static:hover,
    .order-form-group:hover,
    .order-form-group-entry:hover,
    .settings-toggle-row:hover,
    .settings-check-item:hover,
    .settings-attachment-item:hover,
    .status-menu-item:hover,
    .status-menu-item:focus-visible,
    .address-suggestion:hover,
    .address-suggestion.active,
    .order-upload-dropzone:hover,
    .order-upload-dropzone.is-over,
    .nb-upload-area:hover,
    .nb-upload-area.dragover,
    .file-drop-zone:hover,
    .file-drop-zone.file-drop-zone--active,
    .proof-dropzone:hover,
    tbody tr:hover,
    .workspace-nav-button:hover,
    .workspace-nav-button:focus-visible,
    .analytics-segmented-button:hover,
    .analytics-segmented-button:focus-visible,
    .order-form-inline-option:hover,
    .component-tab-btn:hover,
    .component-tab-btn:focus-visible
  ){
    transform:none;
    box-shadow:none;
    border-color:var(--surface-hover-border);
    background:var(--surface-hover-bg);
  }
  :where(
    input:focus,
    select:focus,
    textarea:focus,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    .order-form-component-display:focus-visible,
    .order-upload-dropzone:focus-visible,
    .component-tab-btn:focus-visible
  ){
    outline:none;
    border-color:var(--surface-active-border);
    background:var(--surface-active-bg);
    box-shadow:var(--surface-focus-ring);
  }
  :where(
    nav a.active,
    .order-form-step-summary.is-active,
    .order-form-inline-option.is-selected,
    .order-form-chip.is-active,
    .settings-nav-btn.is-active,
    .settings-attachment-item.is-active,
    .workspace-nav-button.is-active,
    .analytics-segmented-button.is-active,
    .status-menu-item.active,
    .component-tab-btn.active,
    .file-drop-zone.file-drop-zone--active,
    .nb-upload-area.dragover,
    .order-upload-dropzone.is-over
  ){
    border-color:var(--surface-active-border);
    background:var(--surface-active-bg);
    box-shadow:none;
    color:var(--text);
  }
  nav a:hover,
  nav a:focus-visible,
  .order-form-step-summary:hover,
  .order-form-step-summary:focus-visible{
    transform:none;
    box-shadow:none;
    border-color:color-mix(in srgb,var(--accent) 32%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 8%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  nav a.active,
  .order-form-step-summary.is-active{
    border-color:color-mix(in srgb,var(--accent) 44%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 74%,var(--panel-2));
    box-shadow:none;
    color:var(--text);
  }
  .order-form-step-summary:hover .order-form-step-summary-value,
  .order-form-step-summary:focus-visible .order-form-step-summary-value{
    border-color:color-mix(in srgb,var(--accent) 22%,var(--border));
    background:color-mix(in srgb,var(--panel) 80%,var(--panel-2));
  }
  .order-form-step-summary.is-active .order-form-step-summary-value{
    border-color:color-mix(in srgb,var(--accent) 28%,var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 10%,transparent), transparent 72%),
      color-mix(in srgb,var(--panel) 82%,var(--panel-2));
  }
  .switch input:checked + .slider{
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 36%,var(--panel-2)), color-mix(in srgb,var(--accent) 22%,var(--panel)));
    border:1px solid var(--surface-active-border);
  }
  .switch input:focus-visible + .slider{
    box-shadow:var(--surface-focus-ring);
  }
  .order-form-checkbox input:checked,
  .task-checkbox-input:checked + .task-checkbox-box{
    border-color:var(--surface-active-border);
    background:var(--surface-active-bg);
    box-shadow:none;
  }
  .task-checkbox-input:focus-visible + .task-checkbox-box{
    border-color:var(--surface-active-border);
    box-shadow:var(--surface-focus-ring);
  }

  .preview-toolbar{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .preview-toolbar .btn{padding:4px 10px;font-size:13px;line-height:1.3}
  .preview-toolbar .muted-small{font-size:12px}
  .preview-content{max-height:calc(80vh - 150px)}
  .box--preview .preview-content{max-height:calc(88vh - 140px)}
  .preview-content.image{overflow:auto;display:block;padding:12px;border-radius:10px;background:var(--panel-2);text-align:center}
  .preview-content.image img{display:block;max-width:100%;height:auto;margin:0 auto;transform-origin:center center;transition:transform .15s ease}
  .preview-content.pdf{overflow:hidden}
  .preview-browser-window{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
  .preview-browser-chrome{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);background:color-mix(in oklab, var(--panel-2) 88%, var(--panel))}
  .preview-browser-dot{width:8px;height:8px;border-radius:999px;background:color-mix(in oklab, var(--muted) 70%, transparent);flex:0 0 auto}
  .preview-browser-address{margin-left:4px;flex:1;min-width:0;font-size:12px;color:var(--muted);padding:4px 8px;border:1px solid var(--border);border-radius:999px;background:var(--panel-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .preview-browser-frame{display:block;min-height:calc(80vh - 210px);height:calc(80vh - 210px);border:0;border-radius:0;background:#fff}
  .box--preview .preview-browser-frame{min-height:calc(88vh - 190px);height:calc(88vh - 190px)}
  .preview-content.other{padding:24px;border-radius:10px;background:var(--panel-2);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
  .preview-content.other p{margin:0;color:var(--muted)}
  .preview-fallback-icon{width:72px;height:72px;border-radius:var(--radius-large);background:color-mix(in oklab, var(--accent) 16%, transparent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;text-transform:uppercase;color:color-mix(in oklab, var(--accent) 75%, var(--text))}
  .pdf-container{width:100%;max-height:calc(80vh - 150px);overflow:auto;padding:12px;border-radius:10px;background:var(--panel-2)}
  .pdf-container::-webkit-scrollbar{display:none;}
  .pdf-container{scrollbar-width:none;}
  .pdf-page{position:relative;margin-bottom:16px}
  .pdf-page:last-child{margin-bottom:0}
  .pdf-page canvas{width:100%;height:auto;display:block}
  .pdf-page .textLayer{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;line-height:1;pointer-events:auto}
  .pdf-page .textLayer span{position:absolute;color:transparent;white-space:pre;cursor:text;transform-origin:0 0;pointer-events:auto}
  .pdf-page .textLayer span::selection{background:rgba(0,120,215,.35);color:#000}
  .pdf-page .textLayer span::-moz-selection{background:rgba(0,120,215,.35);color:#000}
  .pdf-page .textLayer .endOfContent{display:none}
  .file-name{font-weight:600;cursor:text}
  .file-name.renaming{cursor:auto}
  .file-name-label{cursor:pointer;display:inline-block;max-width:100%;white-space:normal;word-break:break-word;overflow-wrap:anywhere}
  .file-name.renaming .file-name-label{display:none}
  .file-rename-input{width:100%;box-sizing:border-box;font-weight:600;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text)}

  /* Auth */
  .center{display:grid; min-height:100vh; place-items:center}
  .logo-big{display:block; width:60px; height:auto; margin:0 auto 10px}
  .login{width:min(520px, 92vw)}
  .hint{font-size:12px; color:var(--muted-2)}
  .auth-card{padding:32px 28px}
  .auth-shell{
    --auth-ink:color-mix(in srgb,var(--text) 90%,white 10%);
    --auth-soft:color-mix(in srgb,var(--muted) 84%,white 16%);
    --auth-border:color-mix(in srgb,var(--border) 70%,rgba(255,255,255,.18));
    --auth-panel-bg:color-mix(in srgb,var(--panel) 86%,var(--panel-2));
    --auth-panel-muted:color-mix(in srgb,var(--panel) 70%,var(--panel-2));
    --auth-accent-soft:color-mix(in srgb,var(--accent) 14%,transparent);
    position:relative;
    isolation:isolate;
    overflow-x:hidden;
    min-height:100vh;
    padding:34px 24px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
      radial-gradient(92% 88% at 0 0, color-mix(in srgb,var(--accent) 24%,transparent), transparent 62%),
      radial-gradient(72% 72% at 100% 100%, rgba(255,208,122,.12), transparent 68%),
      linear-gradient(135deg, #120d0b 0%, #19100c 38%, #101823 100%);
  }
  .auth-shell::before,
  .auth-shell::after{
    content:'';
    position:absolute;
    inset:auto;
    pointer-events:none;
    z-index:-1;
  }
  .auth-shell::before{
    top:22px;
    left:22px;
    right:22px;
    bottom:22px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:32px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:22px 22px;
    mask:linear-gradient(180deg, rgba(0,0,0,.45), transparent 82%);
    opacity:.5;
  }
  .auth-shell::after{
    width:420px;
    height:420px;
    top:-140px;
    right:-80px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0));
    filter:blur(6px);
    opacity:.6;
  }
  .auth-shell--login{
    background:
      radial-gradient(110% 90% at 0 0, color-mix(in srgb,var(--accent) 26%,transparent), transparent 58%),
      radial-gradient(88% 76% at 100% 0, rgba(255,210,132,.16), transparent 62%),
      linear-gradient(135deg, #140d09 0%, #1f140e 46%, #111822 100%);
  }
  .auth-shell--public{
    background:
      radial-gradient(96% 84% at 0 0, color-mix(in srgb,var(--accent) 20%,transparent), transparent 60%),
      radial-gradient(84% 74% at 100% 100%, rgba(118,168,255,.14), transparent 68%),
      linear-gradient(140deg, #100e10 0%, #15161f 46%, #10151d 100%);
  }
  .auth-shell--event-response{
    overflow-y:auto;
    overflow-x:hidden;
    align-items:flex-start;
  }
  [data-theme="light"] .auth-shell{
    --auth-ink:color-mix(in srgb,var(--text) 96%,black 4%);
    --auth-soft:color-mix(in srgb,var(--muted) 90%,black 10%);
    --auth-border:color-mix(in srgb,var(--border) 82%,rgba(18,22,36,.12));
    --auth-panel-bg:rgba(255,255,255,.86);
    --auth-panel-muted:rgba(255,255,255,.74);
    background:
      radial-gradient(94% 90% at 0 0, rgba(255,172,68,.18), transparent 62%),
      radial-gradient(78% 78% at 100% 100%, rgba(70,146,255,.16), transparent 70%),
      linear-gradient(135deg, #f6efe7 0%, #edf2fb 52%, #f5f8ff 100%);
  }
  [data-theme="light"] .auth-shell::before{
    border-color:rgba(18,22,36,.08);
    background:
      linear-gradient(90deg, rgba(18,22,36,.03) 1px, transparent 1px),
      linear-gradient(180deg, rgba(18,22,36,.03) 1px, transparent 1px);
    opacity:.8;
  }
  [data-theme="light"] .auth-shell::after{
    background:radial-gradient(circle, rgba(255,255,255,.72), rgba(255,255,255,0));
  }
  .auth-stage{
    width:100%;
    max-width:1024px;
    margin:0 auto;
    display:grid;
    grid-template-columns:minmax(300px,380px) minmax(0,620px);
    gap:24px;
    align-items:stretch;
    justify-content:center;
  }
  .auth-stage--public{
    max-width:1084px;
    grid-template-columns:minmax(300px,380px) minmax(0,680px);
  }
  .auth-shell--event-response .auth-stage--public{
    max-width:1040px;
    grid-template-columns:minmax(280px,340px) minmax(0,620px);
    align-items:stretch;
  }
  .auth-shell--event-response .auth-stage--public > .auth-poster,
  .auth-shell--event-response .auth-stage--public > .auth-panel{
    height:100%;
  }
  .auth-poster,
  .auth-panel{
    position:relative;
    border:1px solid var(--auth-border);
    border-radius:30px;
    box-shadow:0 30px 70px rgba(4,8,16,.28);
    backdrop-filter:blur(20px);
  }
  .auth-poster{
    overflow:hidden;
    padding:32px;
    display:flex;
    flex-direction:column;
    gap:24px;
    color:var(--auth-ink);
    background:
      radial-gradient(120% 90% at 100% 0, color-mix(in srgb,var(--accent) 18%,transparent), transparent 56%),
      linear-gradient(155deg, rgba(18,22,36,.82) 0%, rgba(27,21,18,.94) 100%);
  }
  .auth-poster::before{
    content:'';
    position:absolute;
    inset:20px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    pointer-events:none;
  }
  [data-theme="light"] .auth-poster{
    background:
      radial-gradient(120% 90% at 100% 0, rgba(255,172,68,.26), transparent 56%),
      linear-gradient(155deg, rgba(255,252,247,.96) 0%, rgba(241,246,255,.94) 100%);
  }
  [data-theme="light"] .auth-poster::before{
    border-color:rgba(18,22,36,.08);
  }
  .auth-poster__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
  }
  .auth-poster__mark{
    width:86px;
    height:86px;
    display:grid;
    place-items:center;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.12);
    background:
      linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
      rgba(10,14,24,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 34px rgba(0,0,0,.26);
    color:#fff;
  }
  [data-theme="light"] .auth-poster__mark{
    border-color:rgba(18,22,36,.08);
    background:
      linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.54)),
      rgba(255,255,255,.72);
    color:var(--text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 18px 34px rgba(41,59,99,.12);
  }
  .auth-poster__mark img{
    max-width:48px;
    max-height:48px;
    width:auto;
    height:auto;
  }
  .auth-poster__mark .icon{
    width:34px;
    height:34px;
    opacity:1;
  }
  .auth-poster__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.06);
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  [data-theme="light"] .auth-poster__eyebrow{
    border-color:rgba(18,22,36,.08);
    background:rgba(255,255,255,.62);
  }
  .auth-poster__headline{
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:28rem;
  }
  .auth-poster__title-row{
    display:flex;
    align-items:flex-end;
    gap:12px;
    flex-wrap:wrap;
  }
  .auth-poster__title,
  .auth-panel__eyebrow{
    margin:0;
  }
  .auth-poster__title{
    font:700 clamp(24px, 3vw, 30px)/.98 "Noto Sans", sans-serif;
    letter-spacing:-.05em;
    max-width:10ch;
  }
  .auth-poster__title-badge{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 84%,white 16%), color-mix(in srgb,var(--accent-2) 70%,white 20%));
    color:#111;
    font-size:11px;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    box-shadow:0 16px 28px rgba(0,0,0,.22);
  }
  [data-theme="light"] .auth-poster__title-badge{
    border-color:rgba(18,22,36,.08);
  }
  .auth-panel__title{
    margin:0;
    padding:2px 0 0;
    font:700 clamp(24px, 3vw, 30px)/1.02 "Noto Sans", sans-serif;
    letter-spacing:-.05em;
  }
  .auth-poster__text,
  .auth-panel__copy{
    margin:0;
    color:var(--auth-soft);
    font-size:14px;
    line-height:1.72;
  }
  .auth-poster__grid{
    margin-top:auto;
    display:grid;
    gap:12px;
  }
  .auth-poster__card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:14px;
    align-items:flex-start;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
      rgba(10,14,24,.28);
  }
  [data-theme="light"] .auth-poster__card{
    border-color:rgba(18,22,36,.08);
    background:
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.58)),
      rgba(255,255,255,.62);
  }
  .auth-poster__card-index{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:34px;
    height:34px;
    border-radius:12px;
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 88%,white 12%), color-mix(in srgb,var(--accent-2) 72%,white 20%));
    color:#111;
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
  }
  .auth-poster__card-copy{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .auth-poster__card-copy strong{
    font-size:14px;
    line-height:1.45;
    color:var(--auth-ink);
  }
  .auth-poster__card-copy span{
    color:var(--auth-soft);
    font-size:12px;
    line-height:1.58;
  }
  .auth-panel{
    overflow:hidden;
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:20px;
    color:var(--auth-ink);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
      var(--auth-panel-bg);
  }
  .auth-panel::before{
    content:'';
    position:absolute;
    inset:0 0 auto 0;
    height:8px;
    background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 72%,white 28%), color-mix(in srgb,var(--accent-2) 78%,white 22%));
  }
  [data-theme="light"] .auth-panel{
    box-shadow:0 28px 68px rgba(46,63,104,.12);
  }
  .auth-panel__masthead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
  }
  .auth-panel__intro{
    display:flex;
    flex-direction:column;
    gap:12px;
    min-width:0;
  }
  .auth-panel__eyebrow{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:8px 12px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 34%,var(--auth-border));
    background:var(--auth-accent-soft);
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .auth-panel__seal{
    flex:0 0 auto;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:20px;
    border:1px solid color-mix(in srgb,var(--accent) 26%,var(--auth-border));
    background:
      linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02)),
      color-mix(in srgb,var(--panel) 68%,var(--panel-2));
  }
  .auth-panel__seal .icon{
    width:28px;
    height:28px;
    opacity:1;
  }
  .auth-ribbon{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:14px 0 2px;
    border-top:1px solid color-mix(in srgb,var(--border) 58%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--border) 44%,transparent);
  }
  .auth-ribbon__item{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:7px 12px;
    border-radius:999px;
    border:1px dashed color-mix(in srgb,var(--accent) 34%,var(--auth-border));
    background:color-mix(in srgb,var(--panel) 64%,var(--panel-2));
    font-size:12px;
    font-weight:600;
    line-height:1.3;
  }
  .auth-panel__body,
  .auth-form-stack{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .auth-panel--event-response{
    padding:18px 20px 20px;
    gap:12px;
  }
  .auth-panel--event-response .auth-panel__masthead{
    gap:14px;
  }
  .auth-panel--event-response .auth-panel__intro{
    gap:8px;
  }
  .auth-panel--event-response .auth-panel__copy{
    gap:8px;
  }
  .auth-panel--event-response .auth-panel__copy p{
    line-height:1.58;
  }
  .auth-form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:14px;
    align-items:start;
  }
  .auth-panel .field{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .auth-panel .field label{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--auth-soft);
  }
  .auth-panel input,
  .auth-panel textarea,
  .auth-panel select{
    min-height:48px;
    border-radius:var(--radius-large);
    border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
    background:var(--auth-panel-muted);
  }
  .auth-panel textarea{
    min-height:110px;
  }
  .auth-panel--event-response textarea{
    min-height:72px;
  }
  .auth-note{
    padding:14px 16px;
    border-left:4px solid color-mix(in srgb,var(--accent) 74%,white 26%);
    border-radius:18px;
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 10%,transparent), transparent 100%),
      color-mix(in srgb,var(--panel) 66%,var(--panel-2));
    font-size:13px;
    line-height:1.64;
    color:var(--auth-soft);
  }
  .auth-action-row{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  .auth-action-row .btn{
    min-height:44px;
    border-radius:14px;
  }
  .auth-panel .btn.primary{
    box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 22%,rgba(0,0,0,.2));
  }
  .auth-state-list{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .auth-state-list--event-response{
    gap:10px;
  }
  .auth-state-card{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:18px 20px;
    border-radius:22px;
    border:1px solid color-mix(in srgb,var(--border) 74%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .auth-state-card--event-hero,
  .auth-state-card--event-reschedule{
    gap:8px;
    padding:14px 16px 16px;
    border-radius:20px;
  }
  .auth-state-card--accent{
    border-color:color-mix(in srgb,var(--accent) 34%,var(--border));
    background:
      radial-gradient(120% 90% at 100% 0, color-mix(in srgb,var(--accent) 16%,transparent), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .auth-state-card--danger{
    border-color:color-mix(in srgb, var(--bad) 32%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bad) 12%, transparent), color-mix(in srgb, var(--bad) 4%, transparent)),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .auth-state-card--success{
    border-color:color-mix(in srgb, var(--good) 32%, transparent);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--good) 12%, transparent), color-mix(in srgb, var(--good) 4%, transparent)),
      color-mix(in srgb,var(--panel) 72%,var(--panel-2));
  }
  .auth-state-card__head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
  }
  .auth-state-card__copy{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .auth-state-card__copy strong{
    font-size:15px;
    line-height:1.46;
  }
  .auth-state-card__copy span{
    font-size:13px;
    line-height:1.6;
    color:var(--auth-soft);
  }
  .auth-badge-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .auth-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--accent) 24%,var(--auth-border));
    background:color-mix(in srgb,var(--panel) 66%,var(--panel-2));
    font-size:12px;
    line-height:1.25;
    color:var(--auth-ink);
  }
  .auth-detail-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:10px;
    align-items:start;
  }
  .auth-detail{
    display:flex;
    flex-direction:column;
    gap:5px;
    padding:12px 14px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
    background:color-mix(in srgb,var(--panel) 68%,var(--panel-2));
  }
  .auth-detail span{
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--auth-soft);
  }
  .auth-detail strong{
    font-size:14px;
    line-height:1.46;
  }
  .auth-response-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .auth-response-grid--event-response{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    align-items:start;
  }
  .auth-form-stack--event-response{
    gap:10px;
  }
  .auth-form-grid--event-response{
    grid-template-columns:minmax(220px,240px) minmax(0,1fr);
    gap:10px 12px;
  }
  .field--event-response{
    gap:6px;
  }
  .field--event-response-note{
    min-width:0;
  }
  .auth-alert{
    padding:12px 14px;
    border-radius:18px;
    border:1px solid color-mix(in srgb,var(--border) 72%,transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
      color-mix(in srgb,var(--panel) 68%,var(--panel-2));
    font-size:14px;
    line-height:1.55;
    color:var(--auth-ink);
  }
  .auth-alert.auth-error{
    border-color:rgba(231,76,60,.34);
    background:
      linear-gradient(180deg, rgba(231,76,60,.14), rgba(231,76,60,.04)),
      color-mix(in srgb,var(--panel) 68%,var(--panel-2));
    color:var(--danger,#e74c3c);
  }
  .auth-alert.auth-success{
    border-color:rgba(46,204,113,.34);
    background:
      linear-gradient(180deg, rgba(46,204,113,.14), rgba(46,204,113,.04)),
      color-mix(in srgb,var(--panel) 68%,var(--panel-2));
    color:var(--success,#27ae60);
  }
  .auth-highlight{
    padding:15px 16px;
    border-radius:20px;
    border:1px solid color-mix(in srgb,var(--accent) 22%,var(--auth-border));
    background:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 10%,transparent), transparent 100%),
      color-mix(in srgb,var(--panel) 66%,var(--panel-2));
  }
  .auth-highlight strong{
    display:block;
    margin-bottom:5px;
    font-size:14px;
    line-height:1.45;
  }
  .auth-highlight span,
  .auth-description{
    color:var(--auth-soft);
    font-size:13px;
    line-height:1.62;
  }
  .auth-description{
    margin:0;
  }
  .auth-secondary-link,
  .auth-inline-link a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:color-mix(in srgb,var(--accent) 80%,white 20%);
    text-decoration:none;
    font-weight:600;
  }
  .auth-secondary-link{
    font-size:14px;
  }
  .auth-inline-link{
    margin-top:6px;
  }
  .auth-inline-link a{
    font-size:13px;
  }
  .auth-secondary-link:hover,
  .auth-inline-link a:hover{
    text-decoration:underline;
  }
  @media (max-width:960px){
    .auth-shell{
      align-items:flex-start;
    }
    .auth-stage,
    .auth-stage--public{
      grid-template-columns:1fr;
    }
    .auth-shell--event-response .auth-stage--public{
      grid-template-columns:1fr;
    }
    /* Auf Mobile zuerst das Login-Formular zeigen, damit Email/Passwort/Anmelden
       above the fold liegen — der Marketing-„Poster"-Block rutscht darunter. */
    .auth-shell--login .auth-stage > .auth-panel{order:0}
    .auth-shell--login .auth-stage > .auth-poster{order:1}
    .auth-poster,
    .auth-panel{
      padding:24px;
    }
    .auth-panel--event-response{
      padding:22px;
    }
    .auth-form-grid--event-response{
      grid-template-columns:1fr;
    }
    .auth-shell::before{
      inset:16px;
    }
    .auth-response-grid{
      grid-template-columns:1fr;
    }
  }
  @media (max-width:720px){
    .auth-panel__masthead{
      flex-direction:column;
    }
    .auth-panel__seal{
      width:52px;
      height:52px;
    }
  }
  @media (max-width:640px){
    .auth-shell{
      padding:18px 14px;
    }
    .auth-shell::before{
      inset:12px;
      border-radius:24px;
    }
    .auth-poster,
    .auth-panel{
      border-radius:24px;
      padding:20px;
    }
    .auth-panel--event-response{
      padding:18px;
    }
    .auth-poster__title,
    .auth-panel__title{
      font-size:30px;
    }
    .auth-poster__title-row{
      gap:10px;
    }
    .auth-poster__title-badge{
      min-height:30px;
      padding:6px 11px;
      font-size:10px;
    }
    .auth-form-grid,
    .auth-detail-list{
      grid-template-columns:1fr;
    }
    .auth-state-card--event-hero,
    .auth-state-card--event-reschedule{
      padding:14px 15px;
    }
    .auth-action-row{
      align-items:stretch;
    }
    .auth-action-row .btn{
      width:100%;
    }
    .auth-secondary-link{
      width:100%;
      justify-content:center;
    }
  }

  /* Loader */
  .loader{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); backdrop-filter:blur(4px); z-index:300}
  .spinner{display:inline-block;width:60px; height:60px; border-radius:50%; border:6px solid var(--border); border-top-color:var(--accent); animation:spin 1s linear infinite}
  .spinner-inline{width:28px; height:28px; border-width:4px}
  .spinner-inline--small{width:18px; height:18px; border-width:3px}
  .loading-indicator{display:inline-flex;align-items:center;gap:8px;line-height:1}
  .loading-indicator .spinner{flex-shrink:0}
  .loading-indicator-label{display:inline-block}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Utilities */
  .hide{display:none}
  .w-100{width:100%}
  .noselect{user-select:none}
  .right{display:flex; gap:8px; align-items:center; flex-wrap:nowrap; justify-content:flex-end; min-width:0}

  /* Mobile shell hardening */
  #sidebarHover{
    position:fixed;
    inset:0;
    background:rgba(5,10,20,.52);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:150;
  }
  #sidebarHover.show{
    opacity:1;
    pointer-events:auto;
  }

  @supports (height: 100dvh){
    :root{
      --app-viewport-height:100dvh;
    }
    .app,
    .app--auth{
      height:var(--app-viewport-height);
      min-height:var(--app-viewport-height);
    }
    .layout{
      min-height:calc(var(--app-viewport-height) - var(--app-header-height));
    }
    .sidebar{
      height:calc(var(--app-viewport-height) - var(--app-header-height));
    }
    main{
      height:calc(var(--app-viewport-height) - var(--app-header-height));
    }
    .tracking-page{
      min-height:var(--app-viewport-height);
    }
    .order-form-shell--form,
    .order-form-shell--list,
    .order-form-shell--designer,
    .settings-shell,
    .projects-shell,
    .workspace-shell,
    .vault-shell{
      height:calc(var(--app-viewport-height) - var(--app-header-height) - (var(--main-shell-padding) * 2));
      max-height:calc(var(--app-viewport-height) - var(--app-header-height) - (var(--main-shell-padding) * 2));
    }
    .order-form-sidebar{
      height:calc(var(--app-viewport-height) - var(--app-header-height) - (var(--main-shell-padding) * 2) - var(--order-form-shell-offset));
      max-height:calc(var(--app-viewport-height) - var(--app-header-height) - (var(--main-shell-padding) * 2) - var(--order-form-shell-offset));
    }
    .order-public-shell,
    .center{
      height:var(--app-viewport-height);
      min-height:var(--app-viewport-height);
    }
    .auth-shell{
      min-height:var(--app-viewport-height);
    }
    @media (max-width:1180px){
      .projects-shell,
      .workspace-shell,
      .vault-shell{
        height:auto;
        max-height:none;
        min-height:100%;
        overflow:visible;
      }
    }
    @media (max-width:1180px) and (min-width:761px){
      .workspace-shell.workspace-shell--nav,
      .workspace-shell.workspace-shell--nav.tasks-shell,
      .workspace-shell.workspace-shell--nav.projects-detail-shell,
      .workspace-shell.workspace-shell--nav.analytics-workspace{
        height:calc(var(--app-viewport-height) - var(--app-header-height) - (var(--main-shell-padding) * 2));
        max-height:calc(var(--app-viewport-height) - var(--app-header-height) - (var(--main-shell-padding) * 2));
        min-height:0;
        overflow:hidden;
      }
    }
    @media (max-width:1080px){
      .settings-shell{
        height:auto;
        max-height:none;
        min-height:100%;
        overflow:visible;
      }
    }
    @media (max-width:960px){
      .order-form-shell--form,
      .order-form-shell--list,
      .order-form-shell--designer{
        height:auto;
        max-height:none;
        min-height:100%;
      }
      .order-form-sidebar{
        height:auto;
        max-height:none;
      }
    }
  }

  @media (max-width:960px){
    :root{
      --main-shell-padding:16px;
    }
    header{
      grid-template-columns:minmax(0,1fr) auto;
      align-items:center;
      gap:6px;
      /* Header schlanker — minimaler Vertikal-Padding plus row-gap 2px:
         44 px Buttons + 2 + 38 px Search + 4 padding ≈ 88 px statt zuvor 105.
         min-height auf 0 weil min-height:64px (Desktop) sonst noch zog. */
      padding-top:calc(2px + var(--safe-area-top));
      padding-bottom:2px;
      row-gap:2px;
      min-height:0;
    }
    .brand{
      min-width:0;
    }
    .brand img{
      max-height:24px;
    }
    .search-wrap{
      grid-column:1 / -1;
      order:3;
      width:100%;
    }
    .search{
      width:100%;
      max-width:none;
    }
    .search input{
      /* 38 px ist immer noch Tap-tauglich (Tap-Area faellt in den input ein,
         der Container hat 44+ px Wirk-Hoehe inkl. Border/Padding der Search) */
      min-height:38px;
    }
    .search-results{
      max-height:min(60vh, calc(var(--app-viewport-height) - var(--app-header-height) - 26px));
    }
    .layout{
      position:relative;
      min-height:0;
    }
    .sidebar{
      width:min(82vw,320px);
      max-width:320px;
      position:fixed;
      left:0;
      top:var(--app-header-height);
      bottom:0;
      height:auto;
      max-height:none;
      padding:14px 12px calc(16px + var(--safe-area-bottom));
      transform:translateX(0);
      box-shadow:0 24px 70px rgba(0,0,0,.45);
      transition:transform .22s ease, box-shadow .22s ease;
      z-index:170;
      overscroll-behavior:contain;
    }
    .sidebar.collapsed{
      width:min(82vw,320px);
      max-width:320px;
      padding:14px 12px calc(16px + var(--safe-area-bottom));
      border-right:1px solid var(--border);
      overflow:auto;
      transform:translateX(calc(-100% - 18px));
      box-shadow:none;
    }
    .right{flex-wrap:nowrap}
    .realtime-status{white-space:nowrap}
    .right .avatar,
    .right .muted-small{
      display:none;
    }
    .notif-popup{
      left:12px;
      right:12px;
      top:calc(var(--app-header-height) + 8px);
      width:auto;
      max-height:calc(var(--app-viewport-height) - var(--app-header-height) - 20px);
    }
    main{
      padding-top:12px;
      scrollbar-gutter:auto;
    }
    body.sidebar-open{
      overflow:hidden;
    }
    body.sidebar-open main{
      pointer-events:none;
    }
  }

  @media (max-width:760px){
    :root{
      --main-shell-padding:14px;
    }
    .row{
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .row > *{
      min-width:0;
      max-width:100%;
    }
    .settings-section-actions,
    .settings-split-actions,
    .settings-inline-stats,
    .workspace-panel__actions,
    .projects-detail-actions,
    .events-panel__side,
    .modal-action-row,
    .modal-action-row--end,
    .nb-access-actions,
    .file-drop-zone__toolbar,
    .settings-instance-actions,
    .automation-status-rule-card__actions{
      width:100%;
      justify-content:flex-start;
    }
    .settings-code-card,
    .settings-status-row,
    .settings-template-summary,
    .settings-mapping-card__head,
    .settings-editor-card__head,
    .settings-editor-card__actions,
    .automation-task-row__header{
      flex-direction:column;
      align-items:stretch;
    }
    .app{
      grid-template-rows:auto 1fr;
    }
    header{
      gap:6px;
      padding-right:calc(12px + var(--safe-area-right));
      padding-left:calc(12px + var(--safe-area-left));
    }
    .brand img{
      max-height:24px;
    }
    /* Touch-Targets gem. Apple HIG / Android-Guidelines: min 44x44 px.
       Vorher 36x36 → schwer treffbar fuer den Daumen. */
    header .btn,
    header button{
      min-height:44px;
      min-width:44px;
      padding:8px 10px;
    }
    header .btn .icon,
    header button .icon{
      width:20px;
      height:20px;
    }
    header .search input{
      /* Header-Search-Eingabefeld auf 38 px — siehe Header-Hoehe-Begruendung
         im 960px-Block. */
      min-height:38px;
    }
    header .realtime-status,
    .header-logout-text{
      display:none;
    }
    .right{
      grid-column:auto;
      justify-self:end;
      justify-content:flex-end;
      gap:4px;
    }
    .btn,
    button,
    nav a,
    .settings-nav-btn,
    .analytics-segmented-button,
    .component-tab-btn,
    .order-form-step-summary{
      min-height:44px;
    }
    .card,
    .workspace-panel,
    .workspace-subsection,
    .workspace-entity-card,
    .settings-surface,
    .order-form-card{
      border-radius:18px;
    }
    .modal{
      padding:calc(10px + var(--safe-area-top)) calc(10px + var(--safe-area-right)) calc(10px + var(--safe-area-bottom)) calc(10px + var(--safe-area-left));
      align-items:flex-end;
    }
    .modal .box,
    .modal .box.box--preview{
      width:100%;
      max-width:none;
      max-height:calc(var(--app-viewport-height) - 20px - var(--safe-area-top) - var(--safe-area-bottom));
      padding:18px;
      border-radius:22px 22px 16px 16px;
    }
    .preview-content,
    .pdf-container{
      max-height:calc(var(--app-viewport-height) - 240px);
    }
    .preview-browser-frame,
    .box--preview .preview-browser-frame{
      min-height:calc(var(--app-viewport-height) - 280px);
      height:calc(var(--app-viewport-height) - 280px);
    }
    .table-wrap,
    .analytics-table-wrap,
    .order-form-component-table,
    .scroll-list,
    .component-tab-nav,
    .modal-tabs{
      -webkit-overflow-scrolling:touch;
    }
    .component-tab-nav,
    .modal-tabs{
      overflow:auto;
      padding-bottom:2px;
    }
    .component-tab-btn{
      white-space:nowrap;
    }
    .file-item,
    .notif-item{
      flex-direction:column;
      align-items:stretch;
    }
    .file-item-side,
    .notif-item .notif-actions{
      width:100%;
      align-items:flex-start;
    }
    .file-item-actions-row,
    .notif-item .notif-actions{
      justify-content:flex-start;
      flex-wrap:wrap;
    }
  }

  /* iOS bzw. mobile Browser zoomen, sobald ein Input mit font-size < 16px Fokus bekommt – Touch-Geräte und schmale Viewports immer auf 16px hochziehen */
  @media (hover: none) and (pointer: coarse){
    input,
    select,
    textarea{
      font-size:16px;
    }
  }
  @media (max-width:640px){
    input,
    select,
    textarea{
      font-size:16px;
    }
    .order-public-content,
    .order-public-content > #orderFormView,
    .order-form-shell,
    .order-form-stack,
    .order-form-layout,
    .order-form-card,
    .order-form-main,
    .order-form-section,
    .order-form-grid,
    .order-form-grid > *,
    .order-form-group,
    .order-form-group-body,
    .order-form-group-entry,
    .order-form-group-entry > *,
    .order-form-input-with-unit,
    .order-form-inline-options,
    .order-form-signature,
    .order-form-signature-actions,
    .order-form-group-controls,
    .order-upload,
    .order-upload-files,
    .order-upload-file,
    .order-upload-file > *,
    .order-form-component-input,
    .order-form-component-display{
      min-width:0;
      max-width:100%;
    }
    .order-form-grid .field,
    .order-form-group-entry .field,
    .order-form-section .field{
      min-width:0 !important;
      max-width:100%;
      width:100%;
    }
    .order-form-input-with-unit{
      flex-wrap:wrap;
      align-items:stretch;
    }
    .order-form-input-with-unit input,
    .order-form-input-with-unit select,
    .order-form-input-with-unit .order-form-autofill-text,
    .order-form-component-display,
    .order-upload-dropzone{
      width:100%;
      min-width:0;
      max-width:100%;
    }
    .order-form-unit{
      white-space:normal;
    }
    .order-upload-file{
      flex-wrap:wrap;
      align-items:flex-start;
    }
    .order-upload-file .muted-small{
      margin-left:0;
    }
    .search-results{
      left:0;
      right:0;
      top:48px;
      border-radius:14px;
    }
    .workspace-card-grid,
    .file-gallery{
      grid-template-columns:1fr;
    }
    .order-public-content{
      padding:14px;
    }
    .order-form-shell{
      gap:12px;
    }
    .order-form-card{
      padding:16px;
      border-radius:18px;
    }
    .order-form-grid{
      grid-template-columns:1fr;
    }
    .order-form-step-header{
      align-items:stretch;
    }
    .order-form-step-progress{
      justify-content:flex-start;
      flex-wrap:wrap;
    }
    .order-form-section-header .muted-small{
      max-width:none;
    }
    .order-form-actions{
      flex-direction:column-reverse;
      align-items:stretch;
    }
    .order-form-actions .btn{
      width:100%;
      min-width:0;
    }
    .settings-section-actions .btn,
    .settings-split-actions .btn,
    .workspace-panel__actions .btn,
    .projects-detail-actions .btn,
    .events-panel__side .btn,
    .modal-action-row .btn,
    .file-drop-zone__toolbar .btn,
    .settings-instance-actions .btn,
    .automation-status-rule-card__actions .btn{
      width:100%;
    }
    .workspace-entity-card__meta,
    .workspace-panel__actions,
    .settings-section-actions,
    .settings-inline-stats,
    .inbox-footer__actions{
      width:100%;
    }
    .workspace-entity-card__meta span{
      width:100%;
      justify-content:flex-start;
    }
  }

  /* Sicherheitsnetz fuer schmale Mobile-Viewports: nichts darf horizontal aus dem
     Viewport laufen und sticky-Toolbars duerfen die Hauptansicht nicht ueberdecken. */
  @media (max-width:480px){
    html,body{
      max-width:100vw;
      overflow-x:hidden;
    }
    .app{
      height:100dvh;
      max-width:100vw;
      overflow-x:hidden;
    }
    main{
      height:calc(100dvh - var(--app-header-height));
    }
    :root{
      --main-shell-padding:10px;
    }
    main{
      padding-left:max(10px, var(--safe-area-left));
      padding-right:max(10px, var(--safe-area-right));
    }
    main > #view,
    main > #view > *{
      max-width:100%;
      min-width:0;
    }
    .card,
    .workspace-panel,
    .workspace-subsection,
    .workspace-entity-card,
    .settings-surface,
    .order-form-card,
    .order-form-shell,
    .modal .box,
    .modal .box.box--preview{
      max-width:100%;
      min-width:0;
    }
    .row,
    .form-row,
    .field-row,
    .grid,
    .grid-2,
    .grid-3,
    .actions{
      flex-wrap:wrap;
      grid-template-columns:1fr;
      min-width:0;
    }
    .row > *,
    .form-row > *,
    .field-row > *,
    .actions > *{
      min-width:0;
      max-width:100%;
    }
    .table-wrap,
    .analytics-table-wrap,
    .order-form-component-table,
    .scroll-list,
    .component-tab-nav,
    .modal-tabs{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    table{
      max-width:100%;
    }
    img,
    iframe,
    video,
    canvas,
    svg{
      max-width:100%;
      height:auto;
    }
    .technical-singleline-preview,
    .technical-drawing-preview,
    .technical-drawing-preview--interactive{
      min-width:0;
    }
    .technical-singleline-preview-shell,
    .technical-drawing-preview-shell{
      overflow-x:auto;
    }
    /* Sidebar nimmt im offenen Zustand nicht mehr 82vw, sondern den vollen Viewport ein,
       damit Inhalte nie unter dem Drawer haengen bleiben. */
    .sidebar{
      width:min(94vw,320px);
    }
    .sidebar.collapsed{
      width:min(94vw,320px);
    }
    /* Modale Dialoge sollen die volle Breite minus sicherer Margin nutzen */
    .modal .box{
      padding:14px;
    }
    .header-search-toggle,
    .search-wrap{
      max-width:100%;
    }
    /* List-/Workspace-Tables: Karten statt Spalten so weit moeglich */
    .lead-list-row{
      flex-direction:column;
      align-items:stretch;
    }
    /* Inline-gesetzte px-Mindestbreiten auf .field innerhalb der Modal-Rows
       neutralisieren, damit Felder im 375px-Viewport untereinander brechen
       statt horizontal zu scrollen. */
    .modal .box .row > .field,
    .modal .box .form-row > .field,
    .modal .box .grid > .field{
      min-width:0 !important;
      flex-basis:100% !important;
    }
    /* Stepper-Buttons im Lexware-Modal brauchen ebenfalls eine 100%-Breite,
       damit sie nicht horizontal abgeschnitten werden. */
    .stepper-bar{
      flex-wrap:wrap;
    }
  }

  .vault-shell{
    width:100%;
    max-width:none;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    overflow:hidden;
  }
  .vault-shell .settings-surface{
    padding:20px;
    border-radius:22px;
    background:var(--surface-card-bg);
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    box-shadow:var(--surface-card-shadow);
    overflow:visible;
  }
  .vault-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"copy actions";
    align-items:start;
    gap:10px 12px;
    overflow:visible;
    background:
      radial-gradient(120% 110% at 0 0, color-mix(in srgb, var(--accent) 16%, transparent), transparent 54%),
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 54%),
      color-mix(in srgb,var(--panel) 88%,var(--panel-2));
  }
  [data-theme="light"] .vault-toolbar{
    background:
      radial-gradient(120% 110% at 0 0, rgba(0,119,255,.14), transparent 54%),
      linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0) 54%),
      color-mix(in srgb,var(--panel) 88%,var(--panel-2));
  }
  .vault-toolbar__copy{grid-area:copy;display:flex;flex-direction:column;gap:6px;min-width:0}
  .vault-toolbar-title{
    margin:0;
    max-width:none;
    font:700 clamp(21px,2vw,25px)/1.08 "Noto Sans", sans-serif;
    letter-spacing:-.03em;
  }
  .vault-toolbar-text{
    margin:0;
    max-width:58ch;
    font-size:14px;
    line-height:1.5;
    color:var(--muted);
  }
  .vault-toolbar__meta{grid-area:meta;min-width:0}
  .vault-toolbar__actions{grid-area:actions;justify-content:flex-end;align-self:start;min-width:0}
  .vault-toolbar__meta,
  .vault-toolbar__actions,
  .vault-results-head__controls{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;align-content:flex-start}
  .vault-stat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:34px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
    background:color-mix(in srgb,var(--card) 92%,transparent);
    color:var(--muted);
    font-size:14px;
    line-height:1.4;
  }
  .vault-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:14px;
    line-height:1.4;
  }
  .vault-pill + .vault-pill{
    position:relative;
    padding-left:12px;
  }
  .vault-pill + .vault-pill::before{
    content:'·';
    position:absolute;
    left:3px;
    color:var(--muted);
  }
  .vault-pill--info{color:var(--muted)}
  .vault-layout{
    display:flex;
    flex:1 1 auto;
    width:100%;
    min-height:0;
  }
  .vault-browser{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    width:100%;
    gap:12px;
    min-height:0;
    overflow:hidden;
  }
  .vault-browser.is-folder-dragover{
    border-color:color-mix(in srgb,var(--accent) 46%,var(--border));
    background:color-mix(in srgb,var(--accent) 3%,var(--panel));
  }
  .vault-results-list{display:flex;flex-direction:column;gap:8px}
  .vault-results-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:flex-start;
    gap:12px;
    min-width:0;
  }
  .vault-results-head__copy{display:flex;flex-direction:column;gap:8px;min-width:0}
  .vault-results-head h3{margin:0;font-size:20px;line-height:1.14;letter-spacing:-.02em}
  .vault-results-head__status{display:flex;align-items:center;gap:8px;min-width:0}
  .vault-results-head p{margin:4px 0 0;color:var(--muted);line-height:1.5;font-size:14px}
  .vault-results-head__spinner{display:inline-flex;align-items:center;flex-shrink:0;margin-top:4px}
  .vault-results-head__controls{justify-content:flex-end;align-items:flex-start}
  .vault-results-head__search{width:min(100%,280px);min-width:220px}
  .vault-results-head__search input{width:100%}
  .vault-browser__breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .vault-breadcrumb{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--border) 84%,transparent);
    background:transparent;
    color:var(--text);
    font-size:14px;
    line-height:1.4;
    text-decoration:none;
    transition:border-color .16s ease, background .16s ease;
  }
  button.vault-breadcrumb{
    cursor:pointer;
  }
  button.vault-breadcrumb:hover,
  button.vault-breadcrumb:focus-visible,
  .vault-breadcrumb.is-folder-dragover{
    border-color:var(--surface-hover-border);
    background:var(--surface-hover-bg);
    outline:none;
  }
  .vault-breadcrumb--current{
    border-color:var(--surface-active-border);
    background:var(--surface-active-bg);
    color:var(--text);
  }
  .vault-breadcrumb__sep{
    color:var(--muted);
    font-size:14px;
    line-height:1;
  }
  .vault-browser__content{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0;
    overflow:auto;
    padding-right:4px;
    overscroll-behavior:contain;
  }
  .vault-explorer-section{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .vault-explorer-section__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
  }
  .vault-explorer-section__head h4{
    margin:0;
    font-size:14px;
    line-height:1.4;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .vault-explorer-section__head span{
    font-size:14px;
    color:var(--muted);
    line-height:1.4;
  }
  .vault-folder-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:8px;
  }
  .vault-folder-card{min-width:0}
  .vault-folder-card__button{
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    display:flex;
    align-items:flex-start;
    gap:10px;
    text-align:left;
    color:var(--text);
    transition:border-color .16s ease, background .16s ease;
  }
  .vault-folder-card__button[draggable="true"]{cursor:grab}
  .vault-folder-card__button.is-folder-dragging{opacity:.74}
  .vault-folder-card__button:hover,
  .vault-folder-card__button:focus-visible,
  .vault-folder-card__button.is-folder-dragover{
    border-color:var(--surface-hover-border);
    background:var(--surface-hover-bg);
    outline:none;
  }
  .vault-folder-card__icon{
    width:36px;
    height:32px;
    border-radius:11px;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(180deg, rgba(255,214,122,.3), rgba(230,154,35,.08)),
      color-mix(in srgb,var(--card) 90%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24),
      0 8px 20px rgba(10,16,28,.08);
  }
  .vault-folder-card__icon::before{
    content:'';
    position:absolute;
    left:5px;
    right:4px;
    top:11px;
    bottom:5px;
    border-radius:6px 8px 7px 7px;
    background:
      linear-gradient(180deg, #ffd56f, #e7a33a);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      0 1px 0 rgba(106,69,8,.18);
  }
  .vault-folder-card__icon::after{
    content:'';
    position:absolute;
    left:7px;
    top:7px;
    width:16px;
    height:7px;
    border-radius:6px 6px 3px 3px;
    background:
      linear-gradient(180deg, #ffe4a0, #f1bc59);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.36);
  }
  .vault-folder-card__copy{
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
  }
  .vault-folder-card__copy strong{
    font-size:14px;
    line-height:1.4;
    word-break:break-word;
  }
  .vault-folder-card__stats,
  .vault-folder-card__meta{
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
    word-break:break-word;
  }
  .vault-loading-indicator{
    display:flex;
    align-items:center;
    min-height:22px;
  }
  .vault-upload-status{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border-radius:var(--radius-large);
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
  }
  .vault-upload-status__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
  .vault-upload-status__headline{display:flex;align-items:center;min-width:0;font-size:14px;line-height:1.4}
  .vault-upload-status__head-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .vault-upload-status__copy{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .vault-upload-status__current{
    font-size:14px;
    line-height:1.45;
    color:var(--text);
    word-break:break-word;
  }
  .vault-upload-status__meta,
  .vault-upload-status__eta{
    font-size:14px;
    line-height:1.45;
    color:var(--muted);
  }
  .vault-upload-status__percent{
    font-size:17px;
    line-height:1;
    letter-spacing:-.02em;
  }
  .vault-upload-status__bar{
    width:100%;
    max-width:none;
  }
  .vault-inline-dropzone{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:11px 12px;
    border-radius:14px;
    border:1px dashed color-mix(in srgb,var(--border) 78%,transparent);
    background:transparent;
    transition:border-color .18s ease,background .18s ease,opacity .18s ease;
  }
  .vault-inline-dropzone strong{font-size:14px;line-height:1.4}
  .vault-inline-dropzone span{font-size:14px;line-height:1.45;color:var(--muted)}
  .vault-inline-dropzone.is-dragover{
    border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 6%,transparent);
  }
  .vault-inline-dropzone.is-folder-dragover{
    border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 6%,transparent);
  }
  .vault-inline-dropzone.is-uploading{
    opacity:.8;
    border-style:solid;
  }
  .vault-entry-card{
    padding:12px 14px;
    border-radius:var(--radius-large);
    border:1px solid var(--surface-soft-border);
    background:var(--surface-soft-bg);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px 10px;
    align-items:center;
  }
  .vault-entry-card__main{min-width:0}
  .vault-entry-card__identity{display:flex;gap:10px;align-items:flex-start;min-width:0}
  .vault-entry-card__copy{display:flex;flex-direction:column;gap:2px;min-width:0}
  .vault-entry-icon{
    width:34px;
    height:34px;
    border-radius:11px;
    flex-shrink:0;
    position:relative;
    overflow:hidden;
    background:
      linear-gradient(180deg, rgba(101,156,255,.2), rgba(101,156,255,.05)),
      color-mix(in srgb,var(--card) 90%,transparent);
    border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 8px 20px rgba(10,16,28,.08);
  }
  .vault-entry-icon::before{
    content:'';
    position:absolute;
    left:7px;
    right:7px;
    top:5px;
    bottom:5px;
    border-radius:7px;
    clip-path:polygon(0 0, 68% 0, 100% 30%, 100% 100%, 0 100%);
    background:
      linear-gradient(180deg, rgba(93,122,182,.26), rgba(93,122,182,.26)) center 45%/58% 1.4px no-repeat,
      linear-gradient(180deg, rgba(93,122,182,.22), rgba(93,122,182,.22)) center 60%/58% 1.4px no-repeat,
      linear-gradient(180deg, rgba(93,122,182,.18), rgba(93,122,182,.18)) center 75%/42% 1.4px no-repeat,
      linear-gradient(180deg, rgba(255,255,255,.96), rgba(232,238,249,.9));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      0 1px 0 rgba(36,58,98,.12);
  }
  .vault-entry-icon::after{
    content:'';
    position:absolute;
    top:5px;
    right:7px;
    width:10px;
    height:10px;
    clip-path:polygon(0 0, 100% 100%, 0 100%);
    background:linear-gradient(135deg, rgba(179,199,237,.98), rgba(243,247,255,.96));
    box-shadow:-1px 1px 0 rgba(91,118,169,.16);
  }
  .vault-entry-title{font-weight:700;font-size:14px;line-height:1.4}
  .vault-entry-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);font-size:14px;line-height:1.4;word-break:break-word}
  .vault-entry-meta{color:var(--muted);font-size:14px;line-height:1.45}
  .vault-entry-date{color:var(--muted);font-size:14px;line-height:1.45}
  .vault-entry-note{color:var(--text);font-size:14px;line-height:1.45}
  .vault-entry-card__side{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
  .vault-entry-card__badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .vault-entry-card__actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .vault-empty-state{
    padding:18px 16px;
    border-radius:var(--radius-large);
    border:1px dashed color-mix(in srgb,var(--border) 82%,transparent);
    background:var(--surface-soft-bg);
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .vault-empty-state h3{margin:0;font-size:18px}
  .vault-empty-state p{margin:0;color:var(--muted);line-height:1.5;font-size:14px}
  .vault-modal{display:flex;flex-direction:column;gap:14px}
  .vault-modal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vault-role-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
  .vault-role-checkbox{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-height:36px;
    padding:4px 0;
  }
  .vault-role-checkbox input{margin:2px 0 0}
  @media (max-width:1180px){
    .vault-shell{height:auto;max-height:none;overflow:visible}
    .vault-toolbar{
      grid-template-columns:1fr;
      grid-template-areas:
        "copy"
        "actions";
    }
    .vault-toolbar__actions{
      justify-content:flex-start;
    }
  }
  @media (max-width:1040px){
    .vault-results-head{grid-template-columns:1fr}
    .vault-results-head__controls{justify-content:flex-start}
  }
  @media (max-width:760px){
    .vault-toolbar__actions,
    .vault-entry-card,
    .vault-entry-card__identity,
    .vault-entry-card__side{
      width:100%;
    }
    .vault-entry-card,
    .vault-modal-grid{
      grid-template-columns:1fr;
    }
    .vault-entry-card__side,
    .vault-entry-card__badges,
    .vault-entry-card__actions{
      align-items:flex-start;
      justify-content:flex-start;
    }
    .vault-folder-grid{grid-template-columns:1fr}
    .vault-results-head__controls{
      width:100%;
      align-items:stretch;
    }
    .vault-results-head__search{
      width:100%;
      min-width:0;
    }
    .vault-toolbar__actions .btn,
    .vault-entry-card__actions .btn,
    .vault-results-head__controls .btn{
      flex:1 1 140px;
    }
  }

/* ---------- Command Launcher (Ctrl/Cmd+K) ---------- */

.command-launcher-overlay{
  position:fixed; inset:0;
  background:color-mix(in srgb, var(--bg) 65%, transparent);
  backdrop-filter:blur(6px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:88px 20px 20px;
  z-index:120;
}
.command-launcher-overlay.open{display:flex;}
body.command-launcher-open{overflow:hidden;}
.command-launcher-panel{
  width:min(640px, 100%);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.command-launcher-input-row{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.command-launcher-input{
  flex:1 1 auto;
  background:transparent;
  border:0;
  color:var(--fg);
  font-size:16px;
  outline:none;
}
.command-launcher-kbd,
.command-launcher-footer kbd{
  font-family:inherit;
  font-size:11px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:color-mix(in srgb, var(--panel-2) 60%, transparent);
  color:var(--muted);
}
.command-launcher-results{
  list-style:none;
  margin:0;
  padding:6px 0;
  max-height:50vh;
  overflow:auto;
}
.command-launcher-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 16px;
  cursor:pointer;
  border-left:3px solid transparent;
  transition:background-color .12s ease;
}
.command-launcher-item:hover{
  background:color-mix(in srgb, var(--panel-2) 50%, transparent);
}
.command-launcher-item.is-active{
  background:color-mix(in srgb, var(--accent, var(--brand, #ff8800)) 14%, transparent);
  border-left-color:var(--accent, var(--brand, #ff8800));
}
.command-launcher-label{
  flex:1 1 auto;
  font-weight:600;
}
.command-launcher-hint{
  color:var(--muted);
  font-size:13px;
}
.command-launcher-section{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:999px;
}
.command-launcher-empty{
  padding:18px 16px;
  text-align:center;
  color:var(--muted);
}
.command-launcher-footer{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 16px;
  border-top:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background:color-mix(in srgb, var(--panel-2) 40%, transparent);
}

/* ---------- Funnel Stage Cards ---------- */

.funnel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:14px;
}
.funnel-stage{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--radius-large);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.funnel-stage__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.funnel-stage__label{ font-weight:600; }
.funnel-stage__value{ font-size:20px; font-variant-numeric:tabular-nums; }
.funnel-stage__bar{
  height:6px;
  background:color-mix(in srgb, var(--border) 60%, transparent);
  border-radius:999px;
  overflow:hidden;
}
.funnel-stage__bar-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--accent, var(--brand, #ff8800)) 0%, color-mix(in srgb, var(--accent, var(--brand, #ff8800)) 65%, transparent) 100%);
  border-radius:inherit;
  transition:width .25s ease;
}
.funnel-stage__meta{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
}
.funnel-stage__hint{ margin:0; }

/* ---------- ApprovalQueue-spezifisch ---------- */

.approval-queue-page{ /* erbt vom .app-page Sockel */ }
.approval-queue-list-item{ /* erbt vom .app-list-item Sockel */ }
.approval-queue-detail{ /* erbt vom .app-detail Sockel */ }
.approval-queue-detail__body{
  font-size:13px;
  color:var(--text);
  line-height:1.5;
  white-space:pre-wrap;
  background:color-mix(in srgb,var(--accent) 4%, var(--surface));
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
}
.approval-queue-detail__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding-top:6px;
}

/* ---------- Netzbetreiber Inbox Suggestions ---------- */

.inbox-suggestion-actions{
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:flex-start;
}
.inbox-suggestion-actions .btn-suggestion{
  padding:4px 10px;
  font-size:12px;
  max-width:240px;
  text-align:left;
  white-space:normal;
  line-height:1.3;
}

/* ---------- Bulk Task Actions Dialog ---------- */

.bulk-task-dialog{ display:flex; flex-direction:column; gap:12px; max-height:70vh; }
.bulk-task-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bulk-task-toolbar input[type=search]{ flex:1 1 220px; min-width:0; }
.bulk-task-list{ list-style:none; padding:0; margin:0; overflow:auto; max-height:36vh; border:1px solid var(--border); border-radius:12px; }
.bulk-task-item{ border-bottom:1px solid color-mix(in srgb,var(--border) 60%, transparent); }
.bulk-task-item:last-child{ border-bottom:none; }
.bulk-task-item label{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; cursor:pointer; }
.bulk-task-meta{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; }
.bulk-task-action{ border:1px solid var(--border); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:6px; }
.bulk-task-action label{ display:flex; gap:8px; align-items:center; }
.bulk-task-footer{ display:flex; justify-content:flex-end; gap:8px; }

/* ---------- Project Share (Public View — Mailbox single-column) ---------- */

.app-page--single{ width:100%; max-width:760px; margin:24px auto; padding:0 16px; display:flex; flex-direction:column; gap:18px; flex:0 0 auto; }
.app-page--single .app-page__layout{ display:flex; flex-direction:column; gap:14px; }
.app-page--single .app-page__detail{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:24px; display:flex; flex-direction:column; gap:18px; overflow:visible; }
.app-page--single .mailbox-detail__header{ padding-bottom:14px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.app-page--single .mailbox-detail__subject{ margin:0; font-size:22px; font-weight:600; line-height:1.3; }
.app-page--single .mailbox-detail__meta{ font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.app-page--single .mailbox-detail__section{ display:flex; flex-direction:column; gap:10px; }
.app-page--single .mailbox-detail__section-title{ font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); color:var(--muted); font-weight:600; margin:0; }
.app-page--single .mailbox-detail__match{ border-radius:10px; border:1.5px solid var(--border); padding:12px 14px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.app-page--single .app-page__list--flush{ overflow:visible; padding:0; }
.app-page--single .mailbox-detail__match--ok{ border-color:color-mix(in srgb,#3bd671 60%, var(--border)); background:color-mix(in srgb,#3bd671 8%, transparent); }
.app-page--single .mailbox-detail__match--warn{ border-color:color-mix(in srgb,#f7b500 60%, var(--border)); background:color-mix(in srgb,#f7b500 8%, transparent); }
.app-page--single .mailbox-detail__match--muted{ border-color:var(--border); background:color-mix(in srgb,var(--muted) 6%, transparent); }
.app-page--single .app-detail__empty-state{ margin:0 auto; padding:20px 0; }
.app-page--single .app-page__footer{ text-align:center; font-size:12px; color:var(--muted); margin-top:4px; }

.app-list-item--readonly{ cursor:default; }
.app-list-item--readonly:hover{ border-color:var(--border); transform:none; }
.app-list-item--readonly .app-list-item__subject{ font-weight:600; }

/* ---------- Mailbox / E-Mail Posteingang ---------- */

.mailbox-page{ display:flex; flex-direction:column; gap:16px; width:100%; max-width:none; margin:0; height:100%; min-height:0; }
.app-page.emails-page > .app-page__header,
.mailbox-page__header{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.mailbox-page__tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.mailbox-page__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.mailbox-tab{ background:color-mix(in srgb,var(--surface) 80%, transparent); border:1px solid var(--border); border-radius:8px; padding:8px 18px; font-size:14px; color:var(--text); cursor:pointer; transition:all .15s ease; }
.mailbox-tab:hover{ border-color:var(--accent); color:#fff; }
.mailbox-tab.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mailbox-page__actions .btn{ border-radius:8px; }

.mailbox-page__filters{ display:flex; gap:8px; flex-wrap:wrap; padding:0; margin-top:-4px; }
.mailbox-filter-chip{ background:transparent; border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; color:var(--muted); transition:all .15s ease; }
.mailbox-filter-chip:hover{ border-color:var(--accent); color:var(--text); }
.mailbox-filter-chip.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.mailbox-filter-chip__count{ background:color-mix(in srgb,#000 25%, transparent); color:inherit; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; }

.mailbox-page__layout{ display:grid; grid-template-columns:minmax(320px, 420px) 1fr; grid-template-rows:minmax(0, 1fr); gap:14px; flex:1; min-height:0; }
.mailbox-page__list{ display:flex; flex-direction:column; gap:6px; overflow-x:hidden; overflow-y:auto; padding:2px 4px 2px 0; min-height:0; min-width:0; }
.mailbox-page__detail{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; min-height:0; display:flex; flex-direction:column; }

/* Einstellungen-Tab im E-Mail-Bereich: bündig zur Tab-/Filterleiste (kein app-detail-Inset),
   eigener Scrollbereich. Karten in einem responsiven auto-fit-Raster, das die volle Breite
   nutzt: zwei Karten (Verbindung+Status / Inbox+Status) liegen nebeneinander, eine einzelne
   Karte (Vorlagen) füllt die ganze Breite. Auf schmalen Screens einspaltig. */
.mailbox-settings-body{ display:grid; grid-template-columns:repeat(auto-fit, minmax(380px, 1fr)); align-items:start; align-content:start; gap:14px; flex:1; min-height:0; overflow-y:auto; padding:2px 4px 2px 0; }

.mailbox-list-item{ position:relative; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; padding:30px 14px 12px 14px; text-align:left; cursor:pointer; transition:padding-left .15s ease, background-color .12s ease, border-color .12s ease; display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; box-sizing:border-box; }
.mailbox-page__list.has-selection .mailbox-list-item{ padding-left:36px; }
.mailbox-list-item.is-checked{ background:var(--surface); border-color:var(--border); box-shadow:inset 3px 0 0 var(--accent); padding-left:36px; }
.mailbox-list-item.is-active.is-checked{ background:color-mix(in srgb,var(--accent) 12%, var(--surface)); border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent); }
.mailbox-list-item__checkbox{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:1; }
.mailbox-page__list.has-selection .mailbox-list-item__checkbox,
.mailbox-list-item.is-checked .mailbox-list-item__checkbox{ opacity:1; visibility:visible; }
.mailbox-list-item__checkbox-box{ width:16px; height:16px; border:1.5px solid var(--muted); border-radius:4px; background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; color:var(--accent); font-weight:700; }
.mailbox-list-item.is-checked .mailbox-list-item__checkbox-box{ background:var(--accent); border-color:var(--accent); color:#fff; }

.mailbox-bulk-bar{ display:none; align-items:center; gap:8px; padding:4px 10px; background:color-mix(in srgb,var(--accent) 10%, var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 50%, var(--border)); border-radius:8px; font-size:12px; box-sizing:border-box; line-height:1; }
.mailbox-bulk-bar.is-visible{ display:inline-flex; }
.mailbox-bulk-bar__count{ font-weight:600; color:var(--text); white-space:nowrap; }
.mailbox-bulk-bar__actions{ display:flex; gap:4px; }
.mailbox-bulk-bar .btn{ padding:0 8px; font-size:11px; height:20px; line-height:1; min-height:0; }
.mailbox-page__header{ align-items:center; }
.mailbox-list-item:hover{ border-color:var(--accent); transform:translateY(-1px); }
.mailbox-list-item.is-active{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface)); box-shadow:0 0 0 1px var(--accent); }
.mailbox-list-item__header{ position:absolute; top:8px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; }
.mailbox-list-item__row{ display:flex; align-items:center; gap:8px; min-width:0; }
.mailbox-list-item__row--left{ font-size:11px; justify-content:flex-start; }
.mailbox-list-item__row--right{ font-size:11px; justify-content:flex-end; gap:6px; }
.mailbox-list-item__subject{ font-weight:600; font-size:14px; line-height:1.3; color:var(--text); display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.mailbox-list-item__from{ font-size:12px; color:var(--muted); text-align:left; display:block; width:100%; align-self:stretch; }
.mailbox-list-item__date{ color:var(--muted); }
.mailbox-list-item__attachments{ color:var(--muted); }

.mailbox-list-empty{ padding:40px 20px; text-align:center; color:var(--muted); font-size:14px; background:var(--surface); border:1.5px dashed var(--border); border-radius:12px; }
.mailbox-list-more{ padding:12px 14px; text-align:center; color:var(--muted); font-size:12px; }

.mailbox-source{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.mailbox-source--customer{ background:color-mix(in srgb,#5b8def 18%, transparent); color:#5b8def; }
.mailbox-source--netzbetreiber{ background:color-mix(in srgb,#f2994a 18%, transparent); color:#f2994a; }

.mailbox-status{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600; }
.mailbox-status--ok{ background:color-mix(in srgb,#3bd671 18%, transparent); color:#28a745; }
.mailbox-status--warn{ background:color-mix(in srgb,#f7b500 18%, transparent); color:#b88300; }
.mailbox-status--danger{ background:color-mix(in srgb,#ff6b6b 18%, transparent); color:#d04545; }
.mailbox-status--muted{ background:color-mix(in srgb,var(--muted) 14%, transparent); color:var(--muted); }

.mailbox-detail{ padding:24px; display:flex; flex-direction:column; gap:18px; flex:1; min-height:0; overflow-y:auto; }
.mailbox-detail--empty{ display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.mailbox-detail__empty-state{ text-align:center; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mailbox-detail__empty-icon{
  display:inline-block;
  width:64px; height:64px;
  background:linear-gradient(135deg,#5a1300 0%,#c93300 22%,#ffba4d 42%,#a07a7d 50%,#4a7faa 58%,#14324a 78%,#08182a 100%);
  background-size:200% 200%;
  background-position:0% 0%;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>') center/contain no-repeat;
  font-size:0;
  opacity:.9;
  animation:mailboxEmptyIconSweep 2s linear 0.4s both;
}
@keyframes mailboxEmptyIconSweep{
  0%{ background-position:0% 0%; }
  67%{ background-position:100% 100%; }
  100%{ background-position:50% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .mailbox-detail__empty-icon{ animation:none; background-position:50% 50%; }
}
.mailbox-detail__empty-title{ font-weight:600; font-size:16px; margin-bottom:6px; }
.mailbox-detail__empty-text{ color:var(--muted); font-size:13px; line-height:1.5; }
.mailbox-detail__header{ display:flex; flex-direction:column; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.mailbox-detail__source-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.mailbox-detail__date{ margin-left:auto; }
.mailbox-detail__subject{ margin:0; font-size:20px; font-weight:600; line-height:1.3; }
.mailbox-detail__meta{ font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.mailbox-detail__meta-label{ color:var(--text); font-weight:500; margin-right:6px; }

.mailbox-detail__match{ display:flex; flex-direction:column; gap:6px; padding:12px 16px; border-radius:10px; border:1.5px solid var(--border); }
.mailbox-detail__match--ok{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; row-gap:6px; padding:14px 18px; border-color:color-mix(in srgb,#3bd671 60%, var(--border)); background:color-mix(in srgb,#3bd671 8%, transparent); }
/* "Zuordnung ändern" sitzt als eigene Zeile unter der Zuordnung — Abstand 6px wie im
   "Noch nicht zugeordnet"-Block (statt 14px Grid-Zeilenabstand). */
.mailbox-detail__match--ok .mailbox-detail__match-actions{ grid-column:1 / -1; }
.mailbox-detail__match--warn{ border-color:color-mix(in srgb,#f7b500 60%, var(--border)); background:color-mix(in srgb,#f7b500 6%, transparent); }
.mailbox-detail__match--danger{ border-color:color-mix(in srgb,#ff6b6b 60%, var(--border)); background:color-mix(in srgb,#ff6b6b 6%, transparent); }
.mailbox-detail__match--muted{ border-color:var(--border); background:color-mix(in srgb,var(--muted) 6%, transparent); }
.mailbox-detail__match-icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:color-mix(in srgb,#3bd671 20%, var(--surface)); color:#28a745; flex-shrink:0; }
.mailbox-detail__match-content{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mailbox-detail__match-label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.mailbox-detail__match-link{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:none; color:var(--text); text-align:left; padding:0; font-weight:600; font-size:15px; cursor:pointer; transition:color .12s ease; min-width:0; }
.mailbox-detail__match-link:hover{ color:var(--accent); }
.mailbox-detail__match-link-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mailbox-detail__match-link-arrow{ color:var(--accent); transition:transform .15s ease; flex-shrink:0; }
.mailbox-detail__match-link:hover .mailbox-detail__match-link-arrow{ transform:translateX(3px); }
.mailbox-detail__match-strategy{ font-size:11px; color:#28a745; background:color-mix(in srgb,#3bd671 18%, var(--surface)); padding:3px 8px; border-radius:999px; font-weight:500; text-transform:lowercase; white-space:nowrap; }
.mailbox-detail__suggestions,
.mailbox-detail__match-actions{ display:flex; gap:6px; flex-wrap:wrap; }

.mailbox-detail__section-title{ font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); color:var(--muted); margin-bottom:6px; }
.mailbox-detail__body{ display:flex; flex-direction:column; gap:6px; }
.mailbox-detail__preview{ font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.mailbox-detail__image{ display:block; max-width:200px; max-height:120px; border-radius:6px; margin:6px 0; }
.mailbox-detail__image-link{ display:inline-block; }
.mailbox-detail__preview a{ color:var(--accent); text-decoration:underline; word-break:break-word; }
.mailbox-detail__preview a:hover{ text-decoration:none; }

.mailbox-detail__attachments{ display:flex; flex-direction:column; gap:6px; }
.mailbox-detail__attachment-list{ display:flex; flex-direction:column; gap:4px; }

@keyframes mailboxDismissPress{
  0%{ transform:scale(1); }
  100%{ transform:scale(.985); }
}
@keyframes mailboxDismissSlide{
  0%{ transform:translateX(0) scale(.985); opacity:1; }
  100%{ transform:translateX(115%) scale(.92); opacity:0; }
}
@keyframes mailboxDismissCollapse{
  from{ max-height:240px; margin-top:0; margin-bottom:6px; padding-top:30px; padding-bottom:12px; border-width:1.5px; opacity:1; }
  to{ max-height:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0; opacity:0; }
}
@keyframes mailboxDismissTint{
  0%{ background-color:var(--surface); border-color:var(--border); }
  100%{ background-color:color-mix(in srgb,#ff6b6b 12%, var(--surface)); border-color:#ff6b6b; }
}
@keyframes mailboxDismissDetailFade{
  0%{ opacity:1; transform:scale(1); filter:blur(0); }
  100%{ opacity:0; transform:scale(.97); filter:blur(2px); }
}
@keyframes mailboxDismissSheen{
  0%{ opacity:0; transform:translateX(-40%) skewX(-12deg); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:translateX(140%) skewX(-12deg); }
}

.mailbox-list-item.is-dismissing,
.app-list-item.is-dismissing{
  pointer-events:none;
  overflow:hidden;
  position:relative;
  transform-origin:left center;
  will-change:transform,opacity,max-height;
  animation:
    mailboxDismissTint .12s cubic-bezier(.4,0,.2,1) forwards,
    mailboxDismissPress .10s cubic-bezier(.34,1.56,.64,1) forwards,
    mailboxDismissSlide .24s cubic-bezier(.55,.06,.68,.19) .08s forwards,
    mailboxDismissCollapse .18s cubic-bezier(.7,0,.84,0) .28s forwards;
}

@keyframes mailboxArriveExpand{
  from{ max-height:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; border-width:0; opacity:0; }
  to{ max-height:240px; margin-top:0; margin-bottom:6px; padding-top:30px; padding-bottom:12px; border-width:1.5px; opacity:1; }
}
@keyframes mailboxArriveSlide{
  0%{ transform:translateX(115%) scale(.92); opacity:0; }
  100%{ transform:translateX(0) scale(1); opacity:1; }
}
@keyframes mailboxArriveTint{
  0%{ background-color:color-mix(in srgb,#3bd671 18%, var(--surface)); border-color:#3bd671; }
  60%{ background-color:color-mix(in srgb,#3bd671 12%, var(--surface)); border-color:color-mix(in srgb,#3bd671 60%, var(--border)); }
  100%{ background-color:var(--surface); border-color:var(--border); }
}
@keyframes mailboxArriveSheen{
  0%{ opacity:0; transform:translateX(140%) skewX(-12deg); }
  35%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-40%) skewX(-12deg); }
}

.mailbox-list-item.is-arriving{
  pointer-events:none;
  overflow:hidden;
  position:relative;
  transform-origin:right center;
  will-change:transform,opacity,max-height;
  animation:
    mailboxArriveExpand .22s cubic-bezier(.34,1.56,.64,1) forwards,
    mailboxArriveSlide .32s cubic-bezier(.16,.84,.34,1) .08s both,
    mailboxArriveTint .8s cubic-bezier(.4,0,.2,1) .12s both;
}
.mailbox-list-item.is-arriving::after{
  content:'';
  position:absolute;
  top:0; bottom:0; right:0;
  width:60%;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, color-mix(in srgb, var(--good) 28%, transparent) 50%, transparent 100%);
  animation:mailboxArriveSheen .32s ease-out .12s forwards;
}
.mailbox-list-item.is-dismissing::after{
  content:'';
  position:absolute;
  top:0; bottom:0; left:0;
  width:60%;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 0%, rgba(255,107,107,.28) 50%, transparent 100%);
  animation:mailboxDismissSheen .28s ease-out .06s forwards;
}


@keyframes mailboxDismissRowFade{
  0%{ opacity:1; transform:translateX(0); background-color:rgba(255,107,107,0); }
  35%{ opacity:.85; background-color:rgba(255,107,107,.12); }
  100%{ opacity:0; transform:translateX(80px); background-color:rgba(255,107,107,.04); }
}
tr.netzbetreiber-inbox-row{ transition:background-color .15s ease; }
tr.netzbetreiber-inbox-row.is-dismissing{
  pointer-events:none;
  animation:mailboxDismissRowFade .6s cubic-bezier(.4,0,.6,1) forwards;
}
tr.netzbetreiber-inbox-row.is-dismissing > td{
  border-color:transparent;
}

@media (prefers-reduced-motion: reduce){
  .mailbox-list-item.is-dismissing{
    animation:mailboxDismissCollapse .25s linear forwards;
    opacity:.4;
  }
  .mailbox-list-item.is-dismissing::after{ display:none; }
  .mailbox-detail.is-dismissing{ animation:none; opacity:.4; }
  tr.netzbetreiber-inbox-row.is-dismissing{ animation:none; opacity:.3; }
  .mailbox-list-item.is-arriving{ animation:none; }
  .mailbox-list-item.is-arriving::after{ display:none; }
}
.mailbox-detail__attachment{ display:flex; gap:10px; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .12s ease, background-color .12s ease; text-align:left; width:100%; }
.mailbox-detail__attachment:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, var(--surface)); }
.mailbox-detail__attachment-icon{ font-size:16px; }
.mailbox-detail__attachment-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mailbox-detail__attachment-meta{ color:var(--muted); font-size:11px; }
.mailbox-detail__attachment-download{ color:var(--muted); padding:4px 8px; border-radius:6px; text-decoration:none; font-size:14px; }
.mailbox-detail__attachment-download:hover{ background:color-mix(in srgb,var(--accent) 12%, transparent); color:var(--accent); }

.mailbox-attachment-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10000; padding:24px; backdrop-filter:blur(2px); }
.mailbox-attachment-overlay__panel{ background:var(--bg); border:1.5px solid var(--border); border-radius:14px; width:min(960px, 100%); max-height:90dvh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.4); }
.mailbox-attachment-overlay__header{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.mailbox-attachment-overlay__title{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.mailbox-attachment-overlay__actions{ display:flex; gap:6px; }
.mailbox-attachment-overlay__icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .12s ease, background-color .12s ease, color .12s ease; text-decoration:none; padding:0; }
.mailbox-attachment-overlay__icon-btn:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface)); }
.mailbox-attachment-overlay__icon-btn svg{ display:block; width:22px; height:22px; }
.mailbox-attachment-overlay__body{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:#1a1a1a; padding:12px; overflow:auto; }
.mailbox-attachment-overlay__media{ max-width:100%; max-height:80dvh; object-fit:contain; }
.mailbox-attachment-overlay__frame{ width:100%; height:80dvh; border:none; background:#fff; border-radius:6px; }
.mailbox-attachment-overlay__placeholder{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; padding:40px; }
.mailbox-attachment-overlay__placeholder-icon{ font-size:48px; }
.mailbox-attachment-overlay__placeholder-name{ font-weight:600; font-size:15px; }
.mailbox-attachment-overlay__placeholder-text{ color:rgba(255,255,255,.6); font-size:13px; }

.mailbox-signature-modal-body{ background:var(--bg); padding:18px; flex-direction:column; align-items:stretch; }
.mailbox-signature-format{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.mailbox-signature-format__option{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; cursor:pointer; transition:border-color .12s ease, background-color .12s ease; background:var(--surface); position:relative; }
.mailbox-signature-format__option:hover{ border-color:color-mix(in srgb,var(--accent) 60%, var(--border)); }
.mailbox-signature-format__option.is-active{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface)); }
.mailbox-signature-format__option{ padding-right:36px; }
.mailbox-signature-format__option::after{ content:''; position:absolute; top:50%; right:12px; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:transparent; border:1.5px solid color-mix(in srgb,var(--muted) 60%, transparent); box-sizing:border-box; color:#fff; font-size:11px; font-weight:700; line-height:1; opacity:0; transition:opacity .12s ease, background-color .12s ease; }
.mailbox-signature-format__option.is-active::after{ content:'✓'; background:var(--accent); opacity:1; }
.mailbox-signature-format__option input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; }
.mailbox-signature-format__label{ font-size:13px; font-weight:600; color:var(--text); }
.mailbox-signature-format__hint{ font-size:11px; color:var(--muted); }
.mailbox-signature-textarea{ width:100%; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); font-family:inherit; font-size:13px; line-height:1.5; min-height:200px; resize:vertical; box-sizing:border-box; }
.mailbox-signature-textarea[data-format="html"]{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; line-height:1.5; }

.mailbox-compose__hint-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.mailbox-compose__hint-row .mailbox-compose__hint{ flex:1; min-width:0; }
.mailbox-compose__recipients-extra{ display:flex; gap:6px; align-items:center; }

.mailbox-compose__recipients-list{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mailbox-compose__recipients-label{ font-size:13px; color:var(--muted); font-weight:500; margin-right:2px; }

.mailbox-compose__recipient-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); font-size:13px; cursor:pointer; transition:all .12s ease; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.mailbox-compose__recipient-chip:hover{ border-color:var(--accent); }
.mailbox-compose__recipient-chip.is-checked{ border-color:color-mix(in srgb,#3bd671 60%, var(--border)); background:color-mix(in srgb,#3bd671 10%, var(--surface)); color:var(--text); }
.mailbox-compose__recipient-chip.is-disabled{ border-color:var(--border); background:color-mix(in srgb,var(--muted) 6%, transparent); color:var(--muted); }
.mailbox-compose__recipient-chip.is-disabled > span:not(.mailbox-compose__recipient-chip-mark){ text-decoration:line-through; }
.mailbox-compose__recipient-chip-mark{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; font-size:11px; font-weight:700; flex-shrink:0; font-family:inherit; }
.mailbox-compose__recipient-chip.is-checked .mailbox-compose__recipient-chip-mark{ background:#3bd671; color:#fff; }
.mailbox-compose__recipient-chip.is-disabled .mailbox-compose__recipient-chip-mark{ background:color-mix(in srgb,var(--muted) 55%, var(--bg)); color:#fff; font-size:14px; font-weight:600; }
.mailbox-compose__cc-toggle{ display:inline-flex; align-items:center; background:transparent; border:1px solid var(--border); color:var(--muted); cursor:pointer; padding:3px 10px; font-size:11px; border-radius:999px; font-weight:500; transition:border-color .12s ease, color .12s ease, background-color .12s ease; }
.mailbox-compose__cc-toggle::after{ content:''; display:none; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:transparent; border:1.5px solid color-mix(in srgb,var(--muted) 60%, transparent); box-sizing:border-box; color:#fff; font-size:10px; font-weight:700; line-height:1; flex-shrink:0; margin-left:5px; }
.mailbox-compose__cc-toggle:hover{ color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, transparent); }
.mailbox-compose__cc-toggle.is-active{ color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%, transparent); }
.mailbox-compose__cc-toggle.is-active::after{ content:'✓'; display:inline-flex; background:var(--accent); }

.mailbox-compose__body-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mailbox-compose__body-format{ display:flex; gap:6px; align-items:center; }
.mailbox-compose__body-editor{ width:100%; flex:1; min-height:180px; height:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background-color:transparent; color:var(--text); font-family:inherit; font-size:14px; line-height:1.55; outline:none; overflow:auto; box-sizing:border-box; transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease; }
.mailbox-compose__body-editor:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.mailbox-compose__body-editor img{ max-width:100%; height:auto; }
.mailbox-compose__body-editor:empty::before{ content:attr(data-placeholder); color:var(--muted); opacity:.7; font-style:normal; font-weight:normal; pointer-events:none; }
.mailbox-compose__body-field textarea::placeholder{ color:var(--muted); opacity:.7; font-style:normal; font-weight:normal; }
.mailbox-compose__cc-field label{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mailbox-compose__cc-label{ font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600; }
.mailbox-compose__cc-close{ display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--border); color:var(--muted); cursor:pointer; font-size:14px; line-height:1; width:22px; height:22px; padding:0; border-radius:6px; transition:border-color .12s ease, color .12s ease, background-color .12s ease; }
.mailbox-compose__cc-close:hover{ color:#ff6b6b; border-color:#ff6b6b; background:color-mix(in srgb,#ff6b6b 8%, var(--surface)); }

.mailbox-compose__dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px 16px; border:1.5px dashed var(--border); border-radius:10px; background:color-mix(in srgb,var(--surface) 60%, transparent); cursor:pointer; transition:border-color .15s ease, background-color .15s ease, color .15s ease; color:var(--muted); text-align:center; }
.mailbox-compose__dropzone:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 5%, var(--surface)); }
.mailbox-compose__dropzone.is-dragover{ border-color:var(--accent); border-style:solid; background:color-mix(in srgb,var(--accent) 14%, var(--surface)); color:var(--accent); transform:scale(1.01); }
.mailbox-compose__dropzone-icon{ display:inline-block; width:32px; height:32px; background:linear-gradient(135deg,#5a1300 0%,#c93300 22%,#ffba4d 42%,#a07a7d 50%,#4a7faa 58%,#14324a 78%,#08182a 100%); background-size:200% 200%; background-position:0% 0%; -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>') center/contain no-repeat; mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>') center/contain no-repeat; opacity:.9; transition:opacity .15s ease, transform .15s ease; animation:mailboxEmptyIconSweep 2s linear 0.4s both; }
@media (prefers-reduced-motion: reduce){
  .mailbox-compose__dropzone-icon{ animation:none; background-position:50% 50%; }
}
.mailbox-compose__dropzone:hover .mailbox-compose__dropzone-icon,
.mailbox-compose__dropzone.is-dragover .mailbox-compose__dropzone-icon{ opacity:1; transform:translateY(-2px); }
.mailbox-compose__dropzone-title{ font-size:13px; font-weight:600; color:var(--text); }
.mailbox-compose__dropzone.is-dragover .mailbox-compose__dropzone-title{ color:var(--accent); }
.mailbox-compose__dropzone-sub{ font-size:11px; color:var(--muted); }

.mailbox-compose__attach-list{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.mailbox-compose__attach-item{ display:flex; gap:10px; align-items:center; padding:6px 10px; border:1px solid var(--border); border-radius:8px; font-size:13px; background:var(--surface); }
.mailbox-compose__attach-icon{ font-size:14px; }
.mailbox-compose__attach-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mailbox-compose__attach-size{ color:var(--muted); font-size:11px; }
.mailbox-compose__attach-remove{ background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:2px 6px; border-radius:4px; }
.mailbox-compose__attach-remove:hover{ color:#ff6b6b; background:color-mix(in srgb,#ff6b6b 10%, transparent); }
.mailbox-compose{ display:flex; flex-direction:column; gap:14px; width:100%; flex:1; min-height:0; }
.mailbox-compose__layout{ display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:16px; align-items:stretch; flex:1; min-height:0; }
.mailbox-compose__form{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.mailbox-compose__form-scroll{ flex:1; min-height:0; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:12px; }
.mailbox-compose__row{ display:flex; flex-direction:column; gap:12px; }
.mailbox-compose__row--two{ display:grid; grid-template-columns:minmax(0, 220px) minmax(0, 1fr); gap:12px; align-items:end; }
.mailbox-compose__recipient-slot{ display:flex; min-width:0; }
.mailbox-compose__recipient-slot > .field{ width:100%; min-width:0; }
.mailbox-compose__form .field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.mailbox-compose__form .field label{ font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.mailbox-compose__form .field input,
.mailbox-compose__form .field select,
.mailbox-compose__form .field textarea{ width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:10px; background-color:transparent; color:var(--text); font-size:14px; font-family:inherit; }
.mailbox-compose__form .field select{ padding-right:36px; cursor:pointer; }
.mailbox-compose__body-field{ flex:1; min-height:0; }
.mailbox-compose__body-field textarea{ flex:1; min-height:180px; height:100%; resize:none; line-height:1.55; }
.mailbox-compose__form .field input:focus,
.mailbox-compose__form .field select:focus,
.mailbox-compose__form .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.mailbox-compose__hint{ font-size:13px; color:var(--muted); line-height:1.5; }
.mailbox-compose__hint code{ color:var(--text); background:transparent; padding:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.mailbox-compose__hint:empty{ display:none; }
.mailbox-compose__actions{ display:flex; justify-content:flex-end; padding-top:0; margin-top:-6px; }

.mailbox-compose__sidebar{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; min-height:0; }
.mailbox-compose__sidebar-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.mailbox-compose__sidebar-title{ margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
.mailbox-compose__sidebar-hint{ font-size:10px; color:var(--muted); }
.mailbox-compose__placeholders{ flex:1; min-height:0; overflow-y:auto; padding-right:2px; }
.placeholder-chip-grid{ display:flex; flex-direction:column; gap:4px; }
.placeholder-chip-grid--empty{ color:var(--muted); font-size:12px; padding:4px 2px; }
.placeholder-chip{ display:flex; align-items:center; gap:8px; padding:6px 10px; background:transparent; border:1px solid var(--border); border-radius:8px; cursor:pointer; text-align:left; transition:all .12s ease; min-width:0; }
.placeholder-chip:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, transparent); }
.placeholder-chip:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.placeholder-chip__token{ font-family:ui-monospace,monospace; font-size:11px; color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, transparent); padding:1px 6px; border-radius:5px; flex-shrink:0; }
.placeholder-chip__label{ font-size:11px; color:var(--muted); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 900px){
  .mailbox-compose__layout{ grid-template-columns:1fr; }
  .mailbox-compose__row--two{ grid-template-columns:1fr; }
  .mailbox-compose__sidebar{ order:2; }
  .mailbox-compose__placeholders{ max-height:240px; }
  .mailbox-compose__form{ order:1; }
  .mailbox-compose__body-field textarea{ resize:vertical; }
}

.mailbox-history{ display:flex; flex-direction:column; gap:10px; flex:1; min-height:0; overflow-y:auto; padding:2px 0; }
.mailbox-history-item{ background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.mailbox-history-item__row{ display:flex; gap:8px; align-items:center; font-size:11px; flex-wrap:wrap; }
.mailbox-history-item__source{ color:var(--muted); text-transform:capitalize; }
.mailbox-history-item__date{ margin-left:auto; color:var(--muted); }
.mailbox-history-item__subject{ font-weight:600; font-size:14px; }
.mailbox-history-item__recipients{ font-size:12px; color:var(--muted); }
.mailbox-history-item__error{ font-size:12px; color:#d04545; padding:6px 10px; background:color-mix(in srgb,#ff6b6b 8%, transparent); border-radius:6px; margin-top:4px; }

@media (max-width: 880px){
  .mailbox-page__layout{ grid-template-columns:1fr; }
  .mailbox-page__list{ max-height:none; }
}

/* ============================================================
 * App-Style Sockel — generische Pendants der Mailbox-Klassen
 * Verbindlich fuer ALLE Bereiche ausserhalb der Mailbox.
 * Mailbox bleibt unveraendert; ihre .mailbox-* Klassen sind die
 * Referenz und duerfen NICHT durch diese ersetzt werden.
 * ============================================================ */
.app-page{ display:flex; flex-direction:column; gap:var(--page-gap); width:100%; max-width:none; margin:0; height:100%; min-height:0; }
.app-page__header{ display:flex; justify-content:flex-start; align-items:center; gap:var(--header-gap); flex-wrap:wrap; min-width:0; }
.app-page__tabs{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; min-width:0; flex:0 1 auto; }
.app-page__actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto; justify-content:flex-end; min-width:0; max-width:100%; }
.app-page__actions > input,
.app-page__actions > select,
.app-page__actions > .field{ min-width:0; box-sizing:border-box; }
.app-page__actions > input[type="search"],
.app-page__actions > input[type="text"]{ flex:1 1 240px; min-width:200px; max-width:340px; }
.app-page__actions > select{ flex:0 1 auto; max-width:200px; }
.app-page__actions .btn{ white-space:nowrap; flex:0 0 auto; }
.app-tab{ background:color-mix(in srgb,var(--surface) 80%, transparent); border:var(--border-thin); border-radius:var(--radius-tiny); padding:8px 18px; font-size:14px; color:var(--text); cursor:pointer; transition:all .15s ease; }
.app-tab:hover{ border-color:var(--accent); color:#fff; }
.app-tab.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.app-page__actions .btn{ border-radius:var(--radius-tiny); }

.app-page__filters{ display:flex; gap:8px; flex-wrap:wrap; padding:0; margin-top:-4px; }
.app-filter-chip{ background:transparent; border:var(--border-thin); border-radius:var(--badge-radius); padding:6px 14px; font-size:13px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; color:var(--muted); transition:all .15s ease; }
.app-filter-chip:hover{ border-color:var(--accent); color:var(--text); }
.app-filter-chip.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.app-filter-chip__count{ background:color-mix(in srgb,#000 25%, transparent); color:inherit; padding:1px 7px; border-radius:var(--badge-radius); font-size:11px; font-weight:600; }

.app-bulk-bar{ display:none; align-items:center; gap:8px; padding:4px 10px; background:color-mix(in srgb,var(--accent) 10%, var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 50%, var(--border)); border-radius:var(--radius-tiny); font-size:12px; box-sizing:border-box; line-height:1; }
.app-bulk-bar.is-visible{ display:inline-flex; }
.app-bulk-bar__count{ font-weight:600; color:var(--text); white-space:nowrap; }
.app-bulk-bar__actions{ display:flex; gap:4px; }
.app-bulk-bar .btn{ padding:0 8px; font-size:11px; height:20px; line-height:1; min-height:0; }

.app-page__layout{ display:grid; grid-template-columns:minmax(320px, 420px) 1fr; grid-template-rows:minmax(0, 1fr); gap:var(--page-layout-gap); flex:1; min-height:0; }
.app-page__list{ display:flex; flex-direction:column; gap:var(--list-gap); overflow-x:hidden; overflow-y:auto; padding:2px 4px 2px 0; min-height:0; min-width:0; }
.app-page__list > div:not(.app-list-item){ display:flex; flex-direction:column; gap:var(--list-gap); min-width:0; }
.app-page__detail{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); overflow:hidden; min-height:0; display:flex; flex-direction:column; }

.app-list-item{ position:relative; background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium); padding:30px 14px 12px 14px; text-align:left; cursor:pointer; transition:padding-left .15s ease, background-color .12s ease, border-color .12s ease; display:flex; flex-direction:column; gap:6px; width:100%; min-width:0; box-sizing:border-box; }
.app-page__list.has-selection .app-list-item{ padding-left:36px; }
.app-list-item:hover{ border-color:var(--accent); transform:translateY(-1px); }
.app-list-item.is-active{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface)); box-shadow:0 0 0 1px var(--accent); }
.app-list-item.is-checked{ background:var(--surface); border-color:var(--border); box-shadow:inset 3px 0 0 var(--accent); padding-left:36px; }
.app-list-item.is-active.is-checked{ background:color-mix(in srgb,var(--accent) 12%, var(--surface)); border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent); }
.app-list-item__checkbox{ position:absolute; left:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .15s ease; z-index:1; }
.app-page__list.has-selection .app-list-item__checkbox,
.app-list-item.is-checked .app-list-item__checkbox{ opacity:1; visibility:visible; }
.app-list-item__checkbox-box{ width:16px; height:16px; border:1.5px solid var(--muted); border-radius:4px; background:var(--surface); display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; color:var(--accent); font-weight:700; }
.app-list-item.is-checked .app-list-item__checkbox-box{ background:var(--accent); border-color:var(--accent); color:#fff; }
.app-list-item__header{ position:absolute; top:8px; left:12px; right:12px; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; }

/* === Power-User-Features: Bulk-Leiste, Favoriten, Toast-Action, Shortcut-Hilfe === */
/* Inline-Mehrfachauswahl nutzt die vorhandenen .app-list-item__checkbox-Regeln (Mailbox-Stil, s. o.) —
   identisch zur E-Mail-Liste: Checkbox erscheint bei aktiver Auswahl, erste Auswahl per Strg/Cmd-Klick.
   Der absolut positionierte Header wird bei Auswahl eingerückt, damit die Checkbox links nicht mit den
   Badges kollidiert. */
.app-page__list.has-selection .app-list-item__header{ left:36px; }

/* Favoriten-Stern (im Header-rechts der Zeile; Header ist pointer-events:none → Stern reaktiviert) */
.list-pin{ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; transition:color .12s ease, background-color .12s ease; }
.list-pin:hover{ color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); }
.list-pin.is-pinned{ color:#f5a623; }

/* Bulk-Leiste im Listenkopf — 1:1 zur .mailbox-bulk-bar (im Header, per .is-visible umgeschaltet) */
.app-bulk-bar{ display:none; align-items:center; gap:8px; padding:4px 10px; background:color-mix(in srgb,var(--accent) 10%, var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 50%, var(--border)); border-radius:8px; font-size:12px; box-sizing:border-box; line-height:1; }
.app-bulk-bar.is-visible{ display:inline-flex; }
.app-bulk-bar__count{ font-weight:600; color:var(--text); white-space:nowrap; }
.app-bulk-bar__actions{ display:flex; gap:4px; }
.app-bulk-bar .btn{ padding:0 8px; font-size:11px; height:20px; line-height:1; min-height:0; }

/* Toast-Action-Button (Rückgängig) */
.toast{ display:flex; align-items:center; gap:14px; }
.toast__msg{ flex:1; min-width:0; }
.toast__action{ flex:none; background:transparent; border:1px solid currentColor; color:inherit; border-radius:8px; padding:4px 12px; font-size:13px; font-weight:600; cursor:pointer; opacity:.95; }
.toast__action:hover{ opacity:1; background:color-mix(in srgb, currentColor 16%, transparent); }
/* Hervorgehobene Bestaetigungs-Aktion (z. B. "Ja" im showConfirm-Toast) im einheitlichen Toast-Stil. */
.toast__action--primary{ background:var(--accent,#4a90d9); color:#fff; border-color:transparent; font-weight:700; }
.toast--danger .toast__action--primary{ background:var(--danger,#d04545); }
.toast--success .toast__action--primary{ background:var(--ok,#28a745); }
.toast--warning .toast__action--primary{ background:#d8a200; }
.toast__action--primary:hover{ background:var(--accent,#4a90d9); filter:brightness(1.08); }
.toast--danger .toast__action--primary:hover{ background:var(--danger,#d04545); filter:brightness(1.08); }
.toast--success .toast__action--primary:hover{ background:var(--ok,#28a745); filter:brightness(1.08); }
.toast--warning .toast__action--primary:hover{ background:#d8a200; filter:brightness(1.08); }
/* Akzentstreifen auch beim Bestaetigungs-Toast (toast-choice ueberschreibt sonst den border-left). */
.toast-choice.toast--danger{ border-left:3px solid var(--danger,#d04545); }
.toast-choice.toast--info{ border-left:3px solid var(--accent,#4a90d9); }

/* Tastenkürzel-Hilfe-Overlay */
.shortcut-help{ display:flex; flex-direction:column; gap:18px; }
.shortcut-help__title{ font-weight:600; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.shortcut-help__list{ display:flex; flex-direction:column; gap:6px; margin:0; }
.shortcut-help__row{ display:flex; align-items:baseline; gap:14px; }
.shortcut-help__row dt{ flex:none; min-width:180px; }
.shortcut-help__row dd{ margin:0; color:var(--muted); font-size:13px; }
.shortcut-help kbd{ display:inline-block; padding:2px 8px; border:1px solid var(--border); border-bottom-width:2px; border-radius:6px; background:var(--surface); font-family:inherit; font-size:12px; color:var(--text); }

/* Mailbox-Volltextsuche */
.mailbox-search{ flex:1; min-width:180px; max-width:380px; margin-left:auto; padding:6px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text); font-size:13px; }
.mailbox-search:focus{ outline:none; border-color:var(--accent); }
.app-list-item__row{ display:flex; align-items:center; gap:8px; min-width:0; flex:0 1 auto; }
.app-list-item__row--left{ font-size:11px; justify-content:flex-start; }
.app-list-item__row--right{ font-size:11px; justify-content:flex-end; gap:6px; }
/* Kollisionsschutz: Badges einzeilig halten; Datum/Status truncaten statt umzubrechen,
   damit der absolut positionierte Header nicht in den Betreff laeuft. */
.app-list-item__row .app-source{ flex:0 0 auto; white-space:nowrap; }
.app-list-item__row .app-status{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; min-width:0; }
.app-list-item__row--left .app-list-item__date{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.app-list-item__subject{ font-weight:600; font-size:14px; line-height:1.3; color:var(--text); display:block; width:100%; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.app-list-item__from{ font-size:12px; color:var(--muted); text-align:left; display:block; width:100%; align-self:stretch; }
/* Expandable-Variante für eingebettete Projekt-Detail-Sub-Views (Aufgaben/Termine):
   gleiche Karten-Optik wie app-list-item, aber mit klickbarem Kopf + Inline-Expand-Body. */
.app-list-item--expandable{ padding:0; gap:0; cursor:default; }
.app-list-item--expandable > .app-list-item__main{ position:relative; display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; box-sizing:border-box; padding:42px 14px 12px 14px; background:transparent; border:0; color:inherit; font:inherit; text-align:left; cursor:pointer; border-radius:inherit; }
.app-list-item--expandable > .app-list-item__main:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 40%, transparent); border-radius:var(--radius-medium); }
.app-list-item--expandable > .app-list-item__body{ padding:12px 14px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:12px; }
.app-list-item__caret{ color:var(--muted); font-size:11px; margin-right:6px; display:inline-block; }
.app-list-item__from--secondary{ color:var(--muted); }
.expandable-record-list{ display:flex; flex-direction:column; gap:var(--list-gap); }
.expandable-record-empty{ padding:24px 16px; text-align:center; border:var(--border-strong); border-radius:var(--radius-large); background:var(--surface); color:var(--muted); display:flex; flex-direction:column; gap:6px; }
.expandable-record-empty strong{ color:var(--text); font-size:14px; }
.app-list-item__date{ color:var(--muted); }
.app-list-item__attachments{ color:var(--muted); }

.app-list-empty{ padding:40px 20px; text-align:center; color:var(--muted); font-size:14px; background:var(--surface); border:var(--border-dashed); border-radius:var(--radius-medium); }
.app-list-loading{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:60px 20px; color:var(--muted); font-size:14px; }
.app-list-loading__spinner{ width:36px; height:36px; border:3px solid color-mix(in srgb,var(--muted) 25%, transparent); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; }
.app-list-loading__text{ font-size:13px; }

/* ------------------------------------------------------------------
 * Offizielle Badge-Hue-Palette (die einzige erlaubte Hardcoded-Farbe).
 * Bewusst Inline-Hex (keine Tokens), theme-agnostisch in Dark+Light.
 * Sieben Hues mit fester Semantik:
 *   blau   #5b8def  customer / note
 *   orange #f2994a  netzbetreiber / meister
 *   gruen  #3bd671  partner / ok / call        (Text oft #28a745)
 *   gelb   #f7b500  warn                       (Text #b88300)
 *   rot    #ff6b6b  danger / admin             (Text #d04545)
 *   lila   #9b51e0  internal / status-change   (offiziell 7. Hue, 2026-06-05)
 *   muted  var(--muted)  neutral
 * Entscheidung: Lila bleibt eigene Hue (statt Mapping auf eine der anderen),
 * weil es interne Quellen / Statuswechsel genuin abgrenzt. Neue Badges MUESSEN
 * aus dieser Palette schoepfen — keine weiteren Hardcoded-Farben.
 * ------------------------------------------------------------------ */
.app-source{ display:inline-block; padding:2px 8px; border-radius:var(--badge-radius); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.app-source--customer{ background:color-mix(in srgb,#5b8def 18%, transparent); color:#5b8def; }
.app-source--netzbetreiber{ background:color-mix(in srgb,#f2994a 18%, transparent); color:#f2994a; }

.app-status{ display:inline-block; padding:2px 8px; border-radius:var(--badge-radius); font-size:10px; font-weight:600; }
.app-status--ok{ background:color-mix(in srgb,#3bd671 18%, transparent); color:#28a745; }
.app-status--warn{ background:color-mix(in srgb,#f7b500 18%, transparent); color:#b88300; }
.app-status--danger{ background:color-mix(in srgb,#ff6b6b 18%, transparent); color:#d04545; }
.app-status--muted{ background:color-mix(in srgb,var(--muted) 14%, transparent); color:var(--muted); }
.app-status--online{ background:color-mix(in srgb,#3bd671 18%, transparent); color:#28a745; }
.app-status--online::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:#28a745; margin-right:5px; vertical-align:1px; }
.users-list-item__activity{ font-size:11px; color:var(--muted); }

.app-detail{ padding:24px; display:flex; flex-direction:column; gap:var(--detail-gap); flex:1; min-height:0; overflow-y:auto; }
.app-detail--empty{ display:flex; align-items:center; justify-content:center; padding:60px 20px; }
.app-detail__empty-state{ text-align:center; max-width:320px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.app-detail__empty-icon{
  display:inline-block;
  width:64px; height:64px;
  background:linear-gradient(135deg,#5a1300 0%,#c93300 22%,#ffba4d 42%,#a07a7d 50%,#4a7faa 58%,#14324a 78%,#08182a 100%);
  background-size:200% 200%;
  background-position:0% 0%;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/></svg>') center/contain no-repeat;
  font-size:0; line-height:0;
  opacity:.9;
  animation:appEmptyIconSweep 2s linear 0.4s both;
}
@keyframes appEmptyIconSweep{
  0%{ background-position:0% 0%; }
  67%{ background-position:100% 100%; }
  100%{ background-position:50% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .app-detail__empty-icon{ animation:none; background-position:50% 50%; }
}
.app-detail__empty-icon--mail{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--inbox{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--users{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--task{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--event{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--lead{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--folder{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--inventory{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--components{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--accounting{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="16" y2="11"/><line x1="8" y1="15" x2="13" y2="15"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="7" x2="16" y2="7"/><line x1="8" y1="11" x2="16" y2="11"/><line x1="8" y1="15" x2="13" y2="15"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--analytics{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--search{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--netzbetreiber{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--notification{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--project{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--settings{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 10v6m11-11h-6M7 12H1m16.24-7.76-4.24 4.24m-2 2-4.24 4.24M22 22l-4.24-4.24m-2-2L11.52 11.52"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 10v6m11-11h-6M7 12H1m16.24-7.76-4.24 4.24m-2 2-4.24 4.24M22 22l-4.24-4.24m-2-2L11.52 11.52"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--drawing{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M11.39 1.61 22 12.22l-2.5 2.5L9.39 4.11l2-2.5z"/><path d="M2 22l3.5-3.5"/><path d="M19.07 15.71 22 12.78"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M11.39 1.61 22 12.22l-2.5 2.5L9.39 4.11l2-2.5z"/><path d="M2 22l3.5-3.5"/><path d="M19.07 15.71 22 12.78"/></svg>') center/contain no-repeat;
}
.app-detail__empty-icon--guard{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center/contain no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>') center/contain no-repeat;
}
.app-detail__empty-title{ font-weight:600; font-size:16px; margin-bottom:6px; }
.app-detail__empty-text{ color:var(--muted); font-size:13px; line-height:1.5; }
.app-detail__empty-link{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 14px; border:1.5px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; text-decoration:none; transition:border-color .12s ease, color .12s ease; }
.app-detail__empty-link:hover{ border-color:var(--accent); color:var(--accent); }
.app-page--guard{ flex:1; display:flex; align-items:center; justify-content:center; padding:60px 20px; min-height:60vh; }
.app-page--guard .app-detail__empty-state{ max-width:360px; }
/* Trennstrich des Detail-Kopfs bewusst weicher als eine volle Border — wirkt als leise
   Sektionsgrenze statt als harte Linie (konsistent mit .app-detail__feed-head). */
.app-detail__header{ display:flex; flex-direction:column; gap:10px; padding-bottom:16px; border-bottom:1px solid color-mix(in srgb,var(--border) 70%, transparent); }
/* Kleine Lücke über der Source-Row (Badges/Datum), damit der Kopf nicht am oberen Rand
   bzw. an einer darüberliegenden Status-Karte klebt. Gilt für app-detail und mailbox-detail. */
.app-detail__source-row,
.mailbox-detail__source-row{ margin-top:6px; }
.app-detail__source-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12px; color:var(--muted); }
/* Etwas größere, enger getrackte Überschrift für klarere Hierarchie zwischen Titel und Meta. */
.app-detail__subject{ margin:0; font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-0.01em; color:var(--text); }
.app-detail__meta{ font-size:13px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.app-detail__meta-label{ color:var(--text); font-weight:500; margin-right:6px; }
/* Status-Zeile im Meta-Block: Label + (ggf. interaktiver) Status-Pill sauber auf einer Linie. */
.app-detail__meta-status{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.app-detail__meta-status .app-detail__meta-label{ margin-right:0; }
.app-detail__body{ display:flex; flex-direction:column; gap:6px; }
.app-detail__section-title{ font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); font-weight:600; color:var(--muted); margin-bottom:8px; }
.app-detail__section-eyebrow{ font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); color:var(--muted); font-weight:600; margin-bottom:2px; }

/* Generische Detail-Meta-Karte (via renderDetailMetaCard-Helper) */
.app-detail__meta-card{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; background:var(--surface); border:1.5px solid var(--border); border-radius:12px; }
.app-detail__field-stack{ display:flex; flex-direction:column; gap:2px; }

/* Overview-Pattern (.app-page--overview): KPI-Hero + Panel-Grid für Dashboards.
   Defaults werden von bereichsspezifischen Klassen wie .dashboard-hero
   überschrieben (CSS-Reihenfolge / höhere Spezifität via Bereich-Wrapper). */
.app-page--overview{ /* erbt vom .app-page Sockel — kein zusätzliches Layout, semantischer Marker */ }

/* Detail-Pattern (.app-page--detail): Detail-Page mit Topbar, Meta-Karten links
   und Aktivitäts-Feed rechts. Semantischer Marker, das Layout liefern die
   bereichsspezifischen Klassen .project-detail-page__* und .lead-detail-page__*. */
.app-page--detail{ /* erbt vom .app-page Sockel — semantischer Marker für Detail-Pages */ }
.app-page__hero{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,380px); gap:16px; align-items:stretch; }
.app-page__panel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; align-items:start; }
@media (max-width: 960px){
  .app-page__hero{ grid-template-columns:1fr; }
}

/* Generischer Detail-Feed (via renderDetailFeed-Helper) — Aktivitäten-Liste
   mit Header, Tabs/Filter und scrollbarer Body-Liste. */
.app-detail__feed{ background:var(--surface); border:1.5px solid var(--border); border-radius:14px; display:flex; flex-direction:column; gap:12px; padding:18px 20px; min-height:0; overflow:hidden; }
.app-detail__feed-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid color-mix(in srgb,var(--border) 60%, transparent); flex-wrap:wrap; }
.app-detail__feed-title{ margin:0; font-size:16px; font-weight:600; color:var(--text); }
.app-detail__feed-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.app-detail__feed-list{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--list-gap); padding:2px 4px 2px 2px; }

/* Generische Mailbox-Sektion-Basisregel (auch ohne renderMailboxSection-Helper
   für mailbox-detail-Markup in Email-Pages und ähnlichem genutzt) */
.mailbox-detail__section{ display:flex; flex-direction:column; gap:10px; }

/* ------------------------------------------------------------
 * .app-card — generischer Card/Panel-Sockel
 *
 * Verbindlicher Standard fuer alle generischen Karten/Panels
 * ausserhalb der Mailbox- und Bereichs-spezifischen Stile.
 * Liefert Mailbox-konforme Visuals (Border, Radius, Surface,
 * Hover) als Default-Klasse. Bestehende Bereichs-Klassen
 * koennen die gleichen Tokens parallel verwenden.
 *
 * Varianten:
 *   .app-card                — Standard Card (radius-large, padding 18)
 *   .app-card--compact       — kleinere Padding/Radius fuer Listenitems
 *   .app-card--soft          — abgeschwaechte Surface (color-mix 70%)
 *   .app-card--hover         — opt-in Hover-Effekt (Accent-Border + lift)
 *   .app-card--accent        — leicht akzentuierte Border (Active-Zustand)
 *   .app-card--dashed        — gestrichelte Border (Empty/Dropzone)
 * ------------------------------------------------------------ */
.app-card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:18px; display:flex; flex-direction:column; gap:12px; box-sizing:border-box; min-width:0; }
.app-card--compact{ padding:12px 14px; border-radius:var(--radius-medium); gap:8px; }
.app-card--soft{ background:color-mix(in srgb,var(--surface) 70%, transparent); }
.app-card--hover{ cursor:pointer; transition:border-color .15s ease, transform .15s ease, background-color .15s ease; }
.app-card--hover:hover{ border-color:var(--accent); transform:translateY(-1px); }
.app-card--accent{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface)); }
.app-card--dashed{ border:1.5px dashed var(--border); }

/* ============================================================
 * F12 — Mikro-UI-Sockel (Badges, Pills, Chips, Switches, Toasts, Tooltips)
 * ------------------------------------------------------------
 * Verbindlicher Standard fuer alle generischen Mikro-UI-
 * Elemente ausserhalb der Mailbox- und Bereichs-spezifischen
 * Stile. Liefert Mailbox-konforme Visuals (Tokens-basiert) als
 * Default-Klassen. Bestehende Bereichs-Klassen (z. B.
 * .dashboard-meta-badge, .tracking-status-pill) bleiben
 * erhalten, sollen aber langfristig auf diese Sockel umgezogen
 * werden.
 *
 * Token-Bezuege:
 *   --badge-radius      999px    (Pills/Badges/Chips/Filter-Chips)
 *   --radius-tiny       8px      (Tooltip)
 *   --radius-medium     12px     (Toast)
 *   --border-thin       1px      (Badge/Pill/Chip-Border)
 *   --border-strong     1.5px    (Toast)
 *
 * Designentscheidungen:
 *   .app-badge   10-11px / UPPERCASE 0.5px / color-mix-Background
 *   .app-pill    12px / Surface-Background / Border-Thin
 *   .app-chip    13px / 6x14px padding / Border-Thin / interaktiv
 *   .app-switch  36x20px / Accent-Active / Surface-Off
 *   .app-toast   radius-medium / Border-Strong / Surface / Shadow
 *   .app-tooltip 12px / 6x10px / Surface / Border-Thin
 * ------------------------------------------------------------ */

/* Badges — kompakte Statuslabels, UPPERCASE, color-mix-Hintergrund */
.app-badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:var(--badge-radius); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; line-height:1.4; background:color-mix(in srgb,var(--muted) 14%, transparent); color:var(--muted); }
.app-badge--ok{ background:color-mix(in srgb,#3bd671 18%, transparent); color:#28a745; }
.app-badge--warn{ background:color-mix(in srgb,#f7b500 18%, transparent); color:#b88300; }
.app-badge--danger{ background:color-mix(in srgb,#ff6b6b 18%, transparent); color:#d04545; }
.app-badge--info{ background:color-mix(in srgb,#5b8def 18%, transparent); color:#5b8def; }
.app-badge--accent{ background:color-mix(in srgb,var(--accent) 18%, transparent); color:var(--accent); }
.app-badge--muted{ background:color-mix(in srgb,var(--muted) 14%, transparent); color:var(--muted); }

/* Pills — wie Badges, aber laengere Texte, kein Uppercase, etwas mehr Padding */
.app-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--badge-radius); font-size:12px; font-weight:500; line-height:1.4; border:var(--border-thin); background:color-mix(in srgb,var(--surface) 80%, transparent); color:var(--text); }
.app-pill--ok{ background:color-mix(in srgb,#3bd671 16%, var(--surface)); border-color:color-mix(in srgb,#3bd671 40%, var(--border)); color:var(--text); }
.app-pill--warn{ background:color-mix(in srgb,#f7b500 16%, var(--surface)); border-color:color-mix(in srgb,#f7b500 40%, var(--border)); color:var(--text); }
.app-pill--danger{ background:color-mix(in srgb,#ff6b6b 16%, var(--surface)); border-color:color-mix(in srgb,#ff6b6b 40%, var(--border)); color:var(--text); }
.app-pill--info{ background:color-mix(in srgb,#5b8def 16%, var(--surface)); border-color:color-mix(in srgb,#5b8def 40%, var(--border)); color:var(--text); }
.app-pill--accent{ background:color-mix(in srgb,var(--accent) 14%, var(--surface)); border-color:color-mix(in srgb,var(--accent) 40%, var(--border)); color:var(--text); }
.app-pill--muted{ color:var(--muted); }

/* Chips — interaktive Tags/Filter, groesseres Padding, Hover-Border */
.app-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--badge-radius); font-size:13px; line-height:1.3; border:var(--border-thin); background:transparent; color:var(--muted); cursor:pointer; transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
.app-chip:hover{ border-color:var(--accent); color:var(--text); }
.app-chip:focus-visible{ outline:none; border-color:var(--accent); box-shadow:var(--surface-focus-ring); }
.app-chip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.app-chip--compact{ padding:4px 10px; font-size:11px; }
.app-chip--static{ cursor:default; }
.app-chip--static:hover{ border-color:var(--border); color:var(--muted); }
.app-chip__count{ background:color-mix(in srgb,#000 25%, transparent); color:inherit; padding:1px 7px; border-radius:var(--badge-radius); font-size:11px; font-weight:600; }

/* Switches — einheitliche 36x20 px (kompakter als .switch, projektweiter neuer Standard) */
.app-switch{ position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.app-switch input{ position:absolute; opacity:0; width:0; height:0; }
.app-switch__slider{ position:absolute; inset:0; cursor:pointer; background:var(--surface); border:var(--border-thin); border-radius:var(--badge-radius); transition:background-color .18s ease, border-color .18s ease; }
.app-switch__slider::before{ content:""; position:absolute; left:2px; top:50%; transform:translateY(-50%); width:14px; height:14px; background:var(--muted); border-radius:50%; transition:transform .18s ease, background-color .18s ease; }
.app-switch input:checked + .app-switch__slider{ background:var(--accent); border-color:var(--accent); }
.app-switch input:checked + .app-switch__slider::before{ transform:translate(16px,-50%); background:#fff; }
.app-switch input:focus-visible + .app-switch__slider{ box-shadow:var(--surface-focus-ring); }
.app-switch input:disabled + .app-switch__slider{ opacity:.55; cursor:not-allowed; }

/* Toasts — bottom-centered, surface/border-strong/shadow */
.app-toast{ position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(20px); display:inline-flex; align-items:center; gap:10px; padding:10px 16px; background:var(--surface); color:var(--text); border:var(--border-strong); border-radius:var(--radius-medium); box-shadow:var(--shadow); font-size:13px; line-height:1.4; opacity:0; transition:opacity .3s ease, transform .3s ease; z-index:10600; }
.app-toast.is-visible,
.app-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.app-toast--ok{ border-color:color-mix(in srgb,#3bd671 45%, var(--border)); }
.app-toast--warn{ border-color:color-mix(in srgb,#f7b500 45%, var(--border)); }
.app-toast--danger{ border-color:color-mix(in srgb,#ff6b6b 45%, var(--border)); }
.app-toast--info{ border-color:color-mix(in srgb,#5b8def 45%, var(--border)); }
.app-toast .btn{ margin-left:8px; }

/* Tooltips — CSS-only Loesung per data-tooltip + opt-in .app-tooltip */
.app-tooltip{ position:relative; }
.app-tooltip[data-tooltip]::after{ content:attr(data-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); padding:6px 10px; background:var(--surface); color:var(--text); border:var(--border-thin); border-radius:var(--radius-tiny); box-shadow:var(--shadow); font-size:12px; line-height:1.4; white-space:nowrap; max-width:280px; pointer-events:none; opacity:0; transition:opacity .15s ease; z-index:260; }
.app-tooltip[data-tooltip]:hover::after,
.app-tooltip[data-tooltip]:focus-visible::after{ opacity:1; }
.app-tooltip--below[data-tooltip]::after{ bottom:auto; top:calc(100% + 8px); }
.app-tooltip--wrap[data-tooltip]::after{ white-space:normal; min-width:180px; }

/* ------------------------------------------------------------
 * .app-table / .app-table__wrap — generischer Tabellen-Sockel
 *
 * Verbindlicher Standard fuer alle echten <table>-Elemente
 * projektweit (Mailbox-konform, F10).
 *
 * Tokens:
 *   th  11px, UPPERCASE, letter-spacing .5px, color var(--muted), weight 600
 *   td  13px, color var(--text)
 *   row-border       1px solid var(--border)
 *   row-hover        color-mix(var(--accent) 6%, var(--surface))
 *   row-selected     color-mix(var(--accent) 12%, var(--surface))
 *   padding          8px 12px Standard, 6px 10px im --compact
 *   wrap             radius-large, border-strong, surface, overflow-hidden
 *
 * Varianten:
 *   .app-table                — Standard
 *   .app-table--compact       — kompaktes Padding (6px 10px)
 *   .app-table--fixed         — table-layout:fixed (Spaltenbreiten gleich)
 *   .app-table tr.is-selected — selektierter Zeilen-Stil
 *
 * Spezifitaet bewusst niedrig; bereichs-spezifische Klassen
 * koennen ohne Override-Marker uebersteuern.
 * ------------------------------------------------------------ */
.app-table__wrap{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); overflow:hidden; }
.app-table__wrap--scroll{ overflow:auto; }
.app-table{ width:100%; border-collapse:collapse; font-size:13px; color:var(--text); background:transparent; }
.app-table thead th{
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--muted);
  background:color-mix(in srgb,var(--surface) 92%, var(--accent) 4%);
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1;
}
.app-table tbody td{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  font-size:13px;
  color:var(--text);
}
.app-table tbody tr{ transition:background-color .12s ease, border-color .12s ease; }
.app-table tbody tr:hover{ background:color-mix(in srgb,var(--accent) 6%, var(--surface)); cursor:pointer; }
.app-table tbody tr.is-selected,
.app-table tbody tr[aria-selected="true"]{
  background:color-mix(in srgb,var(--accent) 12%, var(--surface));
  border-color:var(--accent);
}
.app-table tbody tr:last-child td{ border-bottom:0; }
.app-table tfoot td{
  padding:8px 12px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.app-table--fixed{ table-layout:fixed; }
.app-table--compact thead th,
.app-table--compact tbody td,
.app-table--compact tfoot td{ padding:6px 10px; }
.app-table .row-title{ font-weight:600; color:var(--text); font-size:14px; }
.app-table .row-sub{ color:var(--muted); font-size:12px; margin-top:2px; }
.app-table .num,
.app-table .right{ text-align:right; font-variant-numeric:tabular-nums; }

/* table.table (generischer Mailbox-konformer Class-Selector) auf den App-Sockel heben */
table.table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  color:var(--text);
}
table.table thead th{
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--muted);
  background:color-mix(in srgb,var(--surface) 92%, var(--accent) 4%);
  padding:8px 12px;
  border-bottom:1px solid var(--border);
}
table.table tbody td{
  padding:8px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  font-size:13px;
  color:var(--text);
}
table.table tbody tr{ transition:background-color .12s ease; }
table.table tbody tr:hover{ background:color-mix(in srgb,var(--accent) 6%, var(--surface)); cursor:pointer; }
table.table tbody tr.is-selected,
table.table tbody tr[aria-selected="true"]{
  background:color-mix(in srgb,var(--accent) 12%, var(--surface));
}
table.table tbody tr:last-child td{ border-bottom:0; }
table.table .row-title{ font-weight:600; color:var(--text); font-size:14px; }
table.table .row-sub{ color:var(--muted); font-size:12px; margin-top:2px; }

/* ============================================================
 * F9 — App-Form-Input-Standards (global)
 * ------------------------------------------------------------
 * Vereinheitlicht das Erscheinungsbild aller textbasierten
 * Form-Inputs projektweit. Bereichs-spezifische Regeln (z. B.
 * .order-form-grid .field input, .auth-panel input) bleiben
 * erhalten und ueberschreiben hier dank Selektor-Spezifitaet
 * gezielt (Border-Radius, Mindesthoehe etc.).
 *
 * Designentscheidung:
 *   border       1px solid var(--border)   (--border-thin)
 *   border-radius var(--radius-tiny) (8px) — Mailbox-/app-Sockel-Standard
 *   padding      9px 12px                  — wie .app-form__input
 *   background   var(--surface)
 *   color        var(--text)
 *   font         inherit
 *   focus        border var(--accent) + 3px Accent-Ring (18% mix)
 *   disabled     opacity .6 + cursor:not-allowed
 *
 * Spezifitaet absichtlich niedrig (:where für die globalen
 * Defaults), damit jede bereichs-spezifische Regel ohne
 * Override-Marker gewinnt.
 * ============================================================ */
:where(input, textarea, select){ font:inherit; box-sizing:border-box; }
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]),
  textarea,
  select
){
  background:var(--surface);
  color:var(--text);
  border:var(--border-thin);
  border-radius:var(--radius-tiny);
  padding:9px 12px;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]):focus,
  textarea:focus,
  select:focus
){
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent);
}
:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]):disabled,
  textarea:disabled,
  select:disabled
){
  opacity:.6;
  cursor:not-allowed;
}
:where(input::placeholder, textarea::placeholder){ color:var(--muted); opacity:.7; }

/* ============================================================
 * Mobile Breakpoints fuer den .app-* Sockel
 * Tablet < 880px: Layout auf eine Spalte
 * Phone < 600px: kompaktere Paddings + Header umbruch
 * Phone < 480px: minimaler Footprint
 * ============================================================ */

@media (max-width: 880px){
  .app-page__layout{ grid-template-columns:1fr; }
  .app-page__list{ max-height:none; }
  .app-page__detail{ min-height:240px; }
  .app-detail{ padding:18px; gap:14px; }
  .app-detail--empty{ padding:40px 16px; }
  /* Master-Detail-Gefühl auf Mobile: ist ein Eintrag gewählt, schrumpft die
     Liste zu einer kompakten, intern scrollenden Leiste, das Detail dominiert.
     Die Liste bleibt sichtbar (kein „Einsperren" im Detail). Ohne :has()-Support
     greift die Regel nicht -> bisheriges Verhalten (volle Liste) als Fallback. */
  .app-page__layout:has(.app-list-item.is-active) .app-page__list{ max-height:32vh; }
}

@media (max-width: 600px){
  .app-page{ gap:12px; }
  .app-page__header{ flex-wrap:wrap; gap:8px; }
  .app-page__tabs{ width:100%; order:1; }
  .app-page__actions{ width:100%; order:2; flex-wrap:wrap; margin-left:0; justify-content:flex-start; }
  .app-page__actions .btn{ flex:0 1 auto; }
  .app-page__filters{ width:100%; }
  .app-tab{ padding:6px 14px; font-size:13px; flex:0 1 auto; }
  .app-filter-chip{ padding:5px 12px; font-size:12px; }
  .app-page__list{ padding:0; }
  .app-list-item{ padding:26px 12px 10px 12px; border-radius:var(--radius-medium); }
  .app-list-item__header{ top:6px; left:10px; right:10px; gap:6px; }
  .app-list-item__row{ gap:6px; }
  .app-page__list.has-selection .app-list-item{ padding-left:32px; }
  .app-list-item.is-checked{ padding-left:32px; }
  .app-list-item__checkbox{ left:8px; }
  .app-detail{ padding:14px; gap:12px; border-radius:var(--radius-medium); }
  .app-detail__subject{ font-size:18px; }
  .app-detail__header{ gap:8px; padding-bottom:12px; }
  .app-detail__empty-icon{ width:48px; height:48px; }
  .app-detail__empty-title{ font-size:15px; }
  .app-detail__empty-text{ font-size:12.5px; }
  .app-modal{ padding:12px; }
  .app-modal__panel--small,
  .app-modal__panel--medium,
  .app-modal__panel--large{ width:100%; max-height:calc(100vh - 24px); border-radius:var(--radius-medium); }
  .app-modal__header{ padding:10px 14px; }
  .app-modal__body{ padding:14px; gap:12px; }
  .app-modal__footer{ padding:10px 14px; flex-wrap:wrap; }
  .app-form__row--two{ grid-template-columns:1fr; }
  .app-bulk-bar{ width:100%; flex-wrap:wrap; }
}

@media (max-width: 480px){
  .app-page{ gap:10px; }
  .app-page__header{ gap:6px; }
  .app-tab{ padding:5px 10px; font-size:12px; }
  .app-filter-chip{ padding:4px 10px; font-size:11px; }
  .app-page__actions .btn{ font-size:12px; padding:5px 9px; min-height:28px; }
  .app-page__actions .btn > svg{ width:13px; height:13px; }
  .app-list-item__subject{ font-size:13px; }
  .app-list-item__from{ font-size:11px; }
  .app-list-item__header{ font-size:10px; }
  .app-detail{ padding:12px; }
  .app-detail__subject{ font-size:16px; }
}

/* Touch-Optimierung: Hover-Transformationen aus, weil sie auf Touch sticky werden */
@media (hover: none) and (pointer: coarse){
  .app-list-item:hover{ transform:none; }
  .btn:hover{ transform:none; }
  .app-tab:hover{ color:var(--text); }
  .app-filter-chip:hover{ color:var(--muted); }
}

/* ---------- Picker Modal (z.B. Auftrags-Auswahl) ---------- */

.picker-backdrop{ position:fixed; inset:0; background:color-mix(in srgb,#0b1626 65%, transparent); backdrop-filter:blur(2px); z-index:10500; display:flex; align-items:center; justify-content:center; padding:20px; }
.picker-modal{ background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-large); width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; }
.picker-modal__header{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.picker-modal__header h3{ margin:0; font-size:16px; font-weight:600; }
.picker-modal__close{ background:transparent; border:none; font-size:24px; line-height:1; color:var(--muted); cursor:pointer; padding:0 6px; border-radius:6px; }
.picker-modal__close:hover{ background:color-mix(in srgb,var(--muted) 12%, transparent); color:var(--text); }
.picker-modal__description{ padding:8px 20px 0; margin:0; color:var(--muted); font-size:13px; }
.picker-modal__search{ padding:12px 20px; border-bottom:1px solid var(--border); }
.picker-modal__search input{ width:100%; padding:10px 14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); font-size:14px; }
.picker-modal__search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%, transparent); }
.picker-modal__list{ flex:1; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:4px; min-height:120px; }
.picker-modal__item{ display:grid; grid-template-columns:1fr auto; column-gap:10px; row-gap:2px; padding:10px 14px; background:transparent; border:1px solid transparent; border-radius:10px; text-align:left; cursor:pointer; transition:all .12s ease; }
.picker-modal__item:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, transparent); }
.picker-modal__item-name{ font-weight:500; font-size:14px; color:var(--text); }
.picker-modal__item-id{ font-size:11px; color:var(--muted); align-self:end; text-align:right; font-family:ui-monospace,monospace; }
.picker-modal__item-status{ grid-column:1 / -1; font-size:11px; color:var(--muted); }
.picker-modal__empty{ padding:30px 20px; text-align:center; color:var(--muted); font-size:13px; }
.picker-modal__footer{ padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

@media (max-width: 600px){
  .picker-modal{ max-height:90vh; max-width:none; border-radius:14px; }
  .picker-modal__item{ grid-template-columns:1fr; }
  .picker-modal__item-id{ text-align:left; }
}

/* Picker-Select trigger button (replaces long <select> dropdowns) */
.picker-select{ display:block; width:100%; }
.picker-trigger{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font:inherit; cursor:pointer; text-align:left; transition:border-color .12s ease, background .12s ease; }
.picker-trigger:hover:not(:disabled){ border-color:var(--accent); }
.picker-trigger:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%, transparent); }
.picker-trigger:disabled{ opacity:.55; cursor:not-allowed; }
.picker-trigger.is-empty .picker-trigger__label{ color:var(--muted); }
.picker-trigger__label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.picker-trigger__caret{ color:var(--muted); margin-left:8px; font-size:12px; }
.picker-modal__item.is-active{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, transparent); }
.picker-modal__item{ position:relative; padding-right:42px; }
.picker-modal__item::after{ content:''; position:absolute; top:50%; right:14px; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:transparent; border:1.5px solid color-mix(in srgb,var(--muted) 60%, transparent); box-sizing:border-box; color:#fff; font-size:11px; font-weight:700; line-height:1; opacity:0; transition:opacity .12s ease, background-color .12s ease; }
.picker-modal__item.is-active::after{ content:'✓'; background:var(--accent); opacity:1; }

/* Generic stepper component (used by Lexware-Offer-Modal) */
.stepper-bar{ display:flex; gap:8px; margin:8px 0 14px; flex-wrap:wrap; align-items:stretch; }
.stepper-step{ flex:1 1 0; min-width:140px; display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); border:1px solid var(--border); border-radius:10px; color:var(--muted); cursor:pointer; font:inherit; text-align:left; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.stepper-step:hover{ border-color:var(--accent); }
.stepper-step.is-active{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--text); }
.stepper-step.is-done .stepper-step-index{ background:var(--accent); color:#fff; border-color:var(--accent); }
.stepper-step-index{ display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; border-radius:50%; border:1px solid var(--border); background:transparent; font-size:12px; font-weight:600; }
.stepper-step.is-active .stepper-step-index{ background:var(--accent); color:#fff; border-color:var(--accent); }
.stepper-step-label{ font-size:13px; font-weight:500; }
.stepper-section{ display:none; }
.stepper-section.is-active{ display:block; animation:stepperSectionIn .18s ease-out; }
.stepper-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); flex-wrap:wrap; }
@keyframes stepperSectionIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (max-width:480px){
  .stepper-bar{ gap:6px; }
  .stepper-step{ min-width:0; padding:6px 8px; }
  .stepper-step-label{ font-size:12px; }
}

/* ============================================================
 * App-Modal Basis — wiederverwendbar fuer alle Bereiche
 * ausserhalb der Mailbox.
 * Vorlage: .mailbox-attachment-overlay (styles.css:10384–10398)
 * und .mailbox-compose__* (Form-Felder, Dropzone).
 * Die Mailbox-Klassen bleiben unveraendert; .app-modal/.app-form
 * sind PARALLELE generische Pendants.
 * ============================================================ */
.app-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10000; padding:24px; backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease; }
.app-modal.is-open{ opacity:1; visibility:visible; }
/* Breiten viewport-basiert (nicht %), damit das Panel bei width:auto-Box (.box:has(>panel))
   nicht auf Content-Breite kollabiert, sondern seine intendierte Breite behaelt und mittig sitzt. */
.app-modal__panel{ background:var(--bg); border:var(--border-strong); border-radius:var(--radius-large); max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.4); width:min(720px, calc(100vw - 48px)); margin-inline:auto; }
.app-modal__panel--small{ width:min(480px, calc(100vw - 48px)); }
.app-modal__panel--medium{ width:min(720px, calc(100vw - 48px)); }
.app-modal__panel--large{ width:min(960px, calc(100vw - 48px)); }
.app-modal__header{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:var(--border-thin); }
.app-modal__title{ font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.app-modal__close{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border:var(--border-thin); border-radius:var(--radius-tiny); background:var(--surface); color:var(--text); cursor:pointer; padding:0; transition:border-color .12s ease, background-color .12s ease, color .12s ease; }
.app-modal__close:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, var(--surface)); }
.app-modal__close svg{ display:block; width:22px; height:22px; }
.app-modal__body{ flex:1; min-height:0; overflow:auto; padding:16px 18px; display:flex; flex-direction:column; gap:14px; }
.app-modal__footer{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:12px 16px; border-top:var(--border-thin); flex-wrap:wrap; }
.app-modal__footer--space-between{ justify-content:space-between; }

/* Form-Helper, die jeder Modal-Subagent nutzen kann */
.app-form__row{ display:flex; flex-direction:column; gap:6px; }
.app-form__row--two{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:12px; align-items:start; }
/* Alt-Formular-Labels (`.field > label`) in Modals an den app-form__label-Stil angleichen,
   damit gemischte Modals (Lead-Edit/-Erfolg, Netzbetreiber) einheitlich wirken. Switch-Labels
   und der „(Pflicht)"-Hinweis bleiben ausgenommen. */
.app-modal__body .field > label:not(.switch):not(.app-form__label){ font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); font-weight:600; color:var(--muted); display:block; }
.app-modal__body .field > label:not(.switch) .muted-small{ text-transform:none; letter-spacing:0; font-weight:400; }
.app-form__label{ font-size:var(--label-size); text-transform:uppercase; letter-spacing:var(--label-tracking); font-weight:600; color:var(--muted); }
.app-form__hint{ font-size:11px; color:var(--muted); }

/* Modal-Abschnitte: gliedern lange Formulare in thematische Blöcke (Kontakt/Adresse/…),
   getrennt durch eine feine Linie + dezente Überschrift — reduziert die wahrgenommene Dichte. */
.modal-section{ display:flex; flex-direction:column; gap:12px; }
.modal-section + .modal-section{ margin-top:4px; padding-top:16px; border-top:1px solid color-mix(in srgb,var(--border) 55%, transparent); }
.modal-section__title{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--muted); }
.modal-section__title .muted-small{ text-transform:none; letter-spacing:0; font-weight:400; }
.app-form__error{ font-size:11px; color:#d04545; }
.app-form__input,
.app-form__textarea,
/* background-color statt background-Shorthand + Platz rechts, damit der globale
   select-Pfeil (Regel `select{}`) erhalten bleibt und das Feld als Auswahl erkennbar ist. */
.app-form__select{ width:100%; padding:9px 34px 9px 12px; border:var(--border-thin); border-radius:var(--radius-tiny); background-color:var(--surface); color:var(--text); font:inherit; box-sizing:border-box; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.app-form__textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.app-form__input::placeholder,
.app-form__textarea::placeholder{ color:var(--muted); opacity:.7; }
.app-form__input:focus,
.app-form__textarea:focus,
.app-form__select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.app-form__dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; border:var(--border-dashed); border-radius:var(--radius-small); background:color-mix(in srgb,var(--surface) 60%, transparent); color:var(--muted); text-align:center; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, color .15s ease; }
.app-form__dropzone:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 5%, var(--surface)); }
.app-form__dropzone.is-dragover{ border-style:solid; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%, transparent); color:var(--accent); }

@media (max-width: 600px){
  .app-modal{ padding:0; }
  .app-modal__panel--medium,
  .app-modal__panel--large{ width:100%; max-height:100dvh; border-radius:0; }
  /* Footer-Buttons nicht hinter dem Home-Indicator verstecken */
  .app-modal__footer{ padding-bottom:calc(12px + var(--safe-area-bottom)); }
  .app-form__row--two{ grid-template-columns:1fr; }
}

/* Attachment-Overlay auf Mobile als Vollbild (dvh statt vh, kein Padding) */
@media (max-width: 600px){
  .mailbox-attachment-overlay{ padding:0; }
  .mailbox-attachment-overlay__panel{ width:100%; max-height:100dvh; height:100dvh; border-radius:0; }
  .mailbox-attachment-overlay__media{ max-height:calc(100dvh - 120px); }
  .mailbox-attachment-overlay__frame{ height:calc(100dvh - 120px); }
}

/* Touch-Geräte: Mindest-Trefferflächen (HIG/Material ~44px) für die kleinen
   Bedienelemente, die auf dem Desktop kompakt bleiben dürfen. */
@media (pointer: coarse){
  .app-tab,
  .app-filter-chip{ min-height:40px; display:inline-flex; align-items:center; }
  .icon-btn,
  .app-modal__close,
  .mailbox-attachment-overlay__icon-btn{ min-width:40px; min-height:40px; }
  .app-page__actions .btn{ min-height:40px; }
  /* U11: weitere kleine Bedienelemente auf Touch-taugliche 40px anheben. */
  .copyable-action,
  .netz-meister-list-item__action{ min-width:40px; min-height:40px; }
  .status-pill-interactive{ min-height:40px; }
  .mailbox-bulk-bar .btn,
  .app-bulk-bar .btn{ height:auto; min-height:40px; padding:0 12px; }
}

/* ============================================================
 * Inbox-spezifisch — In-App-Benachrichtigungen (#/inbox).
 * Erbt zu 95% vom .app-* Sockel; nur Ungelesen-Indikator,
 * Tab-Counter, Load-More-Footer und Detail-Actions sind eigen.
 * Mailbox-Stil-Mandat: keine Override-Spezifika, keine Hardcoded-Farben
 * ausserhalb der freigegebenen Badge-Hex-Werte.
 * ============================================================ */
.inbox-page{ /* nichts zusaetzliches — Sockel reicht */ }
.app-tab__count{ background:color-mix(in srgb,#000 25%, transparent); color:inherit; padding:1px 7px; border-radius:var(--badge-radius); font-size:11px; font-weight:600; margin-left:4px; }
.app-tab.is-active .app-tab__count{ background:color-mix(in srgb,#000 35%, transparent); }

.inbox-list-item--unread .app-list-item__subject{ color:var(--text); }
.inbox-list-item--read .app-list-item__subject{ color:var(--muted); font-weight:500; }
.inbox-list-item--read .app-list-item__from{ color:var(--muted); }
.inbox-list-item__dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--accent); }

.inbox-list-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; background:var(--surface); border:var(--border-thin); border-radius:var(--radius-medium); font-size:12px; color:var(--muted); flex-wrap:wrap; }
.inbox-list-footer__status{ flex:1 1 auto; min-width:0; }

.inbox-detail__message{ white-space:pre-wrap; color:var(--text); font-size:14px; line-height:1.55; }
.inbox-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

/* ============================================================
 * Users-spezifisch — Benutzerverwaltung (#/users).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur
 * rollen-spezifische Source-Badges und Detail-Aktionsleiste.
 * Erlaubte zusaetzliche Hex-Farben (siehe mailbox-style-guide):
 *   admin #ff6b6b · meister #f2994a · partner #3bd671 · internal #9b51e0
 * Sockel-Farben bleiben unveraendert.
 * ============================================================ */
.users-page{ /* erbt vom .app-page Sockel */ }
.app-source--muted{ background:color-mix(in srgb,var(--muted) 14%, transparent); color:var(--muted); }
.app-source--admin{ background:color-mix(in srgb,#ff6b6b 18%, transparent); color:#d04545; }
.app-source--meister{ background:color-mix(in srgb,#f2994a 18%, transparent); color:#f2994a; }
.app-source--partner{ background:color-mix(in srgb,#3bd671 18%, transparent); color:#28a745; }
.app-source--internal{ background:color-mix(in srgb,#9b51e0 18%, transparent); color:#9b51e0; }

.users-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.users-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.users-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.users-page__sort:focus{ outline:none; border-color:var(--accent); }

.users-list-item .app-list-item__subject{ color:var(--text); }
.users-list-item .app-list-item__from{ color:var(--muted); }

.users-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

@media (max-width: 720px){
  .users-page__search{ min-width:0; flex:1 1 100%; }
}

/* ============================================================
 * Termine-spezifisch — Terminplanung (#/termine).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur die
 * Such-/Sortier-Kontrollen, eine Detail-Aktionsleiste und einen
 * dezenten Reschedule-Hinweis-Block. Source-/Status-Badges nutzen
 * die existierende app-source-/app-status-Palette ohne neue Hexe.
 * ============================================================ */
.termine-page{ /* erbt vom .app-page Sockel */ }
.termine-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.termine-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.termine-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.termine-page__sort:focus{ outline:none; border-color:var(--accent); }

.termine-list-item .app-list-item__subject{ color:var(--text); }
.termine-list-item .app-list-item__from{ color:var(--muted); }

.termine-detail__message{ white-space:pre-wrap; color:var(--text); font-size:14px; line-height:1.55; }
.termine-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

/* ============================================================
 * Leads-spezifisch — Lead-Pipeline (#/leads).
 * Folgt dem Mailbox-/app-Sockel; ergaenzt nur Such-/Sortier-Kontrollen,
 * eine Detail-Aktionsleiste sowie Body-Sections (Beschreibung/Notiz).
 * Source-/Status-Badges nutzen die existierende app-source-/app-status-
 * Palette ohne neue Hex-Werte.
 * ============================================================ */
.leads-page{ /* erbt vom .app-page Sockel */ }
.leads-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.leads-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.leads-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.leads-page__sort:focus{ outline:none; border-color:var(--accent); }

.leads-list-item .app-list-item__subject{ color:var(--text); }
.leads-list-item .app-list-item__from{ color:var(--muted); }

.leads-detail__section{ display:flex; flex-direction:column; gap:6px; }
.leads-detail__text{ white-space:pre-wrap; color:var(--text); font-size:14px; line-height:1.55; }
.leads-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

@media (max-width: 720px){
  .leads-page__search{ min-width:0; flex:1 1 100%; }
}

@media (max-width: 720px){
  .termine-page__search{ min-width:0; flex:1 1 100%; }
}

/* ============================================================
 * Projects-spezifisch — Hauptliste (#/projects).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur die
 * Pill-Filterleiste fuer den Status-Fokus, kleine Anpassungen
 * der Such-/Sort-Felder und das Action-Layout im Mini-Detail.
 * Keine neuen Hex-Farben, keine Important-Overrides.
 * ============================================================ */
.projects-page{ /* erbt vom .app-page Sockel */ }
.projects-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.projects-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.projects-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.projects-page__sort:focus{ outline:none; border-color:var(--accent); }
.projects-page__filters{ display:flex; gap:6px; flex-wrap:wrap; }
.projects-page__filter{ font-size:12px; padding:6px 12px; }

.projects-list-item .app-list-item__subject{ color:var(--text); }
.projects-list-item .app-list-item__from{ color:var(--muted); }

.projects-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

@media (max-width: 720px){
  .projects-page__search{ min-width:0; flex:1 1 100%; }
}

/* ============================================================
 * Lead-Detail-spezifisch — reine Detail-Seite (#/lead/{id}).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur das
 * zwei-Spalten-Layout fuer Meta-Karten links und Aktivitaets-Feed
 * rechts sowie die Topbar-Aktionen. Keine neuen Hex-Farben.
 * ============================================================ */
.lead-detail-page{ /* erbt vom .app-page Sockel */ }
.lead-detail-page__topbar{ align-items:center; }
.lead-detail-page__breadcrumb{ font-weight:600; }
.lead-detail-page__actions{ gap:8px; align-items:center; flex-wrap:wrap; }
.lead-detail-page__layout{
  display:grid;
  grid-template-columns:minmax(320px, 420px) 1fr;
  grid-template-rows:minmax(0, 1fr);
  gap:var(--page-layout-gap);
  flex:1;
  min-height:0;
}
.lead-detail-page__meta{
  background:var(--surface);
  border:var(--border-strong);
  border-radius:var(--radius-large);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:16px;
  overflow-y:auto;
  min-height:0;
}
.lead-detail-page__header{ padding-bottom:14px; border-bottom:1px solid var(--border); }
.lead-detail-page__card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px;
  background:var(--surface);
  border:var(--border-strong);
  border-radius:var(--radius-large);
}
.lead-detail-page__card--wide{ gap:10px; }
.lead-detail-page__fields{ display:flex; flex-direction:column; gap:2px; }

.lead-detail-page__feed{
  background:var(--surface);
  border:var(--border-strong);
  border-radius:var(--radius-large);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:20px;
  min-height:0;
  overflow:hidden;
}
.lead-detail-page__feed-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.lead-detail-page__feed-title{ margin:0; font-size:16px; font-weight:600; color:var(--text); }
.lead-detail-page__feed-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.lead-detail-page__feed-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:var(--list-gap);
  padding-right:4px;
}

@media (max-width: 880px){
  .lead-detail-page__layout{ grid-template-columns:1fr; }
  .lead-detail-page__meta{ max-height:none; }
}

/* ============================================================
 * Tasks-spezifisch — Aufgabenliste (#/tasks).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur die
 * tasks-spezifischen Helfer (Suche, Sort, Detail-Aktionen,
 * Beschreibung). Status- und Prioritaets-Badges nutzen die
 * Sockel-Toene (app-status--ok/warn/info/muted,
 * app-source--ok/warn/danger/info/muted) ohne neue Hex-Farben.
 * ============================================================ */
.tasks-page{ /* erbt vom .app-page Sockel */ }
.tasks-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:240px; }
.tasks-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.tasks-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.tasks-page__sort:focus{ outline:none; border-color:var(--accent); }

.tasks-list-item .app-list-item__subject{ color:var(--text); }
.tasks-list-item .app-list-item__from{ color:var(--muted); }

.tasks-detail__description{ white-space:pre-wrap; word-break:break-word; color:var(--text); font-size:14px; line-height:1.55; }
.tasks-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

@media (max-width: 720px){
  .tasks-page__search{ min-width:0; flex:1 1 100%; }
}

/* ============================================================
 * Activities-spezifisch — Aktivitaeten-Verlauf (Projekt-Detail).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur die
 * Aktivitaets-Typ-Source-Badges, einen kompakten Avatar-Slot
 * und die Detail-Karte fuer renderActivityDetailCard.
 * Erlaubte zusaetzliche Hex-Farben (siehe mailbox-style-guide):
 *   note #5b8def · status-change #9b51e0 · call #3bd671 ·
 *   email #f7b500 · meeting #f2994a
 * Wiederverwendung von vorhandenen Source-Hex-Farben wo moeglich;
 * status-change uebernimmt das bereits genutzte Internal-Lila.
 * ============================================================ */
.app-source--note{ background:color-mix(in srgb,#5b8def 18%, transparent); color:#5b8def; }
.app-source--status-change{ background:color-mix(in srgb,#9b51e0 18%, transparent); color:#9b51e0; }
.app-source--call{ background:color-mix(in srgb,#3bd671 18%, transparent); color:#28a745; }
.app-source--email{ background:color-mix(in srgb,#f7b500 18%, transparent); color:#b88300; }
.app-source--meeting{ background:color-mix(in srgb,#f2994a 18%, transparent); color:#f2994a; }

.activity-list-item{ cursor:default; padding-top:30px; }
.activity-list-item.is-editable{ cursor:pointer; }
.activity-list-item__body{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.activity-list-item__avatar{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.activity-list-item__avatar .avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.activity-list-item__avatar .avatar-placeholder{ width:32px; height:32px; border-radius:50%; background:color-mix(in srgb,var(--accent) 18%, var(--surface)); color:var(--text); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }
.activity-list-item__copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.activity-list-item__subject{ font-size:14px; font-weight:600; }
.activity-list-item__message{ font-size:13px; line-height:1.5; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.activity-list-item__message a{ color:var(--accent); }
.activity-list-item__from{ font-size:12px; color:var(--muted); }

.activity-detail{ display:flex; flex-direction:column; gap:14px; }
.activity-detail__match{ display:flex; flex-direction:column; gap:6px; padding:12px 16px; border-radius:10px; border:1.5px solid var(--border); background:color-mix(in srgb,var(--muted) 6%, transparent); }
.activity-detail__match .app-detail__match-content{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.activity-detail__match .app-detail__match-label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.activity-detail__match .app-detail__match-link{ display:inline-flex; align-items:center; gap:6px; color:var(--accent); text-decoration:none; font-size:13px; font-weight:600; }
.activity-detail__match .app-detail__match-link:hover{ color:var(--text); }
.activity-detail__match .app-detail__match-link-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.activity-detail__match .app-detail__match-link-arrow{ font-size:14px; line-height:1; transition:transform .15s ease; }
.activity-detail__match .app-detail__match-link:hover .app-detail__match-link-arrow{ transform:translateX(3px); }
.activity-detail__message{ white-space:pre-wrap; word-break:break-word; color:var(--text); font-size:14px; line-height:1.55; }
.activity-detail__message a{ color:var(--accent); }

.activity-list-empty{ /* erbt vom .app-list-empty Sockel */ }

/* Inline-Linktext fuer renderActivityDetails (Dashboard-/Meta-Slot). */
.app-detail__inline-link{ color:var(--accent); text-decoration:none; font-weight:600; }
.app-detail__inline-link:hover{ color:var(--text); text-decoration:underline; }

/* ============================================================
 * Netz-Meister-spezifisch — Elektromeister-Zugaenge im
 * Netzbetreiber-Modal (renderNetzMeister). Folgt vollstaendig
 * dem app-list-item-Sockel; ergaenzt nur Credential-Grid und
 * dezente Aktions-Buttons im Header-Slot.
 * ============================================================ */
.netz-meister-list-item{ cursor:default; padding-top:30px; gap:4px; }
.netz-meister-list-item:hover{ transform:none; border-color:var(--border); }
.netz-meister-list-item__action{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; transition:border-color .12s ease, color .12s ease, background-color .12s ease; pointer-events:auto; }
.netz-meister-list-item__action:hover{ border-color:var(--accent); color:var(--accent); }
.netz-meister-list-item__action--danger:hover{ border-color:#ff6b6b; color:#d04545; background:color-mix(in srgb,#ff6b6b 8%, var(--surface)); }
.netz-meister-list-item__credentials{ margin-top:8px; display:grid; gap:8px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.netz-meister-list-item__cred{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.netz-meister-list-item__cred-label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.netz-meister-list-item__cred-value{ font-size:13px; font-weight:500; color:var(--text); word-break:break-word; }
.netz-meister-list-empty{ /* erbt vom .app-list-empty Sockel */ }

@media (max-width: 640px){
  .netz-meister-list-item__credentials{ grid-template-columns:1fr; }
}

/* ============================================================
 * Netzbetreiber-spezifisch — Bestandsuebersicht (#/netzbetreiber).
 * Folgt vollstaendig dem Mailbox-/app-Sockel; ergaenzt nur die
 * Such-/Sort-Pills im Header sowie die Detail-Aktionsleiste.
 * Status- und Source-Toene nutzen die Sockel-Klassen
 * (.app-source--customer/--meister/--netzbetreiber/--muted und
 * .app-status--ok/--warn/--danger/--muted) ohne neue Hex-Farben.
 * ============================================================ */
.netzbetreiber-page{ /* erbt vom .app-page Sockel */ }
.netzbetreiber-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.netzbetreiber-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.netzbetreiber-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.netzbetreiber-page__sort:focus{ outline:none; border-color:var(--accent); }

.netzbetreiber-list-item .app-list-item__subject{ color:var(--text); }
.netzbetreiber-list-item .app-list-item__from{ color:var(--muted); }

.netzbetreiber-detail__match{ background:color-mix(in srgb,var(--muted) 6%, transparent); padding:10px 14px; }
.netzbetreiber-detail__match-text{ font-size:13px; color:var(--text); word-break:break-word; }
.netzbetreiber-detail__empty-note{ font-size:13px; color:var(--muted); padding:8px 0; }
.netzbetreiber-detail__actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); flex-wrap:wrap; }

@media (max-width: 720px){
  .netzbetreiber-page__search{ min-width:0; flex:1 1 100%; }
}

/* ============================================================
 * NB-Inbox-spezifisch (B12) — Netzbetreiber-Inbox-Workspace-Panel.
 * Folgt vollstaendig dem .app-page-/Mailbox-Sockel; ergaenzt nur
 * eine schmale Statuszeile unter dem Header, eine kompakte
 * Suggestion-Buttonleiste im Match-Block und eine bottom-fixed
 * Actions-Leiste im Detail. Status- und Source-Badges nutzen die
 * vorhandenen .app-source--netzbetreiber / .app-status--ok|warn|
 * muted Klassen ohne neue Hex-Farben.
 * ============================================================ */
.nb-inbox-page{ /* erbt vom .app-page Sockel */ }
.nb-inbox-page__status{ display:flex; flex-direction:column; gap:6px; padding:8px 12px; background:var(--surface); border:var(--border-thin); border-radius:var(--radius-medium); font-size:12px; color:var(--muted); }
.nb-inbox-page__status-line{ line-height:1.5; }
.nb-inbox-page__error{ color:#d04545; background:color-mix(in srgb,#ff6b6b 8%, transparent); border:1px solid color-mix(in srgb,#ff6b6b 40%, var(--border)); border-radius:var(--radius-small,8px); padding:6px 10px; font-size:12px; }

.nb-inbox-list-item .app-list-item__subject{ color:var(--text); }
.nb-inbox-list-item .app-list-item__from{ color:var(--muted); }

.nb-inbox-detail__match-text{ font-size:13px; color:var(--text); word-break:break-word; line-height:1.5; }
.nb-inbox-detail__suggestions{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.nb-inbox-detail__message{ white-space:pre-wrap; word-break:break-word; color:var(--text); font-size:14px; line-height:1.55; }
.nb-inbox-detail__actions{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:auto; padding-top:14px; border-top:1px solid var(--border); }

@media (max-width: 720px){
  .nb-inbox-page__status{ font-size:11px; }
  .nb-inbox-detail__actions{ justify-content:stretch; }
  .nb-inbox-detail__actions .btn{ flex:1 1 auto; }
}

/* ============================================================
 * Login-Instance-Picker-spezifisch (B24) — Auswahl-Picker auf
 * dem Login-Screen, falls eine E-Mail-Adresse mehreren Soltair-
 * Instanzen zugeordnet ist. Nutzt das .app-modal-Pattern als
 * Schale und stellt jede Instanz als .app-list-item-Button dar
 * (Header mit Badge + Pfad/URL, Subject = Name, From = Domain).
 * ============================================================ */
.login-instance-picker__body{ gap:14px; }
.login-instance-picker__search{ display:flex; flex-direction:column; gap:6px; }
.login-instance-picker__list{ display:flex; flex-direction:column; gap:var(--list-gap); }
.login-instance-picker__empty{ padding:14px; border:var(--border-dashed); border-radius:var(--radius-small); color:var(--muted); font-size:13px; text-align:center; }
.login-instance-item:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }

/* ============================================================
 * Settings-spezifisch (B22) — Einstellungen mit Sidebar-Navigation.
 * 20+ Sub-Tabs sind besser via Sidebar + Content-Bereich abgebildet
 * als via List+Detail. Der Stil bleibt strikt Mailbox-konform:
 * Sidebar = scrollende Liste mit Icon + Label, Content = scrollende
 * Surface-Card. Borders 1.5px, Radii 14px/12px/8px, Accent-Tinte
 * fuer Hover/Active, keine neuen Hex-Farben.
 * Die bereits migrierten Sub-Tabs Profil, Rollen und API-Verbindungen
 * (Folge-PR: restliche ~17) bekommen einen Mailbox-Header mit Titel
 * und Aktionen ueber .settings-page__section-header.
 * ============================================================ */
.settings-page{ display:flex; flex-direction:column; gap:var(--page-gap); width:100%; max-width:none; margin:0; height:100%; min-height:0; }
.settings-page .settings-shell{ width:100%; max-width:none; margin:0; padding:0; display:flex; flex-direction:column; flex:1; min-height:0; height:100%; overflow:hidden; gap:0; box-shadow:none; background:transparent; border:0; border-radius:0; }
.settings-page .settings-layout{ display:grid; grid-template-columns:minmax(240px, 280px) 1fr; grid-template-rows:minmax(0, 1fr); gap:var(--page-layout-gap); align-items:stretch; flex:1; width:100%; max-width:100%; height:100%; min-height:0; overflow:hidden; }
.settings-page .settings-sidebar{ display:flex; flex-direction:column; gap:0; position:relative; align-self:stretch; height:100%; min-height:0; overflow:hidden; background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); }
.settings-page .settings-nav-card{ display:flex; flex-direction:column; flex:1; height:100%; min-height:0; max-height:100%; overflow-y:auto; overflow-x:hidden; padding:14px; gap:14px; background:transparent; border:0; border-radius:0; box-shadow:none; overscroll-behavior:contain; }
.settings-page .settings-nav-group{ display:flex; flex-direction:column; gap:6px; }
.settings-page .settings-nav-group + .settings-nav-group{ padding-top:12px; border-top:1px solid var(--border); }
.settings-page .settings-nav-label{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:0 4px; }
.settings-page .settings-nav-list{ display:flex; flex-direction:column; gap:4px; }
.settings-page .settings-nav-btn{ width:100%; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:9px 10px; border-radius:var(--radius-medium); background:transparent; border:1.5px solid transparent; color:var(--text); text-align:left; box-shadow:none; cursor:pointer; transition:border-color .15s ease, background-color .15s ease, transform .15s ease; min-height:0; }
.settings-page .settings-nav-btn:hover{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 6%, transparent); transform:none; }
.settings-page .settings-nav-btn:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.settings-page .settings-nav-btn.is-active{ border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--surface)); box-shadow:inset 0 0 0 1px var(--accent); }
.settings-page .settings-icon-badge{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:var(--radius-tiny); border:1.5px solid var(--border); background:color-mix(in srgb,var(--surface) 70%, transparent); color:var(--muted); transition:border-color .15s ease, color .15s ease, background-color .15s ease; }
.settings-page .settings-icon-badge .icon,
.settings-page .settings-nav-btn .icon{ width:15px; height:15px; opacity:1; background-color:currentColor; }
.settings-page .settings-nav-btn:hover .settings-icon-badge,
.settings-page .settings-nav-btn:focus-visible .settings-icon-badge,
.settings-page .settings-nav-btn.is-active .settings-icon-badge{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 10%, transparent); }
.settings-page .settings-nav-copy{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.settings-page .settings-nav-copy strong{ font-size:13px; font-weight:600; line-height:1.3; color:var(--text); }
.settings-page .settings-nav-copy span{ font-size:11px; line-height:1.35; color:var(--muted); }
.settings-page .settings-main{ display:flex; flex-direction:column; gap:0; align-self:stretch; justify-self:stretch; width:100%; max-width:100%; min-width:0; min-height:0; height:100%; overflow-y:auto; overflow-x:hidden; padding:0; background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); overscroll-behavior:contain; }
.settings-page .settings-main > *{ flex:0 0 auto; width:100%; max-width:100%; align-self:stretch; }
.settings-page .settings-surface{ padding:20px 22px; display:flex; flex-direction:column; gap:16px; border-radius:0; border:0; border-bottom:1px solid var(--border); background:transparent; box-shadow:none; }
.settings-page .settings-main > .settings-surface:last-child{ border-bottom:0; }
.settings-page .settings-section-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.settings-page .settings-section-head h2{ margin:0; font-size:20px; font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--text); }
.settings-page .settings-section-copy{ margin:0; max-width:68ch; color:var(--muted); font-size:13px; line-height:1.55; }
.settings-page .settings-kicker{ display:inline-flex; align-items:center; width:max-content; min-height:0; padding:3px 10px; border-radius:999px; border:1.5px solid color-mix(in srgb,var(--accent) 34%, var(--border)); background:color-mix(in srgb,var(--accent) 10%, transparent); color:var(--text); font-size:10px; font-weight:600; line-height:1.4; letter-spacing:.5px; text-transform:uppercase; }
.settings-page .settings-panel{ border-radius:var(--radius-medium); border:var(--border-strong); background:color-mix(in srgb,var(--surface) 60%, transparent); padding:16px; gap:12px; box-shadow:none; }
.settings-page .settings-panel::before{ display:none; }
.settings-page .settings-panel--accent{ border-color:color-mix(in srgb,var(--accent) 30%, var(--border)); background:color-mix(in srgb,var(--accent) 6%, var(--surface)); }
.settings-page .settings-panel__header h3{ margin:0; font-size:15px; font-weight:600; line-height:1.3; }
.settings-page .settings-panel__header p{ margin:4px 0 0; font-size:12px; color:var(--muted); line-height:1.5; }
.settings-page .settings-panel__eyebrow{ font-size:11px; }
.settings-page .settings-metric-grid{ display:none; }
.settings-page .settings-tab-row{ display:flex; gap:6px; flex-wrap:wrap; }
.settings-page .settings-tab-row .btn{ background:color-mix(in srgb,var(--surface) 80%, transparent); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 14px; font-size:13px; color:var(--text); box-shadow:none; }
.settings-page .settings-tab-row .btn:hover{ border-color:var(--accent); color:#fff; }
.settings-page .settings-tab-row .btn.primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.settings-page .settings-section-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.settings-page .settings-list-empty{ padding:40px 20px; text-align:center; color:var(--muted); font-size:14px; background:color-mix(in srgb,var(--surface) 50%, transparent); border:var(--border-dashed); border-radius:var(--radius-medium); }

/* Mailbox-Stil-Header fuer migrierte Sub-Tabs (Profil, Rollen, API-Verbindungen). */
.settings-page__section-header{ display:flex; justify-content:space-between; align-items:center; gap:var(--header-gap); flex-wrap:wrap; padding:14px 22px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--surface) 90%, transparent); }
.settings-page__section-title{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.settings-page__section-title h2{ margin:0; font-size:16px; font-weight:600; line-height:1.3; color:var(--text); }
.settings-page__section-title p{ margin:0; font-size:12px; color:var(--muted); line-height:1.45; }
.settings-page__section-actions{ display:inline-flex; gap:8px; flex-wrap:nowrap; align-items:center; margin-left:auto; flex-shrink:0; }

@media (max-width: 880px){
  .settings-page .settings-layout{ grid-template-columns:1fr; grid-template-rows:auto 1fr; overflow:visible; }
  .settings-page .settings-sidebar{ height:auto; max-height:none; min-height:0; overflow:visible; }
  .settings-page .settings-nav-card{ max-height:none; overflow:visible; }
  .settings-page .settings-main{ overflow:visible; }
}

/* ============================================================
 * Inventory-spezifisch (B14) — Lagerverwaltung mit 9 Tabs.
 * Folgt vollstaendig dem .app-page-/Mailbox-Sockel; ergaenzt nur
 * tab-spezifische Strukturen wie die KPI-Metric-Cards, die
 * Overview-Cards mit Mini-Listen und den Toolbar-Block fuer
 * Artikel-/Lagerorte-Listen. Keine neuen Hex-Farben — Status-
 * Pills nutzen die vorhandene .app-status--ok|warn|danger|muted
 * Palette aus dem Sockel.
 * ============================================================ */
.inventory-page{ /* erbt vom .app-page Sockel */ }
.app-tab.inventory-tab--warn{ border-color:color-mix(in srgb,#ff6b6b 50%, var(--border)); color:#d04545; }
.app-tab.inventory-tab--warn.is-active{ background:#ff6b6b; border-color:#ff6b6b; color:#fff; }

.inventory-page__content{ display:flex; flex-direction:column; gap:var(--list-gap); flex:1; min-height:0; }

.inventory-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.inventory-metric{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-medium); padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.inventory-metric__label{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; }
.inventory-metric__value{ font-size:22px; font-weight:600; color:var(--text); line-height:1.2; }
.inventory-metric__hint{ font-size:12px; color:var(--muted); line-height:1.4; }
.inventory-metric--danger{ border-color:color-mix(in srgb,#ff6b6b 50%, var(--border)); background:color-mix(in srgb,#ff6b6b 6%, var(--surface)); }
.inventory-metric--danger .inventory-metric__value{ color:#d04545; }

.inventory-overview{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }
.inventory-overview-card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:16px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.inventory-overview-card--warn{ border-color:color-mix(in srgb,#ff6b6b 50%, var(--border)); background:color-mix(in srgb,#ff6b6b 4%, var(--surface)); }
.inventory-overview-card__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding-top:4px; }
.inventory-overview-card__eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600; }
.inventory-overview-card__title{ margin:2px 0 0 0; font-size:15px; font-weight:600; color:var(--text); }
.inventory-overview-list{ display:flex; flex-direction:column; gap:6px; }
.inventory-overview-row{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:10px 12px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px; text-align:left; color:var(--text); font-size:13px; cursor:default; transition:border-color .12s ease, transform .12s ease; }
button.inventory-overview-row{ cursor:pointer; }
button.inventory-overview-row:hover{ border-color:var(--accent); transform:translateY(-1px); }
.inventory-overview-row__title{ font-weight:600; color:var(--text); grid-column:1 / 2; }
.inventory-overview-row__meta{ grid-column:1 / 2; grid-row:2; font-size:12px; color:var(--muted); }
.inventory-overview-row .app-status{ grid-column:2 / 3; grid-row:1 / 3; align-self:center; }
.inventory-overview-empty{ padding:18px 12px; text-align:center; color:var(--muted); font-size:13px; background:var(--surface); border:var(--border-dashed); border-radius:var(--radius-tiny); }

.inventory-toolbar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:0; }
.inventory-toolbar__search{ flex:1 1 220px; min-width:200px; background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.inventory-toolbar__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.inventory-toolbar__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.inventory-toolbar__sort:focus{ outline:none; border-color:var(--accent); }
.inventory-toolbar__meta{ font-size:12px; color:var(--muted); margin-left:auto; }

.inventory-page__layout{ display:grid; grid-template-columns:minmax(320px,420px) 1fr; grid-template-rows:minmax(0,1fr); gap:var(--page-layout-gap); flex:1; min-height:0; }
.inventory-list-item{ padding-top:32px; }
.inventory-detail{ padding:24px; display:flex; flex-direction:column; gap:var(--detail-gap); flex:1; min-height:0; overflow-y:auto; }

@media (max-width: 880px){
  .inventory-overview{ grid-template-columns:1fr; }
  .inventory-metrics{ grid-template-columns:repeat(2,1fr); }
  .inventory-toolbar__meta{ margin-left:0; flex:1 1 100%; }
  .inventory-toolbar__search{ flex:1 1 100%; }
  .inventory-page__layout{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .inventory-metrics{ grid-template-columns:1fr; }
}

/* ============================================================
 * Components-spezifisch (B08) — Komponenten-Bibliothek.
 * Erbt den .app-page-Sockel; ergaenzt nur den Detail-Spec-Block
 * (Spezifikationen, Datenblatt, Zertifikate) und die Source-
 * Kategorie-Tints, die im Listen-Header und Detail-Header
 * verwendet werden. Tints nutzen color-mix gegen var(--accent)
 * und die Style-Guide-Status-Hexes, keine neuen Farben.
 * ============================================================ */
.components-page{ /* erbt vom .app-page Sockel */ }

.components-detail{ display:flex; flex-direction:column; gap:12px; }
.components-detail__section{ display:flex; flex-direction:column; gap:6px; }
.components-detail__spec-grid,
.components-detail__spec-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 14px; font-size:13px; color:var(--text); }
.components-detail__spec-list li{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; }
.components-detail__empty-line{ font-size:12px; color:var(--muted); padding:6px 10px; background:var(--surface); border:var(--border-dashed); border-radius:var(--radius-tiny); }
.components-detail__doc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.components-detail__doc{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); }
.components-detail__doc-link{ background:none; border:0; color:var(--accent); text-align:left; padding:0; cursor:pointer; font-size:13px; font-weight:600; }
.components-detail__doc-link:hover,
.components-detail__doc-link:focus-visible{ text-decoration:underline; outline:none; }
.components-detail__doc-size{ font-size:12px; color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; }
.components-detail__actions{ display:flex; flex-wrap:wrap; gap:8px; padding-top:6px; border-top:var(--border-thin); }

/* Kategorie-Source-Tints fuer .app-source--cat-<id> */
.app-source--cat-module{ background:color-mix(in srgb,#f7b500 14%, var(--surface)); border-color:color-mix(in srgb,#f7b500 36%, var(--border)); color:var(--text); }
.app-source--cat-wechselrichter{ background:color-mix(in srgb,var(--accent) 14%, var(--surface)); border-color:color-mix(in srgb,var(--accent) 36%, var(--border)); color:var(--text); }
.app-source--cat-batteriespeicher{ background:color-mix(in srgb,#3bd671 14%, var(--surface)); border-color:color-mix(in srgb,#3bd671 36%, var(--border)); color:var(--text); }
.app-source--cat-waermepumpen{ background:color-mix(in srgb,#ff6b6b 14%, var(--surface)); border-color:color-mix(in srgb,#ff6b6b 36%, var(--border)); color:var(--text); }
.app-source--cat-wallboxen{ background:color-mix(in srgb,var(--accent) 18%, var(--surface)); border-color:color-mix(in srgb,var(--accent) 42%, var(--border)); color:var(--text); }
.app-source--cat-blockheizkraftwerke{ background:color-mix(in srgb,#f7b500 18%, var(--surface)); border-color:color-mix(in srgb,#f7b500 42%, var(--border)); color:var(--text); }

@media (max-width: 640px){
  .components-detail__spec-grid,
  .components-detail__spec-list{ grid-template-columns:1fr; }
  .components-detail__actions{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
 * FileVault-spezifisch (B09) — Sicherer Dateitresor.
 * Erbt den .app-page-Sockel; ergaenzt die seiten-spezifischen
 * Strukturen (Breadcrumbs, Status-Streifen, Body-Dropzone) und
 * traegt die BEM-Aliase fuer .file-vault-card --folder/--file
 * nach, damit Markup-Erweiterungen den App-Stil bekommen, ohne
 * die existierenden .vault-* Stile zu doppeln.
 * ============================================================ */
.file-vault-page{ /* erbt vom .app-page Sockel */ }
.file-vault-page__breadcrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0; }
.file-vault-page__breadcrumb{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-tiny); background:var(--surface); border:var(--border-thin); color:var(--text); font-size:13px; }
.file-vault-page__breadcrumb--current{ background:color-mix(in srgb,var(--accent) 12%, var(--surface)); border-color:color-mix(in srgb,var(--accent) 38%, var(--border)); }
.file-vault-page__actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.file-vault-page__search{ flex:1 1 220px; min-width:200px; background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.file-vault-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.file-vault-page__status{ font-size:12px; color:var(--muted); padding:4px 2px; }
.file-vault-page__body{ position:relative; display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; border-radius:var(--radius-large); }
.file-vault-page__body.is-dragover{ border:var(--border-dashed); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%, var(--surface)); }
.file-vault-page__head{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.file-vault-page__content{ display:flex; flex-direction:column; gap:14px; }

/* BEM-Aliase fuer file-vault-card-Modifier (Markup-Erweiterungen) */
.file-vault-card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-medium); padding:12px 14px; display:flex; flex-direction:column; gap:6px; min-width:0; transition:border-color .12s ease, transform .12s ease; }
.file-vault-card:hover,
.file-vault-card:focus-visible{ border-color:var(--accent); transform:translateY(-1px); outline:none; }
.file-vault-card--folder{ background:color-mix(in srgb,var(--accent) 6%, var(--surface)); }
.file-vault-card--file{ background:var(--surface); }

@media (max-width: 880px){
  .file-vault-page__actions{ flex-direction:column; align-items:stretch; }
  .file-vault-page__search{ flex:1 1 100%; }
}

/* ============================================================
 * Dashboard-spezifisch (B20) — Startseiten-Hero und Priority-
 * Liste. Aktueller Sockel rendert weiterhin .dashboard-shell/
 * .dashboard-hero (Legacy F11-Cleanup). Dieser Block ergaenzt
 * die BEM-Aliase .dashboard-page__* fuer die im JS bereits ver-
 * wendeten Priority-Items und stellt Hooks fuer kuenftige
 * Metric-/Activity-Sektionen bereit. Keine Hex-Farben außer
 * Style-Guide-Status-Hexes.
 * ============================================================ */
.dashboard-page{ /* erbt vom .app-page Sockel */ }

/* Priority-Section (heute aktive Hooks) */
.dashboard-page__priority-section{ display:flex; flex-direction:column; gap:8px; }
.dashboard-page__priority-item{ /* erbt .app-list-item */ }
.dashboard-page__priority-action{ margin-left:auto; }

/* Activity-Feed Hook (heute via renderActivityListItem) */
.dashboard-page__activity-feed{ display:flex; flex-direction:column; gap:var(--list-gap); }

@media (max-width: 880px){
  .dashboard-page__hero{ grid-template-columns:1fr; }
  .dashboard-page__metric-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .dashboard-page__metric-grid{ grid-template-columns:1fr; }
  .dashboard-page__hero-title{ font-size:22px; }
}

/* ============================================================
 * Accounting-spezifisch (B13) — Buchhaltung Listen-/Detail-
 * Ansicht. Erbt .app-page; ergaenzt nur den Positions-Block
 * im Detail (Label/Value-Pair pro Zeile) und die Action-Leiste
 * unten. Keine neuen Farben.
 * ============================================================ */
.accounting-page{ /* erbt vom .app-page Sockel */ }
.accounting-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.accounting-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.accounting-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.accounting-page__sort:focus{ outline:none; border-color:var(--accent); }
/* Auftragserfassung „Vorgänge": Such-/Sortierfelder visuell an die anderen Bereiche angleichen. */
.order-forms-page__search{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); min-width:220px; }
.order-forms-page__search:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent); }
.order-forms-page__sort{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); padding:6px 10px; font-size:13px; color:var(--text); }
.order-forms-page__sort:focus{ outline:none; border-color:var(--accent); }
/* Sortier-/Filter-Auswahlfelder als solche erkennbar machen: Pfeil-Indikator + Platz dafür.
   Steht bewusst NACH den Einzeldefinitionen oben, damit der background-Shorthand nicht den Pfeil überschreibt. */
.users-page__sort,
.termine-page__sort,
.leads-page__sort,
.projects-page__sort,
.tasks-page__sort,
.netzbetreiber-page__sort,
.inventory-toolbar__sort,
.accounting-page__sort,
.order-forms-page__sort{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
}
.accounting-page__amount{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); }
.accounting-page__total{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--text); font-size:15px; }

.accounting-detail{ display:flex; flex-direction:column; gap:12px; }
.accounting-detail__positions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:6px 14px; }
.accounting-detail__position{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--surface); border:var(--border-thin); border-radius:var(--radius-tiny); font-size:13px; min-width:0; }
.accounting-detail__position-label{ color:var(--muted); flex:1 1 auto; min-width:0; }
.accounting-detail__position-value{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.accounting-detail__actions{ display:flex; flex-wrap:wrap; gap:8px; padding-top:6px; border-top:var(--border-thin); }

@media (max-width: 720px){
  .accounting-page__search{ min-width:0; flex:1 1 100%; }
}

@media (max-width: 640px){
  .accounting-detail__positions{ grid-template-columns:1fr; }
  .accounting-detail__actions{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
 * ProjectDetail-spezifisch (B16) — Auftrags-Detailseite.
 * Erbt .app-page/.app-detail; ergaenzt die seiten-spezifischen
 * Hooks (Topbar-Breadcrumb, Tab-Leiste, Karten-Layout, Meta-
 * Aside und Aktivitaeten-Feed). Karten nutzen .surface-card,
 * Layout uebernimmt das 2-Spalten-Pattern der Mailbox.
 * ============================================================ */
.project-detail-page{ /* erbt vom .app-page Sockel */ }
.project-detail-page__topbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.project-detail-page__breadcrumb{ /* erbt .app-tab — kein Counter */ }
.project-detail-page__breadcrumb:hover,
.project-detail-page__breadcrumb:focus-visible{ border-color:var(--accent); color:var(--text); outline:none; }
.project-detail-page__actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.project-detail-page__header{ /* erbt .app-detail__header */ }
.project-detail-page__tabs{ /* erbt .app-page__filters */ display:flex; flex-wrap:wrap; gap:6px; }
.project-detail-page__tab{ /* erbt .app-tab */ }

.project-detail-page__layout{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:14px; align-items:start; }
.project-detail-page__meta{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.project-detail-page__meta-card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.project-detail-page__cards{ display:flex; flex-direction:column; gap:12px; }
.project-detail-page__card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.project-detail-page__card--wide{ grid-column:1 / -1; }
.project-detail-page__tab-content{ display:flex; flex-direction:column; gap:12px; }
/* Tab-Karte (Auftrag/Lead bzw. Netzbetreiber-Zugang/MaStR in einem Abschnitt) */
.project-detail-tabcard__tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.project-detail-tabcard__tab{ font-size:13px; padding:5px 14px; }
.project-detail-tabcard__panel.is-hidden{ display:none; }
.netz-access-meta--standalone{ display:block; color:var(--muted); font-size:12px; margin-bottom:8px; }

.project-detail-page__feed{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:12px 14px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.project-detail-page__feed-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-detail-page__feed-title{ margin:0; font-size:15px; font-weight:600; color:var(--text); }
.project-detail-page__feed-tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.project-detail-page__feed-list{ display:flex; flex-direction:column; gap:var(--list-gap); padding:2px 4px 2px 2px; }
.project-detail-page__empty{ /* erbt .app-detail--empty */ }

@media (max-width: 1024px){
  .project-detail-page__layout{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .project-detail-page__topbar{ flex-direction:column; align-items:stretch; }
  .project-detail-page__actions{ flex-direction:column; align-items:stretch; }
}

/* ============================================================
 * Analytics-spezifisch (B21) — Funnel- und Tabellen-Cards.
 * Erbt .app-page; ergaenzt die BEM-Hooks .analytics-page__* fuer
 * Tabs, Funnel-Grid und Chart/Table-Cards. Konkrete Funnel-/
 * Chart-Stile leben weiter unter .funnel-stage/.analytics-chart-
 * card; diese Hooks halten den Bereichs-Container konsistent.
 * ============================================================ */
.analytics-page{ /* erbt vom .app-page Sockel */ }
.analytics-page__tab{ /* erbt .app-tab */ }

.analytics-page__chart-card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.analytics-page__table-card{ background:var(--surface); border:var(--border-strong); border-radius:var(--radius-large); padding:14px 16px; display:flex; flex-direction:column; gap:10px; min-width:0; }

.analytics-page__funnel{ display:flex; flex-direction:column; gap:8px; }
.analytics-page__funnel-grid{ /* erbt .funnel-grid */ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.analytics-page__funnel-stage{ background:var(--surface); border:var(--border-thin); border-radius:var(--radius-medium); padding:10px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.analytics-page__funnel-empty{ /* erbt .app-list-empty */ }

@media (max-width: 880px){
  .analytics-page__funnel-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .analytics-page__funnel-grid{ grid-template-columns:1fr; }
}

/* Klickbare Validierungsfehler im Schaltplan-Workspace (Sprung zum Schritt) */
.technical-singleline-validation__jump{ background:transparent; border:0; padding:0; margin:0; color:inherit; font:inherit; text-align:left; cursor:pointer; display:inline; }
.technical-singleline-validation__jump:hover{ color:var(--accent); text-decoration:underline; }
.technical-singleline-validation__step{ color:var(--accent); font-size:11px; white-space:nowrap; }