/* ============================================================
   „Ink" — datengetriebene Oberfläche nach dem ERP-Designentwurf.
   Aktiv nur unter html[data-design="ink"].

   Kernidee: flache Flächen, Trennung nur über Rand und Grundton
   (genau EIN Schatten im ganzen System, für die schwebende
   Auswahlleiste). Zahlen, Codes und Mikrolabels laufen in
   JetBrains Mono, Fließtext in Space Grotesk. Akzent ist Lime
   (#c8ff3d) auf Ink — im Hellmodus NIE als Textfarbe auf Weiß,
   dort steht #4d6900.

   Struktur bleibt unangetastet: dieselbe Sidebar, dieselbe
   Kopfzeile, dieselben Klassen wie im Rest des Systems.
   ============================================================ */

/* ---------- Schriften (selbst gehostet, on-premises-tauglich) ----------
   Nur latin + latin-ext: für Kyrillisch, CJK, Arabisch usw. greift
   automatisch der Fallback der font-family-Kette. */
@font-face {
    font-family: 'Space Grotesk';
    src: url('fonts/SpaceGrotesk-Variable.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('fonts/SpaceGrotesk-Variable-ext.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Variable-ext.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   TOKENS — dunkel (Grundvariante des Entwurfs)
   ============================================================ */
html[data-design="ink"] {
    --ink-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ink-mono: 'JetBrains Mono', 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
    /* --font-mono heißt historisch so, wird im Basis-CSS aber als UI-Schrift
       benutzt. Unter Ink bleibt es echtes Monospace (TOTP-Codes, EAN, Wiki-
       Code, Uhren rechnen damit); die UI-Schrift setzen wir stattdessen
       gezielt auf body, .btn, .form-control usw. */
    --font-mono: var(--ink-mono);

    --primary: #c8ff3d;
    --primary-dark: #b2e62e;
    --primary-light: #d8ff70;
    --secondary: #a5a5ad;

    --bg-main: #0b0b0c;                /* Grund */
    --bg-dark: #0b0b0c;
    --bg-card: #141417;                /* Fläche 1 (Karte) */
    --bg-sidebar: #101013;             /* Fläche 2 (Panel) */
    --bg-topbar: #0b0b0c;

    --ink-active: #1a1a1d;             /* Auswahl / aktiv */
    --ink-border-strong: #232327;      /* Rand stark (Karten) */
    --border-color: #1e1e21;           /* Rand / Divider */
    --ink-row: #1c1c1f;                /* Zeilentrenner */
    --ink-control: #2e2e33;            /* Rand Kontrolle */
    --ink-inactive: #3a3a41;           /* Rand inaktiv */

    --text-primary: #f2f0ec;
    --text-secondary: #a5a5ad;
    --text-muted: #8a8a92;
    --ink-micro: #8a8a92;              /* Untergrenze für Mikrolabels */

    --ink-on-accent: #0b0b0c;          /* Text auf Lime-Fläche */
    --ink-accent-text: #c8ff3d;        /* Akzent als Textfarbe */
    --ink-accent-tint: #17170a;        /* Akzentfläche getönt */
    --ink-accent-tint-border: #3b4a13;

    --danger: #ff5a3d;
    --ink-danger-border: #4a2118;
    --success: #c8ff3d;
    --warning: #ffb03d;
    --info: #7ab8ff;

    --ink-invert-bg: #f2f0ec;          /* invertierte Fläche (Auswahlleiste) */
    --ink-invert-fg: #0b0b0c;
    --ink-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);

    --radius: 9px;                     /* Button */
    --ink-r-input: 10px;
    --ink-r-cell: 16px;                /* Bento-Zelle / Karte */
    --ink-r-pill: 20px;
    --sidebar-width: 208px;
    --header-height: 60px;
}

/* ============================================================
   TOKENS — hell
   ============================================================ */
html[data-design="ink"][data-theme="light"] {
    --bg-main: #f7f7f4;
    --bg-dark: #f7f7f4;
    --bg-card: #ffffff;
    --bg-sidebar: #f2f1ec;
    --bg-topbar: #ffffff;

    --ink-active: #edf3d9;
    --ink-border-strong: #e4e2db;
    --border-color: #dbd9d1;
    --ink-row: #eae8e1;
    --ink-control: #cdcac1;
    --ink-inactive: #c1beb4;

    --text-primary: #17160f;
    --text-secondary: #4c4b44;
    --text-muted: #6a6961;
    --ink-micro: #5a594f;

    --primary: #c8ff3d;
    --primary-dark: #b2e62e;
    --primary-light: #dcff88;
    --ink-on-accent: #17160f;
    --ink-accent-text: #4d6900;        /* nie #c8ff3d auf Weiß */
    --ink-accent-tint: #f6fce3;
    --ink-accent-tint-border: #aec872;

    --danger: #c02f10;
    --ink-danger-border: #efc3b7;
    --success: #4d6900;
    --warning: #92600a;
    --info: #14567a;

    --ink-invert-bg: #17160f;
    --ink-invert-fg: #f7f7f4;
    --ink-shadow: 0 12px 30px -8px rgba(0, 0, 0, .22);
}

/* ============================================================
   BASIS
   ============================================================ */
html[data-design="ink"] body {
    font-family: var(--ink-sans);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 13.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html[data-design="ink"] h1,
html[data-design="ink"] h2,
html[data-design="ink"] h3,
html[data-design="ink"] h4 {
    letter-spacing: -.02em;
    font-weight: 600;
}

/* Zahlen laufen überall tabellarisch, damit Spalten nicht springen. */
html[data-design="ink"] .table td,
html[data-design="ink"] .table th,
html[data-design="ink"] .stat-info h3,
html[data-design="ink"] .totals-row {
    font-variant-numeric: tabular-nums;
}

/* Der Entwurf kennt genau einen Schatten. Alles andere liegt flach. */
html[data-design="ink"] .card,
html[data-design="ink"] .stat-card,
html[data-design="ink"] .inv-entity-card,
html[data-design="ink"] .doc-card {
    box-shadow: none;
}

/* Fokus ist immer sichtbar — 2 px Akzentrahmen mit 2 px Offset,
   keine Browser-Standardringe. */
html[data-design="ink"] a:focus-visible,
html[data-design="ink"] button:focus-visible,
html[data-design="ink"] input:focus-visible,
html[data-design="ink"] select:focus-visible,
html[data-design="ink"] textarea:focus-visible,
html[data-design="ink"] [tabindex]:focus-visible {
    outline: 2px solid var(--ink-accent-text);
    outline-offset: 2px;
    box-shadow: none;
}

html[data-design="ink"] a { color: var(--ink-accent-text); }
html[data-design="ink"] a:hover { color: var(--ink-accent-text); text-decoration: underline; }

/* ============================================================
   SIDEBAR — bleibt als eigener Bereich klar erkennbar:
   eigener Grundton (Panel-Fläche) + Divider, Icons behalten wir
   (Orientierung), aktiver Eintrag bekommt Fläche + Lime-Kante
   statt einer vollflächigen Lime-Füllung.
   ============================================================ */
html[data-design="ink"] .sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
}

html[data-design="ink"] .sidebar-header {
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    gap: 10px;
}
html[data-design="ink"] .sidebar-header img {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    object-fit: contain;
}
html[data-design="ink"] .sidebar-header h1 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-design="ink"] .sidebar-nav { padding: 8px 0 20px; }
html[data-design="ink"] .nav-section { padding: 0; }

