/* ===================================================================
   baXon Core — App Shell
   Tokens nach Nadja UI-Design-Spec v1 (Mai 2026) — Dunkel-CI v2
     Dark (Default) → Cockpit-CI Nadja (#03B8A5 Türkis / #E3CBA7 Copper)
     Light          → BACneXt Corporate (#69ACDF / #98470E) — unverändert
   =================================================================== */

:root {
  /* === Dark / Cockpit v2 (Nadja CI) ======================== */
  --accent:        #03B8A5;
  --accent-2:      #02A394;
  --accent-active: #028E82;
  --accent-ink:    #0D1218;
  --accent-soft:   rgba(3,184,165,.10);
  --accent-bord:   rgba(3,184,165,.35);
  --gold:          #E3CBA7;
  --gold-hover:    #D4B990;
  --gold-active:   #BFA070;
  --gold-soft:     rgba(227,203,167,.12);
  --gold-bord:     rgba(227,203,167,.40);

  --bg:            #2D363D;
  --bg-2:          #1E272E;
  --panel:         rgba(30,39,46,.92);
  --panel-solid:   #1E272E;
  --panel-2:       linear-gradient(180deg, rgba(30,39,46,.95) 0%, rgba(13,18,24,.97) 100%);

  --sidebar-bg:    #0D1218;
  --sidebar-bord:  rgba(255,255,255,.05);
  --sidebar-ink:   #F5F0E8;
  --sidebar-dim:   #7A8A96;
  --sidebar-hover: rgba(255,255,255,.05);
  --sidebar-act:   rgba(3,184,165,.14);
  --sidebar-act-b: rgba(3,184,165,.32);

  --topbar-bg:     rgba(30,39,46,.88);
  --topbar-bord:   #293238;

  --ink:           #F5F0E8;
  --ink-dim:       #C8D4D6;
  --ink-mute:      #7A8A96;
  --ink-faint:     #5C6369;

  --line:          #293238;
  --line-2:        #3D4A53;

  --grid-line:     rgba(255,255,255,.025);
  --grid-opacity:  .45;
  --glow-1:        rgba(3,184,165,.10);
  --glow-2:        rgba(227,203,167,.08);

  --table-head-bg: #1E272E;
  --table-head-ink:#03B8A5;
  --row-hover:     rgba(3,184,165,.06);

  --pill-blue-bg:  rgba(3,184,165,.10);
  --pill-blue-ink: #03B8A5;
  --pill-gold-bg:  rgba(227,203,167,.08);
  --pill-gold-ink: #E3CBA7;
  --pill-amber-bg: rgba(224,176,106,.10);
  --pill-amber-ink:#e0b06a;
  --pill-rose-bg:  rgba(224,92,92,.14);
  --pill-rose-ink: #E05C5C;
  --pill-mute-bg:  rgba(30,39,46,.50);
  --pill-mute-ink: #7A8A96;

  --font-body:     'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono:     'Courier New', Consolas, monospace;
  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --radius-pill:   9999px;

  /* Türkis-Alpha-Schatten (Nadja CI §7.8) — 4 Stufen */
  --shadow-1:      0 2px  8px  rgba(3,184,165,0.10);
  --shadow-2:      0 4px 16px  rgba(3,184,165,0.18);
  --shadow-3:      0 8px 32px  rgba(3,184,165,0.28);
  --shadow-4:      0 16px 48px rgba(3,184,165,0.38);
  --shadow-inset-focus: inset 0 2px 8px rgba(3,184,165,0.12);
  --shadow-card:   var(--shadow-1);
  --shadow-md:     var(--shadow-2);

  /* Semantische Nadja-Token-Aliase */
  --bg-base:              #2D363D;
  --bg-card:              #1E272E;
  --bg-hover:             #3D4A53;
  --bg-deep:              #0D1218;
  --color-primary:        #03B8A5;
  --color-primary-hover:  #02A394;
  --color-primary-active: #028E82;
  --color-action:         #E3CBA7;
  --color-action-hover:   #D4B990;
  --color-action-active:  #BFA070;
  --color-text-primary:   #F5F0E8;
  --color-text-secondary: #5C6369;
  --color-text-mute:      #7A8A96;
  --color-text-logo:      #FFFFFF;
  --color-error:          #E05C5C;
  --color-success:        #4CAF50;
  --color-dropdown-bg:      #1A3533;
  --color-dropdown-hover:   #1E3E3C;
  --color-dropdown-active:  #03B8A5;
  --color-dropdown-list-bg: #122726;
}

