/* ════════════════════════════════════════════════════════════════════════════
   Hausverwaltung — Industrial Theme
   ────────────────────────────────────────────────────────────────────────────
   Override-Layer für app.css. Tauscht Farben, Schriften und Komponenten-Look
   gegen einen Linear/Vercel-Pro-Stil aus.
   • Dark-First, Light-Variant via [data-theme="light"]
   • Akzent: Lime  #C8FF00
   • Mono-Font für alle Zahlen
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Schriften: lokal/System (kein CDN — Privacy + Offline) ─────────────────
   'Geist' / 'JetBrains Mono' werden im Stack zuerst probiert; falls nicht
   installiert/lokal hinterlegt, fällt der Browser auf System-UI zurück.
   Konvention: keine fonts.googleapis.com (siehe app/CLAUDE.md). */

/* ── Token-Override: Dark (Default) ──────────────────────────────────────── */
:root,
[data-theme="dark"] {
  --hv-primary:           #C8FF00;
  --hv-primary-light:     #DFFF55;
  --hv-secondary:         #C8FF00;
  --hv-accent:            #00E5C8;
  --hv-success:           #00E08F;
  --hv-warning:           #FFA800;
  --hv-danger:            #FF4D4D;

  --hv-bg:                #0A0A0B;
  --hv-surface:           #111113;
  --hv-sidebar-bg:        #0F0F11;
  --hv-sidebar-border:    #1F1F23;
  --hv-sidebar-text:      #D8D8DC;
  --hv-sidebar-muted:     #7A7A82;
  --hv-sidebar-active-bg: #16161A;
  --hv-sidebar-active-text:#EDEDED;
  --hv-sidebar-hover:     #16161A;
  --hv-text:              #EDEDED;
  --hv-text-muted:        #8A8A92;
  --hv-border:            #1F1F23;
  --hv-border-soft:       #18181B;

  --hv-shadow-sm: 0 0 0 1px rgba(255,255,255,0.02);
  --hv-shadow-md: 0 0 0 1px rgba(255,255,255,0.03);
  --hv-shadow-lg: 0 0 0 1px rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.5);
  --hv-shadow-xl: 0 0 0 1px rgba(255,255,255,0.05), 0 24px 48px rgba(0,0,0,0.6);

  --hv-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hv-font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;

  --hv-radius-sm: 4px;
  --hv-radius-md: 6px;
  --hv-radius-lg: 8px;

  /* Industrial-spezifische Tokens */
  --ind-accent:           #C8FF00;
  --ind-accent-soft:      rgba(200, 255, 0, 0.10);
  --ind-line:             #1F1F23;
  --ind-line-2:           #2A2A30;
  --ind-surface-2:        #16161A;
  --ind-text-subtle:      #5A5A62;
  color-scheme: dark;
}

/* ── Token-Override: Light ───────────────────────────────────────────────── */
[data-theme="light"] {
  --hv-primary:           #1A1A1A;          /* Schwarz statt Lime im Hellmodus */
  --hv-primary-light:     #2D2D2D;
  --hv-secondary:         #1A1A1A;
  --hv-accent:            #1A1A1A;
  --hv-success:           #15803D;
  --hv-warning:           #B45309;
  --hv-danger:            #B91C1C;

  --hv-bg:                #FAFAFA;
  --hv-surface:           #FFFFFF;
  --hv-sidebar-bg:        #FFFFFF;
  --hv-sidebar-border:    #E5E5E5;
  --hv-sidebar-text:      #404040;
  --hv-sidebar-muted:     #A1A1AA;
  --hv-sidebar-active-bg: #1A1A1A;
  --hv-sidebar-active-text:#FAFAFA;
  --hv-sidebar-hover:     #F4F4F5;
  --hv-text:              #18181B;
  --hv-text-muted:        #71717A;
  --hv-border:            #E5E5E5;
  --hv-border-soft:       #F4F4F5;

  --hv-shadow-sm: 0 0 0 1px rgba(0,0,0,0.02);
  --hv-shadow-md: 0 0 0 1px rgba(0,0,0,0.04);
  --hv-shadow-lg: 0 0 0 1px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);

  --ind-accent:           #C8FF00;          /* Lime nur als Akzent-Highlight */
  --ind-accent-soft:      rgba(200, 255, 0, 0.18);
  --ind-line:             #E5E5E5;
  --ind-line-2:           #D4D4D8;
  --ind-surface-2:        #F4F4F5;
  --ind-text-subtle:      #A1A1AA;
  color-scheme: light;
}