html[data-design="ink"] .nav-section-title {
    font-family: var(--ink-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-micro);
    padding: 16px 16px 8px;
}
html[data-design="ink"] .nav-section-title .nav-toggle { font-size: 9px; }

html[data-design="ink"] .nav-item {
    border-radius: 0;
    margin: 0;
    padding: 8px 16px 8px 14px;
    border-left: 2px solid transparent;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-secondary);
    gap: 9px;
}
html[data-design="ink"] .nav-item .nav-icon {
    width: 16px;
    font-size: 12.5px;
    color: var(--text-muted);
}
html[data-design="ink"] .nav-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html[data-design="ink"] .nav-item:hover {
    background: var(--ink-active);
    color: var(--text-primary);
}
html[data-design="ink"] .nav-item:hover .nav-icon { color: var(--text-secondary); }
html[data-design="ink"] .nav-item.active {
    background: var(--ink-active);
    border-left-color: var(--primary);
    color: var(--text-primary);
    font-weight: 600;
}
html[data-design="ink"] .nav-item.active .nav-icon { color: var(--ink-accent-text); }

html[data-design="ink"] .sidebar-footer {
    border-top: 1px solid var(--border-color);
    padding: 12px 16px;
}
html[data-design="ink"] .sidebar-footer .user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--ink-control);
    color: var(--text-secondary);
    font-family: var(--ink-mono);
    font-size: 10px;
    font-weight: 500;
}
html[data-design="ink"] .sidebar-footer .user-info > div > div:last-child {
    font-family: var(--ink-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-micro);
}