/* === Repo-Kompatibilitäts-Aliase ============================
   Halten App-Templates am Leben, die noch --bx-*-Tokens verwenden.
   Bei kommendem Template-Sweep (Worker D-2) sukzessive aufräumen.
   ========================================================== */
:root {
    /* Brand-Aliase auf neue Tokens (Dark-Default) */
    --bx-blue:        var(--accent);
    --bx-blue-dark:   var(--accent);
    --bx-blue-soft:   var(--accent-soft);
    --bx-rust:        var(--gold);
    --bx-rust-soft:   var(--gold-soft);
    /* Türkis-Aliase für Templates die noch --bx-teal nutzen */
    --bx-teal:        var(--accent);
    --bx-teal-soft:   var(--accent-soft);
    --bx-near-black:  var(--ink);
    --bx-beige:       var(--bg-2);
    --bx-bg:          var(--bg);
    --bx-white:       var(--panel-solid);
    --bx-sage:        var(--accent-2);

    --bx-success:     var(--accent);
    --bx-warning:     var(--pill-amber-ink);
    --bx-error:       var(--pill-rose-ink);
    --bx-info:        var(--accent);

    --bx-font:        var(--font-body);
    --bx-h1: 40px; --bx-h2: 28px; --bx-h3: 20px;
    --bx-body: 14px; --bx-small: 12px;

    --bx-radius:      var(--radius);
    --bx-radius-sm:   var(--radius-sm);
    --bx-shadow-sm:   var(--shadow-card);
    --bx-shadow-md:   var(--shadow-md);
    --bx-line:        var(--line);
    --bx-line-strong: var(--line-2);

    --bx-sidebar-bg:      var(--sidebar-bg);
    --bx-sidebar-ink:     var(--sidebar-ink);
    --bx-sidebar-ink-dim: var(--sidebar-dim);

    /* Cockpit-Alt-Tokens — bleiben für die Cockpit-Landing nutzbar */
    --bg-dark:   var(--bg);
    --bg-dark-2: var(--bg-2);
    --bg-dark-3: var(--sidebar-bg);
    --panel-2:   var(--panel-solid);
    --teal:      var(--accent);
    --teal-2:    var(--accent-2);
    --teal-soft: var(--accent-soft);
    --rose:      var(--pill-rose-ink);
    --amber:     var(--pill-amber-ink);
    --sidebar:   268px;
    /* Weitere Alt-Tokens für Abwärtskompatibilität */
    --ink-2:     var(--ink-dim);
    --gold-2:    var(--accent-2);
    --line-light: var(--line);
    --line-strong: var(--line-2);
}