/* ── Globale Typografie & Body ───────────────────────────────────────────── */
html, body {
  font-family: var(--hv-font-sans);
  font-feature-settings: "ss01", "cv11";
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hv-topbar-h, 56px) + 8px);
}
body {
  font-size: 0.9rem;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Modals/Sidebars/Offcanvas: kein Bounce auf den Body */
.modal-body,
.offcanvas-body,
.hv-sidebar,
.dropdown-menu {
  overscroll-behavior: contain;
}

/* Zahlen monospace + tabular-nums */
.num,
.tabular,
.fw-bold .num,
.kpi-card .display-6,
.heute-tile .fs-3,
.heute-tile .fw-bold,
td.num, .num td,
.frist-rot, .frist-orange, .frist-grun {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Selection */
::selection { background: var(--ind-accent); color: #000; }

/* Focus-visible */
:focus-visible {
  outline: 2px solid var(--ind-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Scrollbar Industrial */
* { scrollbar-width: thin; scrollbar-color: var(--ind-line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ind-line);
  border: 2px solid var(--hv-bg);
  border-radius: 5px;
  transition: background 0.15s ease;
}
::-webkit-scrollbar-thumb:hover { background: var(--ind-accent); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.hv-sidebar { font-size: 0.85rem; }
.hv-sidebar-brand {
  font-family: var(--hv-font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  border-bottom-color: var(--ind-line);
}
.hv-sidebar-brand i {
  color: transparent;
  background: var(--ind-accent);
  width: 8px; height: 8px;
  border-radius: 50%;
  font-size: 0;
  display: inline-block;
  box-shadow: 0 0 12px var(--ind-accent);
}
[data-theme="light"] .hv-sidebar-brand i { box-shadow: none; }

.hv-search-trigger {
  background: var(--ind-surface-2);
  border: 1px solid var(--ind-line);
  color: var(--hv-sidebar-muted);
  font-size: 0.78rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--hv-radius-sm);
  width: 100%;
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
  font-family: var(--hv-font-sans);
  margin-bottom: 0.5rem;
}
.hv-search-trigger:hover { border-color: var(--ind-line-2); color: var(--hv-text); }
.hv-search-kbd {
  margin-left: auto;
  font-family: var(--hv-font-mono);
  font-size: 0.65rem;
  padding: 1px 5px;
  background: var(--ind-line);
  border-radius: 2px;
  color: var(--hv-sidebar-muted);
}
[data-theme="light"] .hv-search-kbd { background: var(--ind-surface-2); }

.hv-nav-section,
.hv-nav-label {
  font-family: var(--hv-font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ind-text-subtle);
  text-transform: uppercase;
  padding: 1.1rem 0.7rem 0.4rem;
}

.hv-nav-item {
  font-family: var(--hv-font-sans);
  font-size: 0.815rem;
  font-weight: 500;
  border-radius: var(--hv-radius-sm);
  padding: 0.42rem 0.7rem;
  transition: background 0.12s, color 0.12s;
}
.hv-nav-item i { font-size: 0.92rem; opacity: 0.8; }
.hv-nav-item:hover {
  background: var(--hv-sidebar-hover);
  color: var(--hv-text);
}
.hv-nav-item.active {
  background: var(--hv-sidebar-active-bg);
  color: var(--hv-sidebar-active-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--ind-accent);
}
.hv-nav-item.active i { color: var(--hv-sidebar-active-text); opacity: 1; }
[data-theme="light"] .hv-nav-item.active { background: var(--hv-sidebar-active-bg); color: var(--hv-sidebar-active-text); }

.hv-nav-subitem {
  font-family: var(--hv-font-sans);
  font-size: 0.78rem;
  padding: 0.32rem 0.7rem 0.32rem 2rem;
  color: var(--hv-sidebar-muted);
  border-radius: var(--hv-radius-sm);
}
.hv-nav-subitem:hover { background: var(--hv-sidebar-hover); color: var(--hv-text); }
.hv-nav-subitem.active { color: var(--hv-sidebar-active-text); font-weight: 600; }
[data-theme="light"] .hv-nav-subitem.active { color: var(--hv-text); }

/* Badge im Sidebar — monospace, sharp */
.hv-nav-badge {
  background: transparent;
  color: var(--hv-danger);
  font-family: var(--hv-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
}

.hv-sidebar-footer { border-top-color: var(--ind-line); }

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.hv-topbar {
  background: var(--hv-surface);
  border-bottom-color: var(--ind-line);
}
.hv-theme-toggle {
  border-color: var(--ind-line);
  color: var(--hv-text-muted);
  border-radius: var(--hv-radius-sm);
}
.hv-theme-toggle:hover {
  background: var(--ind-surface-2);
  border-color: var(--ind-line-2);
  color: var(--hv-text);
}

/* ── Karten ──────────────────────────────────────────────────────────────── */
.card {
  border-radius: var(--hv-radius-md);
  border: 1px solid var(--ind-line);
  background: var(--hv-surface);
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.card:hover { border-color: var(--ind-line-2); }

.card-body { padding: 1.25rem; }
.card-header {
  background: transparent;
  border-bottom-color: var(--ind-line);
  border-radius: var(--hv-radius-md) var(--hv-radius-md) 0 0;
  padding: 0.85rem 1.25rem;
}
.card-header h6, .card-header h5 {
  font-family: var(--hv-font-sans);
  font-size: 0.78rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hv-text-muted);
  margin: 0;
}

/* Border-Left-KPI-Karten — als 2px-line, lime-akzent */
.kpi-primary, .kpi-success, .kpi-warning, .kpi-danger, .kpi-neutral {
  border-left-width: 2px;
}
.kpi-primary { border-left-color: var(--ind-accent) !important; }
.kpi-primary i { color: var(--ind-accent) !important; }
.kpi-success { border-left-color: var(--hv-success) !important; }
.kpi-warning { border-left-color: var(--hv-warning) !important; }
.kpi-danger  { border-left-color: var(--hv-danger) !important; }

/* Heute-Tiles */
.heute-tile {
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-md);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.heute-tile:hover {
  transform: none;
  border-color: var(--ind-accent);
  box-shadow: none;
}
.heute-tile .fs-3 {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.kpi-card { transition: border-color 0.15s ease; }
.kpi-card:hover { transform: none; border-color: var(--ind-line-2); }
.kpi-card .display-6 {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hv-text);
  --bs-table-hover-bg: var(--ind-surface-2);
  --bs-table-hover-color: var(--hv-text);
  font-size: 0.85rem;
}
.table th {
  font-family: var(--hv-font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hv-text-muted);
  border-bottom: 1px solid var(--ind-line);
  padding: 0.6rem 0.75rem;
}
.table td {
  padding: 0.7rem 0.75rem;
  border-bottom-color: var(--ind-line);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--ind-surface-2); }
.table tbody tr:last-child td { border-bottom: none; }

/* Beträge in Tabellen */
.table .text-end,
.table .text-end-num {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--hv-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--hv-radius-sm);
  padding: 0.42rem 0.85rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  letter-spacing: -0.005em;
}
.btn-sm { padding: 0.28rem 0.7rem; font-size: 0.75rem; }
.btn-lg { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

.btn-primary {
  background: var(--ind-accent);
  border-color: var(--ind-accent);
  color: #000;
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
  background: #DFFF55;
  border-color: #DFFF55;
  color: #000;
}
[data-theme="light"] .btn-primary {
  background: var(--hv-text);
  border-color: var(--hv-text);
  color: var(--hv-bg);
}
[data-theme="light"] .btn-primary:hover {
  background: #2D2D2D;
  border-color: #2D2D2D;
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-info {
  background: transparent;
  color: var(--hv-text);
  border-color: var(--ind-line-2);
}
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-info:hover {
  background: var(--ind-surface-2);
  color: var(--hv-text);
  border-color: var(--ind-line-2);
}
.btn-outline-danger {
  color: var(--hv-danger);
  border-color: var(--hv-danger);
}
.btn-outline-danger:hover {
  background: var(--hv-danger);
  color: #fff;
  border-color: var(--hv-danger);
}
.btn-outline-success {
  color: var(--hv-success);
  border-color: var(--hv-success);
}
.btn-outline-success:hover {
  background: var(--hv-success);
  color: #000;
  border-color: var(--hv-success);
}

.btn-success {
  background: var(--hv-success);
  border-color: var(--hv-success);
  color: #000;
  font-weight: 600;
}
.btn-danger {
  background: var(--hv-danger);
  border-color: var(--hv-danger);
}
.btn-warning {
  background: var(--hv-warning);
  border-color: var(--hv-warning);
  color: #000;
  font-weight: 600;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--hv-font-sans);
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2em 0.55em;
  border-radius: 3px;
}
.badge.bg-primary {
  background: var(--ind-surface-2) !important;
  color: var(--hv-text) !important;
  border: 1px solid var(--ind-line);
}
[data-theme="light"] .badge.bg-primary {
  background: #18181B !important;
  color: #FAFAFA !important;
  border: none;
}
.badge.bg-danger {
  background: rgba(255,77,77,0.12) !important;
  color: var(--hv-danger) !important;
}
[data-theme="light"] .badge.bg-danger {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.badge.bg-warning {
  background: rgba(255,168,0,0.14) !important;
  color: var(--hv-warning) !important;
}
[data-theme="light"] .badge.bg-warning {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.badge.bg-success {
  background: rgba(0,224,143,0.14) !important;
  color: var(--hv-success) !important;
}
[data-theme="light"] .badge.bg-success {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.badge.bg-info {
  background: rgba(0,229,200,0.14) !important;
  color: var(--hv-accent) !important;
}
[data-theme="light"] .badge.bg-info {
  background: #DBEAFE !important;
  color: #1E40AF !important;
}
.badge.bg-light, .badge.bg-secondary {
  background: var(--ind-surface-2) !important;
  color: var(--hv-text-muted) !important;
  border: 1px solid var(--ind-line);
}
[data-theme="light"] .badge.bg-light,
[data-theme="light"] .badge.bg-secondary {
  background: var(--ind-surface-2) !important;
  color: var(--hv-text-muted) !important;
}

/* ── Formulare ───────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--ind-surface-2);
  border-color: var(--ind-line);
  color: var(--hv-text);
  border-radius: var(--hv-radius-sm);
  font-size: 0.85rem;
  font-family: var(--hv-font-sans);
}
[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background: var(--hv-surface);
}
.form-control:focus, .form-select:focus {
  background: var(--ind-surface-2);
  border-color: var(--ind-accent);
  box-shadow: 0 0 0 2px var(--ind-accent-soft);
  color: var(--hv-text);
}
[data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus {
  background: var(--hv-surface);
}
.form-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hv-text-muted);
}

/* ── Alerts/Flash ────────────────────────────────────────────────────────── */
.alert {
  background: var(--ind-surface-2);
  border: 1px solid var(--ind-line);
  border-left-width: 2px;
  color: var(--hv-text);
  border-radius: var(--hv-radius-sm);
  font-size: 0.85rem;
}
.alert-success { border-left-color: var(--hv-success); }
.alert-danger  { border-left-color: var(--hv-danger); color: var(--hv-text); }
.alert-warning { border-left-color: var(--hv-warning); }
.alert-info    { border-left-color: var(--ind-accent); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.hv-breadcrumb {
  font-family: var(--hv-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--hv-text-muted);
}
.hv-breadcrumb a:hover { color: var(--ind-accent); }
[data-theme="light"] .hv-breadcrumb a:hover { color: var(--hv-text); }

/* ── Headlines ───────────────────────────────────────────────────────────── */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--hv-font-sans);
  letter-spacing: -0.02em;
  font-weight: 600;
}
h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1rem; font-weight: 600; }
h5, .h5 { font-size: 0.92rem; font-weight: 600; }

/* Display-Numerik — Hero-Zahlen */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  font-weight: 500;
}

/* ── Suche-Overlay ───────────────────────────────────────────────────────── */
.hv-search-overlay {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
}
[data-theme="light"] .hv-search-overlay {
  background: rgba(0,0,0,0.4);
}
.hv-search-container {
  background: var(--hv-surface);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-md);
  box-shadow: 0 24px 48px rgba(0,0,0,0.5);
}
.hv-search-input {
  font-family: var(--hv-font-sans);
  background: transparent;
  color: var(--hv-text);
}
.hv-search-input:focus { outline: none; }

/* ── List-Group (Tagesplan etc.) ─────────────────────────────────────────── */
.list-group-item {
  background: transparent;
  border-color: var(--ind-line);
  color: var(--hv-text);
  font-size: 0.85rem;
}
.list-group-item-action:hover {
  background: var(--ind-surface-2);
  color: var(--hv-text);
}
.list-group-flush .list-group-item {
  border-bottom-color: var(--ind-line);
}

/* ── Confirm Modal ───────────────────────────────────────────────────────── */
.modal-content {
  background: var(--hv-surface);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-md);
  color: var(--hv-text);
}
.modal-header { border-bottom-color: var(--ind-line); }
.modal-footer { border-top-color: var(--ind-line); }

/* ── Tabs / Nav-Pills ────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom-color: var(--ind-line);
}
.nav-tabs .nav-link {
  color: var(--hv-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 0.9rem;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tabs .nav-link:hover { color: var(--hv-text); border-color: transparent; }
.nav-tabs .nav-link.active {
  background: transparent;
  color: var(--ind-accent);
  border-bottom-color: var(--ind-accent);
}
[data-theme="light"] .nav-tabs .nav-link.active {
  color: var(--hv-text);
  border-bottom-color: var(--hv-text);
}

/* ── Frist-Farben (monospace + sharp) ────────────────────────────────────── */
.frist-rot   { color: var(--hv-danger); font-weight: 600; }
.frist-orange{ color: var(--hv-warning); font-weight: 500; }
.frist-grun  { color: var(--hv-success); }

/* ── Brand-Mark in Sidebar (custom text marker) ──────────────────────────── */
.hv-sidebar-brand::before {
  content: "";
}

/* ── Light-Mode-Spezifika (Mehr Kontrast/Härte) ──────────────────────────── */
[data-theme="light"] body {
  background: var(--hv-bg);
}
[data-theme="light"] .card { background: var(--hv-surface); }
[data-theme="light"] .heute-tile:hover { border-color: var(--hv-text); }
[data-theme="light"] .hv-nav-item.active i { color: var(--hv-sidebar-active-text); }

/* ── Utility-Klassen Industrial ──────────────────────────────────────────── */
.text-mono { font-family: var(--hv-font-mono) !important; font-variant-numeric: tabular-nums; }
.text-eyebrow {
  font-family: var(--hv-font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv-text-muted);
}
.ind-divider {
  border-top: 1px solid var(--ind-line);
  margin: 1.5rem 0;
}

/* ── Bootstrap-Override: text-muted etc. ─────────────────────────────────── */
.text-muted { color: var(--hv-text-muted) !important; }
.text-primary { color: var(--hv-text) !important; }
[data-theme="light"] .text-primary { color: var(--hv-text) !important; }
.text-danger  { color: var(--hv-danger) !important; }
.text-success { color: var(--hv-success) !important; }
.text-warning { color: var(--hv-warning) !important; }
.text-info    { color: var(--hv-accent) !important; }

.bg-light { background: var(--ind-surface-2) !important; }
.bg-primary { background: var(--ind-accent) !important; color: #000 !important; }
[data-theme="light"] .bg-primary { background: var(--hv-text) !important; color: var(--hv-bg) !important; }

/* bg-white wäre im Dark-Mode weiß — neutralisieren (für Card-Header etc.) */
.card-header.bg-white,
.card-footer.bg-white,
.card .bg-white,
.bg-white {
  background: transparent !important;
}
[data-theme="light"] .card-header.bg-white,
[data-theme="light"] .card-footer.bg-white {
  background: var(--hv-surface) !important;
}

/* table-light in Tabellen-Header → Industrial */
.table > :not(caption) > * > .table-light,
.table > thead.table-light,
thead.table-light th,
.table-light {
  --bs-table-bg: transparent;
  --bs-table-color: var(--hv-text-muted);
  background: transparent !important;
  color: var(--hv-text-muted) !important;
}

.border { border-color: var(--ind-line) !important; }
.border-bottom { border-bottom-color: var(--ind-line) !important; }
.border-top { border-top-color: var(--ind-line) !important; }
.border-start { border-left-color: var(--ind-line) !important; }
.border-end { border-right-color: var(--ind-line) !important; }

/* ── Theme-Toggle-Icons stimmig setzen ───────────────────────────────────── */
[data-theme="dark"] .hv-theme-toggle .bi-sun-fill { color: var(--ind-accent); }
[data-theme="light"] .hv-theme-toggle .bi-moon-stars-fill { color: var(--hv-text); }

/* ── Anchor-Farbe ÜBERSCHREIBEN ──────────────────────────────────────────
   app.css setzt im Dark-Mode `a { color: var(--hv-primary) }` — das ist
   nun lime und färbt alle Links grün. Hier neutralisieren. */
[data-theme="dark"] a { color: inherit; }
[data-theme="dark"] a:hover { color: var(--ind-accent); }
[data-theme="dark"] .hv-nav-item,
[data-theme="dark"] .hv-nav-subitem,
[data-theme="dark"] .ind-task,
[data-theme="dark"] .hv-sidebar-brand,
[data-theme="dark"] .hv-breadcrumb a {
  color: var(--hv-sidebar-text);
}
[data-theme="dark"] .hv-nav-item:hover,
[data-theme="dark"] .hv-nav-subitem:hover,
[data-theme="dark"] .ind-task:hover {
  color: var(--hv-text);
}
[data-theme="dark"] .hv-nav-item.active {
  color: var(--hv-sidebar-active-text);
}
[data-theme="dark"] .hv-sidebar-brand { color: var(--hv-text); }
[data-theme="dark"] .ind-task .ttl { color: var(--hv-text); }
[data-theme="dark"] .ind-stream a, [data-theme="dark"] .ind-list a { color: inherit; }

/* btn-primary darf weiterhin schwarzen Text auf Lime haben */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] a.btn-primary { color: #000 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   Industrial-Page-Layout-Klassen
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Page-Header ─────────────────────────────────────────────────────────── */
.ind-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ind-line);
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.ind-head .crumb {
  font-family: var(--hv-font-mono);
  font-size: 0.72rem;
  color: var(--hv-text-muted);
  letter-spacing: 0.02em;
}
.ind-head .crumb .sep { color: var(--ind-text-subtle); margin: 0 8px; }
.ind-head h1 {
  margin: 6px 0 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ind-head .desc {
  font-family: var(--hv-font-mono);
  font-size: 0.78rem;
  color: var(--hv-text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ind-head .actions { display: flex; gap: 6px; align-items: center; }

/* ── Industrial-Grid (12 Spalten, Hairline-Gaps) ─────────────────────────── */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.ind-c12 { grid-column: span 12; }
.ind-c8  { grid-column: span 8; }
.ind-c7  { grid-column: span 7; }
.ind-c6  { grid-column: span 6; }
.ind-c5  { grid-column: span 5; }
.ind-c4  { grid-column: span 4; }
.ind-c3  { grid-column: span 3; }
@media (max-width: 1100px) {
  .ind-c8, .ind-c7, .ind-c6, .ind-c5, .ind-c4 { grid-column: span 12; }
  .ind-c3 { grid-column: span 6; }
}
@media (max-width: 600px) {
  .ind-c3 { grid-column: span 12; }
}

/* ── Industrial-Card ─────────────────────────────────────────────────────── */
.ind-card {
  background: var(--hv-surface);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.ind-card .label {
  font-family: var(--hv-font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hv-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.ind-card h3 {
  font-family: var(--hv-font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

/* ── Industrial-Stat-Tile ────────────────────────────────────────────────── */
.ind-stat .figure {
  font-family: var(--hv-font-mono);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--hv-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.ind-stat .figure .unit {
  font-size: 0.95rem;
  color: var(--hv-text-muted);
  margin-left: 2px;
  font-weight: 500;
}
.ind-stat .delta {
  font-family: var(--hv-font-mono);
  font-size: 0.7rem;
  color: var(--hv-text-muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ind-stat .delta.down { color: var(--hv-danger); }
.ind-stat .delta.up   { color: var(--hv-text); }
.ind-stat .delta.muted { color: var(--hv-text-muted); }

.ind-stat-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hv-text-muted);
  text-decoration: none;
  border-top: 1px solid var(--ind-line);
  padding-top: 0.5rem;
  width: 100%;
  transition: color 0.12s ease;
}
.ind-stat-cta:hover { color: var(--hv-text); text-decoration: none; }
.ind-stat-cta i { font-size: 0.7rem; opacity: 0.7; transition: transform 0.12s ease; }
.ind-stat-cta:hover i { transform: translateX(2px); opacity: 1; }

/* ── Industrial-Task-List ────────────────────────────────────────────────── */
.ind-tasks { display: flex; flex-direction: column; gap: 1px; background: var(--ind-line); }
.ind-task {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--hv-surface);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background-color 140ms ease;
}
.ind-task:hover { background: var(--ind-surface-2); color: inherit; }
.ind-task .icn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 3px; font-size: 0.72rem;
  flex-shrink: 0;
}
.ind-task .icn.danger { background: var(--hv-danger); color: #000; }
.ind-task .icn.warn   { background: var(--hv-warning); color: #000; }
.ind-task .icn.accent { background: var(--ind-accent); color: #000; }
.ind-task .icn.ok     { background: var(--hv-success); color: #000; }
[data-theme="light"] .ind-task .icn.danger { background: var(--hv-danger); color: #fff; }
[data-theme="light"] .ind-task .icn.warn   { background: var(--hv-warning); color: #fff; }
[data-theme="light"] .ind-task .icn.accent { background: var(--ind-accent); color: #000; }
[data-theme="light"] .ind-task .icn.ok     { background: var(--hv-success); color: #fff; }
.ind-task .ttl { font-weight: 500; }
.ind-task .meta {
  font-family: var(--hv-font-mono);
  color: var(--hv-text-muted);
  font-size: 0.72rem;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ind-task .arr { color: var(--ind-text-subtle); font-family: var(--hv-font-mono); }

/* ── Industrial-Activity-Stream ──────────────────────────────────────────── */
.ind-stream { list-style: none; padding: 0; margin: 0; }
.ind-stream li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.8rem;
  align-items: baseline;
  border-bottom: 1px solid var(--hv-border-soft);
}
.ind-stream li:last-child { border-bottom: none; }
.ind-stream .when {
  font-family: var(--hv-font-mono);
  font-size: 0.7rem;
  color: var(--ind-text-subtle);
  font-variant-numeric: tabular-nums;
}
.ind-stream .what { color: var(--hv-text); line-height: 1.45; }
.ind-stream .what b, .ind-stream .what strong {
  color: var(--hv-text);
  font-weight: 600;
}

/* ── Industrial-Bars-Chart (CSS-Only Mini) ───────────────────────────────── */
.ind-bars { display: flex; align-items: flex-end; gap: 2px; height: 80px; margin-top: 10px; }
.ind-bars .bar {
  flex: 1;
  background: var(--ind-line-2);
  transition: background-color 180ms ease;
  min-height: 4px;
}
.ind-bars .bar:hover { background: var(--ind-accent); }

/* ── Industrial-Tag (klein, monospace) ───────────────────────────────────── */
.ind-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--hv-font-mono);
  font-size: 0.65rem;
  padding: 1px 6px;
  background: var(--ind-line);
  color: var(--hv-text-muted);
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.ind-tag.danger { background: rgba(255,77,77,0.14); color: var(--hv-danger); }
.ind-tag.warn   { background: rgba(255,168,0,0.16); color: var(--hv-warning); }
.ind-tag.accent { background: var(--ind-surface-2); color: var(--hv-text); border: 1px solid var(--ind-line); }
.ind-tag.ok     { background: rgba(0,224,143,0.14); color: var(--hv-success); }
[data-theme="light"] .ind-tag.danger { background: #FEE2E2; color: #B91C1C; }
[data-theme="light"] .ind-tag.warn   { background: #FEF3C7; color: #B45309; }
[data-theme="light"] .ind-tag.accent { background: #18181B; color: #FAFAFA; }
[data-theme="light"] .ind-tag.ok     { background: #DCFCE7; color: #15803D; }

/* ── Industrial-Mini-List (Fristen/Mängel/Zahlungen) ─────────────────────── */
.ind-list { list-style: none; padding: 0; margin: 0; }
.ind-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hv-border-soft);
  font-size: 0.82rem;
  align-items: center;
}
.ind-list li:last-child { border-bottom: none; }
.ind-list .name { font-weight: 500; }
.ind-list .meta {
  font-family: var(--hv-font-mono);
  font-size: 0.7rem;
  color: var(--hv-text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.ind-list .amt {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ind-list .amt.ok { color: var(--hv-success); }
.ind-list .amt.danger { color: var(--hv-danger); }

/* ── Industrial Sub-Bar (Filter-Pills + Suche) ───────────────────────────── */
.ind-subbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid var(--ind-line);
  margin-bottom: 16px;
}
.ind-pill {
  padding: 4px 11px;
  font-size: 0.74rem;
  font-weight: 500;
  font-family: var(--hv-font-sans);
  background: transparent;
  border: 1px solid var(--ind-line);
  color: var(--hv-text-muted);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.ind-pill:hover { border-color: var(--ind-line-2); color: var(--hv-text); }
.ind-pill.active {
  background: var(--hv-text);
  color: var(--hv-bg);
  border-color: var(--hv-text);
}
[data-theme="dark"] .ind-pill.active { color: var(--hv-bg); }
.ind-pill .num {
  font-family: var(--hv-font-mono);
  font-size: 0.65rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.ind-find {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  background: var(--ind-surface-2);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-sm);
  width: 280px;
  transition: border-color 0.15s ease;
}
.ind-find:focus-within { border-color: var(--ind-line-2); }
.ind-find i { color: var(--hv-text-muted); font-size: 0.85rem; }
.ind-find input {
  border: none; background: transparent; outline: none;
  flex: 1; font-family: inherit; font-size: 0.78rem;
  color: var(--hv-text);
}

/* ── Industrial Inbox: Three-Pane ────────────────────────────────────────── */
.ind-inbox {
  display: grid;
  grid-template-columns: 320px 1fr 320px;
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-md);
  background: var(--hv-surface);
  overflow: hidden;
  height: calc(100vh - 280px);
  min-height: 540px;
}
@media (max-width: 1300px) {
  .ind-inbox { grid-template-columns: 280px 1fr 280px; }
}
@media (max-width: 1100px) {
  .ind-inbox { grid-template-columns: 280px 1fr; }
  .ind-inbox-context { display: none; }
}

.ind-inbox-list {
  border-right: 1px solid var(--ind-line);
  overflow-y: auto;
  background: var(--ind-surface-2);
}
.ind-inbox-list-head {
  position: sticky; top: 0; z-index: 1;
  background: var(--ind-surface-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--ind-line);
  font-family: var(--hv-font-mono);
  font-size: 0.7rem;
  color: var(--hv-text-muted);
  display: flex; justify-content: space-between; align-items: center;
}

.ind-mail {
  display: block;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hv-border-soft);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease;
  border-left: 2px solid transparent;
}
.ind-mail:hover { background: var(--hv-sidebar-hover); }
.ind-mail.active {
  background: var(--hv-surface);
  border-left-color: var(--ind-accent);
}
.ind-mail.unread .ind-mail-from { font-weight: 600; color: var(--hv-text); }
.ind-mail.unread .ind-mail-subj { color: var(--hv-text); font-weight: 500; }
.ind-mail-row1 {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
  gap: 8px;
}
.ind-mail-from {
  font-size: 0.78rem;
  color: var(--hv-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
}
.ind-mail-from .dot {
  width: 6px; height: 6px;
  background: var(--ind-accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.ind-mail-when {
  font-family: var(--hv-font-mono);
  font-size: 0.66rem;
  color: var(--ind-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.ind-mail-subj {
  font-size: 0.82rem;
  color: var(--hv-text-muted);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-mail-snip {
  font-size: 0.73rem;
  color: var(--ind-text-subtle);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; min-width: 0;
}
.ind-mail-tags { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; }

.ind-inbox-detail {
  overflow-y: auto;
  padding: 24px 28px;
  display: flex; flex-direction: column;
}
.ind-inbox-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--hv-text-muted); font-family: var(--hv-font-mono);
  font-size: 0.82rem;
}
.ind-inbox-empty i { font-size: 2.2rem; margin-bottom: 12px; opacity: 0.4; }

.ind-mail-head h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ind-mail-meta {
  font-family: var(--hv-font-mono);
  font-size: 0.72rem;
  color: var(--hv-text-muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ind-line);
  margin-bottom: 16px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ind-mail-body {
  white-space: pre-wrap;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--hv-text);
  flex: 1;
  font-family: var(--hv-font-sans);
}

.ind-kbd-bar {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--ind-line);
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.7rem;
  color: var(--hv-text-muted);
  font-family: var(--hv-font-mono);
}
.ind-kbd-bar kbd {
  font-family: inherit;
  font-size: 0.65rem;
  padding: 1px 5px;
  border: 1px solid var(--ind-line-2);
  border-bottom-width: 2px;
  border-radius: 3px;
  margin-right: 4px;
  color: var(--hv-text);
  background: var(--ind-surface-2);
}

.ind-inbox-context {
  border-left: 1px solid var(--ind-line);
  background: var(--ind-surface-2);
  padding: 16px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.ind-inbox-context .ctx-title {
  font-family: var(--hv-font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hv-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.ind-ai-card {
  background: var(--hv-surface);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-sm);
  padding: 12px;
}
.ind-ai-card .ai-eyebrow {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hv-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ind-ai-card .ai-text {
  font-size: 0.82rem;
  line-height: 1.55;
  margin: 0 0 10px;
  color: var(--hv-text);
}
.ind-ai-card .ai-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ind-ai-suggest-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 0;
  font-size: 0.78rem;
  color: var(--hv-text);
  border-bottom: 1px solid var(--hv-border-soft);
}
.ind-ai-suggest-row:last-child { border-bottom: none; }
.ind-ai-suggest-row i { color: var(--hv-text-muted); margin-top: 2px; flex-shrink: 0; }

.ind-fact {
  background: var(--hv-surface);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-sm);
  padding: 12px;
}
.ind-fact dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hv-text-muted);
  font-weight: 600;
  margin-top: 8px;
}
.ind-fact dt:first-child { margin-top: 0; }
.ind-fact dd {
  margin: 2px 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--hv-text);
}

/* ── Industrial Detail-Hero ──────────────────────────────────────────────── */
.ind-detail-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--ind-surface-2);
  border: 1px solid var(--ind-line);
  border-radius: var(--hv-radius-md);
  margin-bottom: 16px;
}
@media (max-width: 800px) {
  .ind-detail-hero { grid-template-columns: 1fr; }
}
.ind-detail-hero .mark {
  width: 56px; height: 56px;
  border-radius: var(--hv-radius-md);
  background: var(--hv-text);
  color: var(--hv-bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--hv-font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
[data-theme="dark"] .ind-detail-hero .mark {
  background: var(--ind-accent); color: #000;
}
.ind-detail-hero .info h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ind-detail-hero .info .sub {
  font-size: 0.82rem;
  color: var(--hv-text-muted);
  margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.ind-detail-hero .stats {
  display: flex; gap: 24px;
  text-align: right;
}
.ind-detail-hero .stats .lab {
  font-size: 0.62rem; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 600;
  color: var(--hv-text-muted);
}
.ind-detail-hero .stats .val {
  font-family: var(--hv-font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

/* ── Industrial Tabs ─────────────────────────────────────────────────────── */
.ind-tabs {
  display: flex;
  border-bottom: 1px solid var(--ind-line);
  margin-bottom: 16px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ind-tabs::-webkit-scrollbar { display: none; }
.ind-tab {
  padding: 10px 14px;
  font-family: var(--hv-font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--hv-text-muted);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.ind-tab:hover { color: var(--hv-text); }
.ind-tab.active {
  color: var(--hv-text);
  border-bottom-color: var(--ind-accent);
  font-weight: 600;
}
[data-theme="light"] .ind-tab.active { border-bottom-color: var(--hv-text); }
.ind-tab .num {
  font-family: var(--hv-font-mono);
  font-size: 0.65rem;
  background: var(--ind-line);
  color: var(--hv-text-muted);
  padding: 1px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ind-tab.active .num { background: var(--ind-accent-soft); color: var(--ind-accent); }
[data-theme="light"] .ind-tab.active .num { background: var(--hv-text); color: var(--hv-bg); }

.ind-tab-pane { display: none; }
.ind-tab-pane.active { display: block; animation: fadein 240ms ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* ── Industrial Timeline ─────────────────────────────────────────────────── */
.ind-timeline { list-style: none; padding: 0; margin: 0; }
.ind-timeline li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hv-border-soft);
  align-items: baseline;
}
.ind-timeline li:last-child { border-bottom: none; }
.ind-timeline .when {
  font-family: var(--hv-font-mono);
  font-size: 0.7rem;
  color: var(--hv-text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.ind-timeline .what .head {
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.ind-timeline .what .desc {
  font-size: 0.78rem;
  color: var(--hv-text-muted);
}

/* ── Industrial KV-List (Definition-List-Stil) ───────────────────────────── */
.ind-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 24px;
  margin: 0;
}
.ind-kv > div { display: flex; flex-direction: column; }
.ind-kv dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hv-text-muted);
  font-weight: 600;
}
.ind-kv dd {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--hv-text);
}
.ind-kv dd.num {
  font-family: var(--hv-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── Responsive Tables: Mobile-Stacking ─────────────────────────────────────
   Aktivierung:
     <table class="table hv-table-stack">
       <thead><tr><th>Mieter</th>...</tr></thead>
       <tbody>
         <tr>
           <td data-label="Mieter">Müller</td>
           ...
   Bis 768px wird jede Zeile zu einem Block, und vor jeder Zelle erscheint
   das data-label aus dem zugehoerigen <th>. data-label="" auf einer Zelle
   unterdrueckt das Label (z.B. fuer reine Action-Spalten). */
@media (max-width: 768px) {
  .hv-table-stack { border: 0; }
  .hv-table-stack thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px; margin: -1px; overflow: hidden;
    padding: 0; position: absolute; width: 1px;
  }
  .hv-table-stack tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--hv-border);
    border-radius: var(--hv-radius-md);
    background: var(--hv-surface);
    padding: 8px 12px;
  }
  .hv-table-stack tbody tr + tr { border-top: 1px solid var(--hv-border); }
  .hv-table-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid var(--hv-border-soft);
    text-align: right;
    word-break: break-word;
  }
  .hv-table-stack tbody td:last-child { border-bottom: none; }
  .hv-table-stack tbody td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hv-text-muted);
    font-weight: 600;
    text-align: left;
    flex: 0 0 auto;
    min-width: 38%;
  }
  .hv-table-stack tbody td[data-label=""]::before { content: none; }
  .hv-table-stack tbody td[data-label=""] { justify-content: flex-end; }
  /* Aktions-Buttonleiste in einer Stack-Zelle nicht zerreissen */
  .hv-table-stack tbody td .d-flex.gap-1,
  .hv-table-stack tbody td .d-flex.gap-2 { flex-wrap: wrap; justify-content: flex-end; }
  /* sortierbare Tabellen: Pfeile im Stack-Modus deaktivieren */
  .hv-table-stack thead th[role="columnheader"] { cursor: default; }
}

/* ── Schnellzugriff-Buttons als Industrial-Pills ─────────────────────────── */
.ind-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-quick a, .ind-quick button.quickadd-btn {
  font-family: var(--hv-font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--ind-line-2);
  color: var(--hv-text);
  border-radius: var(--hv-radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ind-quick a:hover, .ind-quick button.quickadd-btn:hover {
  border-color: var(--ind-line-2);
  background: var(--ind-surface-2);
  color: var(--hv-text);
}
.ind-quick button.quickadd-btn { cursor: pointer; }