/* Eingeklappte Sidebar: Kante nach innen holen, sonst sitzt das Icon schief. */
html[data-design="ink"].sidebar-collapsed .nav-item {
    padding: 10px 6px;
    border-left-width: 2px;
}

/* ============================================================
   KOPFZEILE
   ============================================================ */
html[data-design="ink"] .content-header {
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-color);
    padding: 0 22px;
    gap: 18px;
}
html[data-design="ink"] .content-header h2 {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-micro);
}
html[data-design="ink"] .header-brand-center span:first-child { display: none; }
html[data-design="ink"] .header-divider { background: var(--border-color); }

html[data-design="ink"] .a11y-btn,
html[data-design="ink"] .header-action-btn {
    border: 1px solid var(--ink-control);
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: transparent;
}
html[data-design="ink"] .a11y-btn:hover,
html[data-design="ink"] .header-action-btn:hover {
    border-color: var(--ink-inactive);
    color: var(--text-primary);
    background: var(--ink-active);
}
html[data-design="ink"] .view-menu.open > .view-menu-trigger,
html[data-design="ink"] .a11y-btn.active {
    background: var(--ink-accent-tint);
    border-color: var(--ink-accent-tint-border);
    color: var(--ink-accent-text);
}

/* ============================================================
   „ANSICHT"-MENÜ
   ============================================================ */
html[data-design="ink"] .view-menu-panel {
    background: var(--bg-card);
    border: 1px solid var(--ink-border-strong);
    border-radius: 14px;
    box-shadow: var(--ink-shadow);
}
html[data-design="ink"] .view-menu-group {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--ink-micro);
}
html[data-design="ink"] .view-item { border-radius: 8px; font-size: 12.5px; }
html[data-design="ink"] .view-item:hover { background: var(--ink-active); }
html[data-design="ink"] .view-item-hint {
    font-family: var(--ink-mono);
    font-size: 10px;
    color: var(--ink-micro);
}
html[data-design="ink"] .a11y-btn.view-item.active {
    background: var(--ink-accent-tint);
    border-color: var(--ink-accent-tint-border);
    color: var(--text-primary);
}
html[data-design="ink"] .a11y-btn.view-item.active .view-item-icon,
html[data-design="ink"] .a11y-btn.view-item.active .view-item-check { color: var(--ink-accent-text); }
html[data-design="ink"] .view-design-opt {
    font-family: var(--ink-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--ink-r-pill);
    border-color: var(--ink-control);
    padding: 7px 12px;
}
html[data-design="ink"] .view-design-opt.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--ink-on-accent);
}
html[data-design="ink"] .view-menu-dot { background: var(--ink-accent-text); }
html[data-design="ink"] .view-lang.is-current { color: var(--ink-accent-text); }

/* ============================================================
   INHALT & KARTEN
   ============================================================ */
html[data-design="ink"] .content-body { padding: 18px; }
@media (max-width: 768px) { html[data-design="ink"] .content-body { padding: 14px; } }