/* === Light / BACneXt Corporate ============================ */
html[data-theme="light"] {
  --accent:        #3D8CC2;
  --accent-2:      #69ACDF;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #E8F2FA;
  --accent-bord:   rgba(105,172,223,.40);
  --gold:          #98470E;
  --gold-soft:     #F5E8DC;
  --gold-bord:     rgba(152,71,14,.35);

  /* Wordmark .core nutzt --color-action — im Hell-Theme = Rust (Gold). */
  --color-action:  var(--gold);

  --bg:            #F5F1EB;
  --bg-2:          #FFFFFF;
  --panel:         #FFFFFF;
  --panel-solid:   #FFFFFF;
  --panel-2:       #FFFFFF;

  --sidebar-bg:    #323230;
  --sidebar-bord:  rgba(255,255,255,.08);
  --sidebar-ink:   #FFFFFF;
  --sidebar-dim:   rgba(255,255,255,.65);
  --sidebar-hover: rgba(255,255,255,.08);
  --sidebar-act:   rgba(105,172,223,.18);
  --sidebar-act-b: rgba(105,172,223,.35);

  --topbar-bg:     rgba(245,241,235,.92);
  --topbar-bord:   #E5DDD0;

  --ink:           #323230;
  --ink-dim:       #4A4A48;
  --ink-mute:      #7A7570;
  --ink-faint:     #9A928A;

  --line:          #E5DDD0;
  --line-2:        #B8AC9C;

  --grid-line:     rgba(50,50,48,.08);
  --grid-opacity:  .35;
  --glow-1:        rgba(105,172,223,.18);
  --glow-2:        rgba(152,71,14,.10);

  --table-head-bg: #DFD6CC;
  --table-head-ink:#98470E;
  --row-hover:     #E8F2FA;

  --pill-blue-bg:  #E8F2FA;
  --pill-blue-ink: #3D8CC2;
  --pill-gold-bg:  #F5E8DC;
  --pill-gold-ink: #98470E;
  --pill-amber-bg: rgba(181,122,31,.12);
  --pill-amber-ink:#B57A1F;
  --pill-rose-bg:  #F5E8DC;
  --pill-rose-ink: #98470E;
  --pill-mute-bg:  #DFD6CC;
  --pill-mute-ink: #7A7570;

  --font-body:     'Varela Round', 'Segoe UI', system-ui, sans-serif;
  --shadow-card:   0 1px 2px rgba(50,50,48,.06);
  --shadow-md:     0 4px 12px rgba(50,50,48,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 14.5px;
  transition: background .25s ease, color .25s ease;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}
code{font-family:var(--font-mono);font-size:.92em}

/* ===== App Layout ===== */
.app {
  display: grid;
  grid-template-columns: 268px 1fr;
  min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-bord);
  padding: 22px 18px 18px;
  display: flex; flex-direction: column; gap: 20px;
  color: var(--sidebar-ink);
}
.sb-brand {
  display:flex;align-items:center;gap:11px;
  padding: 4px 4px 6px;
  font-weight: 700; font-size: 18px; letter-spacing: -.01em;
}
.sb-brand .logo-mark { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }
/* Drei-Farb-Wordmark "baXon Core" — überall wo die Marke kapitalisiert
   gerendert wird. Klassen-Konvention:
     .x    → Türkis (var(--accent))
     .core → Copper (var(--color-action))
   "ba" + "on" erben die Eltern-Schrift-Farbe (weiß im Sidebar, Inherit im
   Cockpit-H1). Anwendung in baxoncore/templates/base.html (Sidebar) und
   baxoncore/templates/cockpit/index.html (Hero-Headline). */
.sb-brand .x,
.bx-wordmark .x    { color: var(--accent);       font-weight: 700; }
.sb-brand .core,
.bx-wordmark .core { color: var(--color-action); font-weight: 700; }
.sb-brand .label {
  font-size: 10px; font-weight: 600; letter-spacing: .22em;
  color: var(--sidebar-dim); text-transform: uppercase; margin-top: 2px;
}

.sb-tenant {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
}
.sb-tenant .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.sb-tenant .name { flex: 1; }
.sb-tenant .chev { color: var(--sidebar-dim); font-size: 11px; }

.sb-section { display:flex;flex-direction:column;gap:3px; }
.sb-section .heading {
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
  color: var(--sidebar-dim); text-transform: uppercase;
  padding: 0 6px 6px;
}
.sb-link {
  display:flex;align-items:center;gap:11px;
  padding: 9px 11px; border-radius: 9px;
  color: var(--sidebar-dim); font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  cursor: pointer;
}
.sb-link:hover { background: var(--sidebar-hover); color: var(--sidebar-ink); }
.sb-link .ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--sidebar-dim); }
.sb-link.active {
  background: var(--sidebar-act);
  border-color: var(--sidebar-act-b);
  color: var(--sidebar-ink); font-weight: 600;
}
.sb-link.active .ic { color: var(--accent); }
.sb-link .badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold); background: var(--gold-soft);
  border: 1px solid var(--gold-bord);
  padding: 2px 7px; border-radius: 99px; text-transform: uppercase;
}

