:root{   --bg:#ffffff;   --surface:#F7F7F9;             /* Seitenhintergrund */   --border:rgba(0,0,0,.08);   --text:#0F172A;                /* Primärtext */   --muted:#6B7280;               /* Sekundärtext */   --primary:#EF4444;             /* Logistik+ Rot */   --primary-ink:#ffffff;   --radius:16px;   --shadow:0 6px 24px rgba(0,0,0,.08); }
/* Basis */
html,body{background:var(--surface);color:var(--text);font-synthesis-weight:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
/* Layout-Shell (nur wenn Klassen vergeben werden) */
.app-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:64px}
.app-sidebar{background:#fff;border-right:1px solid var(--border);padding:12px}
.app-main{padding:24px}
/* Brand / Topnav */
.brand{display:flex;align-items:center;gap:8px;font-weight:600}
.brand .plus{width:24px;height:24px;border-radius:10px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700}
.topnav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px}
.topnav a:hover{background:rgba(0,0,0,.04);color:var(--text)}
/* Sidebar */
.sidebar-group{font-size:11px;text-transform:uppercase;color:var(--muted);padding:8px 8px 4px}
.sidebar-link{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;color:var(--text);text-decoration:none;border:1px solid transparent}
.sidebar-link:hover{background:#fff;border-color:var(--border)}
.sidebar-link.active{background:#fff;border-color:var(--border);box-shadow:var(--shadow)}
.sidebar-link.active::before{content:"";width:6px;height:18px;border-radius:999px;background:var(--primary);display:inline-block}
/* Karten / Buttons / Inputs / Tabellen */
.card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:16px}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--text);text-decoration:none}
.btn:hover{background:rgba(0,0,0,.04)}
.btn-primary{background:var(--primary);color:var(--primary-ink);border-color:transparent}
.btn-primary:hover{filter:brightness(.95)}
input,select,textarea{height:40px;padding:0 12px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:#fff}
textarea{height:auto;min-height:120px;padding:12px}
table{width:100%;border-collapse:separate;border-spacing:0}
thead{background:var(--surface);color:var(--muted)}
th,td{padding:12px;border-bottom:1px solid var(--border)}
tr:hover td{background:#fff}
/* Fokus sichtbar (A11y) */
:where(a,button,input,select,textarea).focus-visible, :where(a,button,input,select,textarea):focus-visible{   outline:none;box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent) }