html[data-design="ink"] .card {
    background: var(--bg-card);
    border: 1px solid var(--ink-border-strong);
    border-radius: var(--ink-r-cell);
}
html[data-design="ink"] .card-header {
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--border-color);
    border-left: 0;                 /* der 3-px-Akzentbalken entfällt */
    border-radius: var(--ink-r-cell) var(--ink-r-cell) 0 0;
}
html[data-design="ink"] .card-header h3 {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-micro);
}
html[data-design="ink"] .card-body { padding: 18px 22px; }
html[data-design="ink"] .card-footer {
    padding: 14px 22px;
    border-top: 1px solid var(--border-color);
}
html[data-design="ink"] .section-accent { border-left-color: var(--primary); }

/* Kennzahlen: die Zahl ist das Motiv, nicht das Icon. */
html[data-design="ink"] .stats-grid { gap: 14px; }
html[data-design="ink"] .stat-card {
    background: var(--bg-card);
    border: 1px solid var(--ink-border-strong);
    border-radius: var(--ink-r-cell);
    padding: 18px 20px;
    gap: 14px;
}
html[data-design="ink"] .stat-card:hover { transform: none; border-color: var(--ink-control); }
html[data-design="ink"] .stat-icon {
    border-radius: 8px;
    background: var(--ink-active);
    color: var(--text-secondary);
    font-size: 14px;
}
html[data-design="ink"] .stat-info h3 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.035em;
    line-height: 1.05;
}
html[data-design="ink"] .stat-info p {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-micro);
}

/* ============================================================
   TABELLEN — kompakte Zeilen, Mono für Nummern und Beträge
   ============================================================ */
html[data-design="ink"] .table th {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-micro);
    background: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 11px 16px;
}
html[data-design="ink"] .table td {
    font-size: 12.5px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--ink-row);
    color: var(--text-primary);
}
html[data-design="ink"] .table tbody tr { border-left: 2px solid transparent; }
html[data-design="ink"] .table tbody tr:hover td { background: var(--ink-active); }
html[data-design="ink"] .table tbody tr.selected,
html[data-design="ink"] .table tbody tr.is-selected {
    background: var(--ink-accent-tint);
    border-left-color: var(--primary);
}
html[data-design="ink"] .table td small,
html[data-design="ink"] .table td .text-muted { color: var(--text-muted); }
html[data-design="ink"] .table code,
html[data-design="ink"] .table td a[href*="id="] { font-family: var(--ink-mono); }

/* Beträge und Datumsangaben in Mono, wenn die Zelle es ausweist. */
html[data-design="ink"] .table .num,
html[data-design="ink"] .table td[align="right"],
html[data-design="ink"] .table td[style*="text-align:right"],
html[data-design="ink"] .table td[style*="text-align: right"] {
    font-family: var(--ink-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   BUTTONS
   ============================================================ */
html[data-design="ink"] .btn {
    font-family: var(--ink-sans);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius);
    padding: 10px 15px;
    letter-spacing: 0;
}
html[data-design="ink"] .btn-sm { padding: 7px 11px; font-size: 12px; }
html[data-design="ink"] .btn-lg { padding: 12px 20px; font-size: 14px; }

html[data-design="ink"] .btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--ink-on-accent);
}
html[data-design="ink"] .btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--ink-on-accent);
}
html[data-design="ink"] .btn-secondary {
    background: transparent;
    border-color: var(--ink-control);
    color: var(--text-primary);
}
html[data-design="ink"] .btn-secondary:hover {
    background: var(--ink-active);
    border-color: var(--ink-inactive);
    color: var(--text-primary);
}
html[data-design="ink"] .btn-danger {
    background: transparent;
    border-color: var(--ink-danger-border);
    color: var(--danger);
}
html[data-design="ink"] .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
html[data-design="ink"] .btn-success {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--ink-on-accent);
}
html[data-design="ink"] .btn-warning {
    background: transparent;
    border-color: var(--ink-control);
    color: var(--warning);
}
html[data-design="ink"] .btn-icon { border-radius: var(--radius); }