.sb-user {
  margin-top: auto;
  display:flex;align-items:center;gap:11px;
  padding: 11px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
}
.sb-user .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.sb-user .meta { flex: 1; min-width: 0; }
.sb-user .meta .nm { font-size: 13px; font-weight: 600; line-height: 1.2; }
.sb-user .meta .em {
  font-size: 11.5px; color: var(--sidebar-dim); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user .logout { color: var(--sidebar-dim); font-size: 14px; cursor:pointer; }
.sb-user .logout:hover { color: var(--accent); }

/* ===== MAIN ===== */
.main { min-width: 0; background: var(--bg); position: relative; }

.topbar {
  display:flex;align-items:center;gap:18px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--topbar-bord);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
.crumbs { display:flex;align-items:center;gap:8px;font-size: 13px; color: var(--ink-mute); font-weight: 500; }
.crumbs a { color: var(--ink-mute); cursor:pointer; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--ink-faint); }
.crumbs .now { color: var(--ink); }
.topbar .spacer { flex: 1; }
.topbar .search {
  display:flex;align-items:center;gap:10px;
  padding: 8px 14px; border-radius: 9px;
  background: var(--panel-solid); border: 1px solid var(--line);
  color: var(--ink-mute); font-size: 13.5px; min-width: 280px;
}
.topbar .search svg { flex-shrink: 0; color: var(--ink-faint); }
.topbar .search .kbd {
  margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-faint); border: 1px solid var(--line); padding: 2px 6px; border-radius: 5px;
}
.iconbtn {
  width: 36px; height: 36px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel-solid); color: var(--ink-dim);
  transition: border-color .2s, color .2s, background .2s;
}
.iconbtn:hover { border-color: var(--line-2); color: var(--ink); }

/* Theme-Toggle-Icons (gesteuert per JS via theme-icon-light/dark) */
.theme-toggle .ic-sun { display: none; }
html[data-theme="light"] .theme-toggle .ic-sun { display: inline; }
html[data-theme="light"] .theme-toggle .ic-moon { display: none; }

/* ===== PAGE ===== */
.page { padding: 28px 32px 60px; max-width: 1480px; }
.page.narrow { max-width: 1100px; }

.page-head {
  display:flex;align-items:flex-end;justify-content:space-between;
  gap: 22px; margin-bottom: 24px;
}
.page-head .eyebrow {
  color: var(--gold); font-size: 11.5px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 8px;
}
.page-head h1 { font-size: 30px; letter-spacing: -.01em; font-weight: 600; margin: 0 0 6px; line-height: 1.1; }
.page-head .sub { color: var(--ink-dim); font-size: 14.5px; margin: 0; max-width: 680px; }
.page-actions { display:flex;gap:10px;flex-shrink:0; }

/* Label-Pill (Cockpit-style) */
.label-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--accent-bord);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--accent); margin-bottom: 14px;
}
.label-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 9px;
  font-weight: 600; font-size: 13.5px;
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
  border: 1px solid transparent; cursor: pointer;
  font-family: inherit;
}
.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, var(--shadow-2);
  border-radius: 4px; letter-spacing: 0.04em;
}
.btn-primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn-primary:active { background: var(--accent-active); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
/* Sekundär-Button (Abbrechen / Zurück) */
.btn-secondary {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px;
  padding: 10px 20px; font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { background: var(--accent-soft); }
/* Download/Export-Button — Copper, semantisch dediziert */
.btn-download {
  background: var(--color-action); color: #0D1218;
  border: none; border-radius: 6px;
  padding: 10px 20px; font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .15s;
}
.btn-download:hover  { background: var(--color-action-hover); }
.btn-download:active { background: var(--color-action-active); }
.btn-download:disabled { background: #C8B898; color: #7A7060; cursor: not-allowed; }
.btn-download:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-gold { background: transparent; color: var(--gold); border: 1px solid var(--gold-bord); }
.btn-gold:hover { background: var(--gold-soft); border-color: var(--gold); }
.btn-danger { background: transparent; color: var(--pill-rose-ink); border: 1px solid var(--pill-rose-bg); }
.btn-danger:hover { background: var(--pill-rose-bg); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 7px; }
.btn-lg { padding: 12px 22px; font-size: 15px; min-width: 160px; }
.btn-icon-only { width: 36px; height: 36px; padding: 0; }
.btn-pill { border-radius: var(--radius-pill); padding: 13px 24px; }

/* ===== Cards ===== */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  box-shadow: var(--shadow-card);
}
html:not([data-theme="light"]) .card { backdrop-filter: blur(6px); }
.card::before {
  content: ""; position: absolute; top: 0; left: 22px; width: 42px; height: 2px;
  background: var(--gold); border-radius: 0 0 3px 3px; opacity: .9;
}
.card::after {
  content: ""; position: absolute; top: 0; left: 66px; width: 14px; height: 2px;
  background: var(--accent); border-radius: 0 0 3px 3px; opacity: .9;
}
.card.no-accent::before,.card.no-accent::after { display: none; }
.card.hover { transition: border-color .2s, transform .15s; cursor: pointer; }
.card.hover:hover { border-color: var(--line-2); transform: translateY(-1px); }
.card .head { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px; }
.card .head h3 { margin: 0; font-size: 15px; letter-spacing: -.005em; font-weight: 600; }
.card .head .meta { font-size: 12px; color: var(--ink-mute); font-weight: 500; }

/* ===== KPI cards ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kpi::before {
  content: ""; position: absolute; top: 0; left: 20px; width: 36px; height: 2px;
  background: var(--gold); border-radius: 0 0 3px 3px;
}
.kpi::after {
  content: ""; position: absolute; top: 0; left: 60px; width: 12px; height: 2px;
  background: var(--accent); border-radius: 0 0 3px 3px;
}
.kpi .lbl { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--gold); text-transform: uppercase; }
.kpi .v { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; line-height: 1; color: var(--accent); }
.kpi .v .unit { font-size: 14px; color: var(--ink-mute); margin-left: 6px; font-weight: 500; }
.kpi .delta { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 8px; display:flex;align-items:center;gap:5px; }
.kpi .delta.down { color: var(--gold); }

/* ===== Tables ===== */
.tbl-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  text-align: left; padding: 6px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--table-head-ink); background: var(--table-head-bg);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td { padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--ink-dim); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--row-hover); }
.tbl .name { color: var(--ink); font-weight: 600; letter-spacing: -.005em; }
.tbl .name a { color: var(--ink); cursor: pointer; }
.tbl .name a:hover { color: var(--accent); }
.tbl .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-dim); letter-spacing: .02em; }
.tbl .dim { color: var(--ink-mute); font-size: 12.5px; }
.tbl .actions { text-align: right; white-space: nowrap; }
.tbl .actions .btn { margin-left: 4px; }

/* ===== Bx-Table (Conexus-Datenpunktlisten) =====
   Minimal-Padding für die `.bx-table`-Klasse — verhindert, dass
   Spalten-Header aneinander kleben (Smoke-Test Bundle C / M-C10).
   Reines Padding-Fixup; das ausführliche Styling soll später ins
   Token-System wandern. */
.bx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bx-table th,
.bx-table td { padding: 8px 14px; vertical-align: middle; }
.bx-table th {
  text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
  font-weight: 600;
  white-space: nowrap;
}
.bx-table td { border-bottom: 1px solid var(--line); color: var(--ink); }
.bx-table tr:last-child td { border-bottom: none; }
.bx-table--compact th,
.bx-table--compact td { padding: 6px 10px; font-size: 13px; }
.bx-table__num { color: var(--ink-mute); text-align: right; font-variant-numeric: tabular-nums; }
.bx-table__mono { font-family: var(--font-mono); }