/* ============================================================
   PILLEN: Badges, Filter, Chips, Tabs
   Status trägt immer das Wort — Farbe allein entscheidet nie.
   ============================================================ */
html[data-design="ink"] .badge {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--ink-r-pill);
    padding: 5px 8px;
    white-space: nowrap;
    background: transparent;
    border: 1px solid var(--ink-control);
    color: var(--text-muted);
}
html[data-design="ink"] .badge-primary,
html[data-design="ink"] .badge-success,
html[data-design="ink"] .badge-available,
html[data-design="ink"] .badge-returned {
    color: var(--ink-accent-text);
    border-color: var(--ink-accent-tint-border);
    background: var(--ink-accent-tint);
}
html[data-design="ink"] .badge-danger,
html[data-design="ink"] .badge-urgent,
html[data-design="ink"] .badge-overdue,
html[data-design="ink"] .badge-high {
    color: var(--danger);
    border-color: var(--ink-danger-border);
    background: transparent;
}
html[data-design="ink"] .badge-warning,
html[data-design="ink"] .badge-maintenance,
html[data-design="ink"] .badge-reserved {
    color: var(--warning);
    border-color: var(--ink-control);
}
html[data-design="ink"] .badge-info,
html[data-design="ink"] .badge-lending,
html[data-design="ink"] .badge-checked_out,
html[data-design="ink"] .badge-rental {
    color: var(--info);
    border-color: var(--ink-control);
}
html[data-design="ink"] .badge-secondary,
html[data-design="ink"] .badge-normal,
html[data-design="ink"] .badge-low,
html[data-design="ink"] .badge-retired,
html[data-design="ink"] .badge-cancelled {
    color: var(--text-muted);
    border-color: var(--ink-control);
}

html[data-design="ink"] .filter-pill,
html[data-design="ink"] .chip,
html[data-design="ink"] .inv-tag-chip {
    font-family: var(--ink-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: var(--ink-r-pill);
    padding: 7px 12px;
    border: 1px solid var(--ink-control);
    background: transparent;
    color: var(--text-secondary);
    white-space: nowrap;   /* Zähler darf nie in die zweite Zeile rutschen */
}
html[data-design="ink"] .filter-pill:hover,
html[data-design="ink"] .chip:hover {
    border-color: var(--ink-inactive);
    color: var(--text-primary);
    background: var(--ink-active);
}
html[data-design="ink"] .filter-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--ink-on-accent);
    font-weight: 500;
}

html[data-design="ink"] .tabs,
html[data-design="ink"] .inv-tabs { border-bottom: 1px solid var(--border-color); gap: 0; }
html[data-design="ink"] .tab,
html[data-design="ink"] .inv-tab {
    font-family: var(--ink-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-micro);
    padding: 11px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
}
html[data-design="ink"] .tab:hover,
html[data-design="ink"] .inv-tab:hover { color: var(--text-primary); background: transparent; }
html[data-design="ink"] .tab.active,
html[data-design="ink"] .inv-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--primary);
    background: transparent;
}

/* ============================================================
   FORMULARE
   ============================================================ */
html[data-design="ink"] .form-control,
html[data-design="ink"] .ss-input {
    background: var(--bg-card);
    border: 1px solid var(--ink-control);
    border-radius: var(--ink-r-input);
    color: var(--text-primary);
    font-family: var(--ink-sans);
    font-size: 12.5px;
    padding: 9px 12px;
}
html[data-design="ink"] .form-control::placeholder { color: var(--ink-micro); }
html[data-design="ink"] .form-control:focus,
html[data-design="ink"] .ss-input:focus {
    border-color: var(--ink-accent-tint-border);
    outline: 2px solid var(--ink-accent-text);
    outline-offset: 2px;
    box-shadow: none;
}
html[data-design="ink"] .form-group label {
    font-family: var(--ink-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-micro);
}
html[data-design="ink"] input[type="checkbox"],
html[data-design="ink"] input[type="radio"] { accent-color: var(--primary); }
html[data-design="ink"] .search-bar .form-control { border-radius: var(--ink-r-input); }