/* ===== Pills ===== */
.pill {
  display:inline-flex;align-items:center;gap:6px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.teal { color: var(--pill-blue-ink); background: var(--pill-blue-bg); border-color: var(--accent-bord); }
.pill.gold { color: var(--pill-gold-ink); background: var(--pill-gold-bg); border-color: var(--gold-bord); }
.pill.amber { color: var(--pill-amber-ink); background: var(--pill-amber-bg); border-color: var(--pill-amber-bg); }
.pill.rose { color: var(--pill-rose-ink); background: var(--pill-rose-bg); border-color: var(--pill-rose-bg); }
.pill.mute { color: var(--pill-mute-ink); background: var(--pill-mute-bg); border-color: var(--line); }

/* App-Tag (Funktor/Matricor/...) */
.app-tag {
  display:inline-flex;align-items:center;gap:5px;
  padding: 3px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  background: var(--pill-mute-bg); border: 1px solid var(--line);
  color: var(--ink-dim); margin-right: 4px;
}
.app-tag.on { color: var(--pill-blue-ink); border-color: var(--accent-bord); background: var(--pill-blue-bg); }
.app-tag.off { color: var(--ink-faint); opacity: .55; }

/* ===== Section header ===== */
.sec-h { display:flex;align-items:center;justify-content:space-between;margin: 24px 0 14px; }
.sec-h h2 { font-size: 18px; letter-spacing: -.01em; font-weight: 600; margin: 0; }
.sec-h .link { font-size: 13px; color: var(--accent); font-weight: 600; cursor:pointer; }
.sec-h .link:hover { color: var(--accent-2); }

/* ===== Forms ===== */
.form .field { margin-bottom: 18px; }
.form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-dim); margin-bottom: 7px; }
.form .hint { font-size: 12px; color: var(--ink-mute); margin-top: 5px; line-height: 1.4; }
.form input[type=text],.form input[type=email],.form input[type=password],
.form input[type=number], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 14px;
  background: var(--panel-solid); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 11px 14px;
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.form input:focus,.form select:focus,.form textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form .row { display:flex;gap:18px;flex-wrap:wrap; }
.form .row > .field { flex: 1; min-width: 200px; }
.form .errors { font-size: 12px; color: var(--pill-rose-ink); margin-top: 5px; }

/* ===== Utils ===== */
.muted { color: var(--ink-mute); }
.faint { color: var(--ink-faint); }
.dim   { color: var(--ink-dim); }
.mono  { font-family: var(--font-mono); }
hr.div { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

/* ===== Tree (Funktor-Hierarchie) ===== */
.tree-node {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
  background: var(--panel);
}
.tree-node.nested {
  border: none;
  background: transparent;
  padding: 0 0 0 12px;
  margin: 8px 0;
}
.tree-row {
  display:flex;justify-content:space-between;align-items:center;
  gap: 8px;
}
.tree-row .left { display:flex;align-items:center;gap:8px;flex-wrap:wrap; min-width:0; }
.tree-toggle {
  width: 18px; height: 18px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius: 4px;
  color: var(--ink-mute);
  transition: transform .15s, background .15s, color .15s;
}
.tree-toggle:hover { background: var(--accent-soft); color: var(--accent); }
.tree-toggle.collapsed { transform: rotate(-90deg); }
.drag-handle {
  cursor: grab; opacity: 0.4; padding: 0 4px;
  user-select: none; color: var(--ink-mute);
  font-size: 14px;
}
.drag-handle:hover { opacity: 1; }
.tree-actions { font-size: 13px; display:flex;gap:8px;align-items:center; color: var(--ink-mute); }
.tree-actions a { cursor:pointer; }
.tree-actions a:hover { color: var(--accent); }
.tree-actions .sep { opacity: .4; }
.tree-children { margin-left: 18px; margin-top: 8px; }

.gewerk-node { border-left: 2px solid var(--accent); padding-left: 12px; margin: 6px 0; }
.system-node { padding-left: 12px; margin: 4px 0; }
.aggregat-node {
  margin: 6px 0 6px 14px;
  padding-left: 12px;
  border-left: 2px dashed var(--line-2);
}
.fi-row {
  display: flex; align-items: center; gap: 10px;
  padding: 3px 0;
  font-size: 13px;
}
.fi-row .txt { color: var(--ink-dim); }
.fi-row .actions { font-size: 12px; color: var(--ink-mute); }
.fi-row .actions a { cursor:pointer; }
.fi-row .actions a:hover { color: var(--accent); }

.app-badge {
  display:inline-flex;align-items:center;gap:4px;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px; font-weight: 500;
  border-radius: 9px;
  cursor: pointer;
}
.app-badge.ampere { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-bord); }
.app-badge.valvor { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-bord); }
.app-badge.matricor { background: var(--gold-soft); color: var(--gold); border: 1px solid var(--gold-bord); }

/* ===== Cross-Link Cards (Funktor → Apps) ===== */
.xlink-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 12px; margin-top: 8px; }
.xlink-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.xlink-card:hover { border-color: var(--accent-bord); transform: translateY(-1px); }
.xlink-card .ttl { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .12em; display:flex;align-items:center;gap:6px; }
.xlink-card .v { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--gold); }
.xlink-card .v .u { font-size: 12px; font-weight: 400; opacity: .7; margin-left: 4px; }
.xlink-card .ds { font-size: 12.5px; opacity: .7; margin-top: 2px; }

/* ===== DIN-Score Bar ===== */
.din-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--panel);
}
.din-bar { display:flex; height: 26px; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.din-bar .seg { display:flex; align-items:center; justify-content:center; color:#fff; font-size: 12px; font-weight: 600; }
.din-A { background: #2d8f3a; }
.din-B { background: #3b7ddc; }
.din-C { background: #d97706; }
.din-D { background: #b91c1c; }
.din-meta { display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px; margin-bottom:12px;}
.din-class-chip { display:inline-block;color:white;padding:2px 10px;border-radius:4px;font-weight:700;font-size:14px;margin:0 6px; }

/* ===== AUTH (Login) ===== */
.auth-wrap {
  min-height: 100vh; display:flex;
  align-items: flex-start; justify-content: center;
  padding: 80px 16px 40px;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.auth-wrap::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 360px at 20% 30%, var(--glow-1), transparent 60%),
    radial-gradient(600px 300px at 80% 80%, var(--glow-2), transparent 60%);
}
.auth-wrap::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity: var(--grid-opacity);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.auth-card {
  position: relative;
  width: 440px; max-width: calc(100vw - 32px);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 14px;
  padding: 36px 38px;
  box-shadow: var(--shadow-md);
}
.auth-card .brand-stack { text-align: center; margin-bottom: 26px; }
.auth-card .brand-stack img { height: 56px; margin-bottom: 14px; object-fit: contain; }
.auth-card .brand-stack h1 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.01em; font-weight: 700; }
.auth-card .brand-stack p { margin: 0; color: var(--ink-mute); font-size: 13px; }

/* ===== Cockpit-Hero ===== */
.cockpit-hero {
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 48px;
  align-items: center; padding: 24px 0 56px;
}
.cockpit-hero h1 {
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 600; line-height: 1.04; letter-spacing: -0.01em;
  margin: 0 0 18px;
}
.cockpit-hero h1 .accent { color: var(--gold); }
.cockpit-hero .greet {
  font-size: 16px; line-height: 1.7; color: var(--ink-dim); max-width: 520px;
}
.cockpit-hero .greet strong { color: var(--ink); font-weight: 600; }
.cockpit-stats { display:flex; gap: 36px; margin-top: 28px; }
.cockpit-stats .num { font-size: 32px; font-weight: 700; line-height: 1; color: var(--accent); }
.cockpit-stats .lbl { font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 6px; }
.cockpit-actions { display:flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.hero-card {
  position: relative;
  max-width: 520px; margin: 0 auto;
  padding: 28px; border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.hero-card::before {
  content: ''; position: absolute; inset: -36px;
  border-radius: 48px;
  background: linear-gradient(135deg, var(--glow-1), var(--glow-2), transparent);
  filter: blur(36px); z-index: -1;
}
.hero-card .head { display:flex;justify-content:space-between;align-items:center;margin-bottom: 18px; }
.hero-card .head .lbl { font-size: 13px; font-weight: 500; color: var(--gold); }
.hero-card .head .domain {
  background: var(--accent-soft); color: var(--accent);
  padding: 4px 12px; border-radius: 9999px; font-size: 11px;
}
.hero-card .pillars { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 18px; }
.hero-card .pillar {
  text-align: center; padding: 14px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
}
html:not([data-theme="light"]) .hero-card .pillar { background: rgba(12,16,20,.44); }
.hero-card .pillar .dot {
  width: 8px; height: 8px; border-radius: 9999px;
  margin: 0 auto 10px; background: var(--accent);
}
.hero-card .pillar.middle .dot { background: var(--gold); }
.hero-card .pillar .pillar-label { font-size: 12px; color: var(--ink-dim); }

/* ===== Cockpit App-Tile-Grid ===== */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.app-tile {
  position: relative;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.app-tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.app-tile .name { font-size: 22px; font-weight: 700; color: var(--ink); }
.app-tile .tagline { font-size: 14px; line-height: 1.55; color: var(--ink-dim); flex: 1; }
.app-tile .tile-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.app-tile .tile-metrics .num { display: block; font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1; }
.app-tile .tile-metrics .lbl { font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.05em; }
.app-tile .tile-metrics .rel { display: block; font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 4px; }
.app-tile .foot {
  display:flex;align-items:center;gap:10px;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-dim);
}
.app-tile .foot .pcount { font-size: 18px; font-weight: 700; color: var(--accent); }
.app-tile .arrow { margin-left: auto; color: var(--gold); transition: transform .18s; }
.app-tile:hover .arrow { transform: translateX(4px); }

/* ===== Page Background (Cockpit subtle grid + glow) ===== */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--grid-opacity);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
.bg-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 75% 12%, var(--glow-1), transparent 30%),
    radial-gradient(circle at 10% 18%, var(--glow-2), transparent 24%);
}
.page.with-bg { position: relative; }
.page.with-bg > * { position: relative; z-index: 1; }

/* ===== Stammdaten (Funktor) ===== */
.kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.kv .k, .kv .v { padding: 12px 18px; border-bottom: 1px solid var(--line); }
.kv .k { color: var(--ink-mute); font-weight: 600; background: var(--table-head-bg); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.kv .v { color: var(--ink); }
.kv > div:nth-last-child(-n+2) { border-bottom: none; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab {
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); }

/* ===== Sortable / Drag-and-Drop ===== */
.sortable-ghost { opacity: 0.35; background: var(--accent-soft); }
.sortable-chosen { background: var(--accent-soft); border-radius: var(--radius-sm); }

/* ===== Dropdown (Nadja CI v2) ===== */
.bx-dropdown {
  background: var(--color-dropdown-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 160px;
  font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.bx-dropdown:hover { border-color: #05D4BE; background: #1E3D3B; }
.bx-dropdown:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.bx-dropdown[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bx-dropdown:disabled { background: #1A2326; border-color: var(--line-2); color: var(--ink-mute); cursor: not-allowed; }
.bx-dropdown__list {
  background: var(--color-dropdown-list-bg);
  border: 1px solid var(--accent);
  border-top: none;
  box-shadow: var(--shadow-3);
  max-height: 280px; overflow-y: auto;
  border-radius: 0 0 4px 4px;
}
.bx-dropdown__option { background: transparent; color: var(--color-text-primary); padding: 8px 12px; cursor: pointer; }
.bx-dropdown__option:hover  { background: var(--color-dropdown-hover); }
.bx-dropdown__option:active { background: var(--accent); color: #0D1218; }
.bx-dropdown__option.is-selected { background: #1A4A47; }
.bx-dropdown__option.is-selected::after { content: ' ✓'; color: var(--accent); }
.bx-dropdown__divider { border-top: 1px solid #2D4240; }

/* ===== Input-Felder (Nadja CI v2) ===== */
.bx-input {
  background: var(--bg-hover);
  border: 1px solid var(--ink-faint);
  color: var(--color-text-primary);
  padding: 8px 12px;
  border-radius: 4px;
  font: inherit; font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
}
.bx-input:focus { border-color: var(--accent); outline: none; box-shadow: var(--shadow-inset-focus); }
.bx-input::placeholder { color: var(--ink-mute); }

/* ===== Toast-Nachrichten (Nadja CI v2) ===== */
.toast-success { background: #0A2E2B; border-left: 3px solid var(--color-success); color: var(--color-text-primary); padding: 12px 16px; border-radius: 4px; }
.toast-error   { background: #2E1A1A; border-left: 3px solid var(--color-error);   color: var(--color-text-primary); padding: 12px 16px; border-radius: 4px; }
.toast-info    { background: #0A2E2B; border-left: 3px solid var(--accent);         color: var(--color-text-primary); padding: 12px 16px; border-radius: 4px; }
.toast-warning { background: #2E2610; border-left: 3px solid #C08B5C;               color: var(--color-text-primary); padding: 12px 16px; border-radius: 4px; }