/* ============================================================
   MELDUNGEN, MODALE, LISTEN
   ============================================================ */
html[data-design="ink"] .alert {
    border-radius: var(--ink-r-cell);
    border: 1px solid var(--ink-control);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12.5px;
}
html[data-design="ink"] .alert-success {
    border-color: var(--ink-accent-tint-border);
    background: var(--ink-accent-tint);
}
html[data-design="ink"] .alert-error { border-color: var(--ink-danger-border); }
html[data-design="ink"] .alert-error,
html[data-design="ink"] .alert-warning i,
html[data-design="ink"] .alert-error i { color: var(--danger); }

html[data-design="ink"] .modal {
    background: var(--bg-card);
    border: 1px solid var(--ink-border-strong);
    border-radius: var(--ink-r-cell);
    box-shadow: var(--ink-shadow);
}
html[data-design="ink"] .modal-header,
html[data-design="ink"] .modal-footer { border-color: var(--border-color); }
html[data-design="ink"] .modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
}

html[data-design="ink"] .notif-panel,
html[data-design="ink"] .ss-dd,
html[data-design="ink"] .article-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--ink-border-strong);
    border-radius: 14px;
    box-shadow: var(--ink-shadow);
}
html[data-design="ink"] .notif-panel-header {
    font-family: var(--ink-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-micro);
}
html[data-design="ink"] .notif-item { border-bottom: 1px solid var(--ink-row); }
html[data-design="ink"] .notif-item:hover { background: var(--ink-active); }
html[data-design="ink"] .notif-item-time {
    font-family: var(--ink-mono);
    font-size: 10px;
    color: var(--ink-micro);
}
html[data-design="ink"] .notif-badge {
    background: var(--danger);
    color: #fff;
    font-family: var(--ink-mono);
    font-size: 9px;
    font-weight: 700;
}

html[data-design="ink"] .item-row,
html[data-design="ink"] .line-item-row,
html[data-design="ink"] .inv-activity-item { border-color: var(--ink-row); }
html[data-design="ink"] .item-row:hover { background: var(--ink-active); }

html[data-design="ink"] .empty-state {
    color: var(--text-muted);
    font-size: 12.5px;
}
html[data-design="ink"] .empty-state i { color: var(--ink-inactive); }

html[data-design="ink"] .pagination a,
html[data-design="ink"] .pagination span {
    font-family: var(--ink-mono);
    font-size: 11px;
    border-radius: var(--radius);
    border-color: var(--ink-control);
}
html[data-design="ink"] .pagination .active,
html[data-design="ink"] .pagination a:hover {
    background: var(--ink-active);
    border-color: var(--ink-inactive);
    color: var(--text-primary);
}

html[data-design="ink"] .toolbar {
    padding: 13px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 8px;
}
/* Pillenreihen dürfen umbrechen statt aus dem Viewport zu laufen —
   die Pillen selbst brechen dank white-space:nowrap nicht mehr auf. */
html[data-design="ink"] .toolbar-left,
html[data-design="ink"] .toolbar-right,
html[data-design="ink"] .inv-filters { flex-wrap: wrap; }

html[data-design="ink"] .header-timer-clock,
html[data-design="ink"] .timer-display,
html[data-design="ink"] .totals-row {
    font-family: var(--ink-mono);
    font-variant-numeric: tabular-nums;
}
html[data-design="ink"] .header-timer-active {
    border-radius: var(--ink-r-pill);
    border: 1px solid var(--ink-accent-tint-border);
    background: var(--ink-accent-tint);
}
html[data-design="ink"] .header-timer-dot { background: var(--ink-accent-text); }

/* Schwebende Auswahlleiste: die eine Stelle mit Schatten und
   invertierter Fläche. */
html[data-design="ink"] .inv-bulk-bar {
    background: var(--ink-invert-bg);
    color: var(--ink-invert-fg);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--ink-shadow);
    width: max-content;             /* Pflicht — sonst bricht die Leiste um */
    max-width: calc(100vw - 32px);
}
html[data-design="ink"] .inv-bulk-bar .btn-secondary {
    border-color: rgba(11, 11, 12, .35);
    color: var(--ink-invert-fg);
}
html[data-design="ink"] .inv-bulk-bar .btn-primary {
    background: var(--ink-invert-fg);
    border-color: var(--ink-invert-fg);
    color: var(--ink-invert-bg);
}

/* ============================================================
   ANMELDUNG
   ============================================================ */
html[data-design="ink"] .login-card {
    background: var(--bg-card);
    border: 1px solid var(--ink-border-strong);
    border-radius: var(--ink-r-cell);
    padding: 32px;
}
html[data-design="ink"] .login-card img { border-radius: 8px; }
html[data-design="ink"] .login-card h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.03em;
}
html[data-design="ink"] .login-card p {
    font-family: var(--ink-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-micro);
}

/* ============================================================
   BARRIEREFREIHEITS-MODI auf die Ink-Tokens gemappt
   ============================================================ */
html[data-design="ink"][data-a11y-contrast="high"] {
    --bg-main: #000000;
    --bg-dark: #000000;
    --bg-card: #0b0b0c;
    --bg-sidebar: #0b0b0c;
    --bg-topbar: #000000;
    --text-primary: #ffffff;
    --text-secondary: #e6e6e6;
    --text-muted: #cccccc;
    --ink-micro: #cccccc;
    --border-color: #ffffff;
    --ink-border-strong: #ffffff;
    --ink-row: #7a7a7a;
    --ink-control: #ffffff;
    --ink-inactive: #ffffff;
    --ink-active: #202024;
}
html[data-design="ink"][data-a11y-contrast="high"][data-theme="light"] {
    --bg-main: #ffffff;
    --bg-dark: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-topbar: #ffffff;
    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --text-muted: #333333;
    --ink-micro: #333333;
    --border-color: #000000;
    --ink-border-strong: #000000;
    --ink-row: #767676;
    --ink-control: #000000;
    --ink-inactive: #000000;
    --ink-active: #e8eed4;
    --ink-accent-text: #3d5400;
}

/* Großschrift: die Mikrolabels dürfen nicht mitwachsen bis zur
   Unlesbarkeit, aber unter 9,5 px fällt hier nichts mehr. */
html[data-design="ink"][data-a11y-fontsize="large"] { font-size: 15px; }
html[data-design="ink"][data-a11y-fontsize="large"] body { font-size: 15px; }
html[data-design="ink"][data-a11y-fontsize="large"] .table td,
html[data-design="ink"][data-a11y-fontsize="large"] .nav-item,
html[data-design="ink"][data-a11y-fontsize="large"] .btn { font-size: 14px; }
html[data-design="ink"][data-a11y-fontsize="small"] body { font-size: 12.5px; }

/* Ruhemodus */
html[data-design="ink"][data-a11y-reducemotion="on"] * {
    transition: none !important;
    animation: none !important;
}

/* Farbenblindmodus: Status bekommt zusätzlich eine Musterkante,
   damit Lime/Rot nicht die einzige Unterscheidung sind. */
html[data-design="ink"][data-a11y-colorblind="on"] .badge-danger,
html[data-design="ink"][data-a11y-colorblind="on"] .badge-overdue,
html[data-design="ink"][data-a11y-colorblind="on"] .badge-urgent { border-style: dashed; }
html[data-design="ink"][data-a11y-colorblind="on"] .badge-warning { border-style: dotted; }

/* ============================================================
   RESPONSIV
   ============================================================ */
@media (max-width: 1279px) {
    html[data-design="ink"] .stats-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 768px) {
    html[data-design="ink"] .content-header h2 { font-size: 9px; letter-spacing: .1em; }
    html[data-design="ink"] .table td,
    html[data-design="ink"] .table th { padding: 10px 12px; }
}