/* HYBRID-LINKKONZEPT Admin-UI — Komponenten
   Buttons, Formulare, Tabellen, Status, Alerts, Tabs, Accordion, Modal, Filter,
   Bulk-Bar, Secret/Copy, Cards, Empty States, Schrittkette, Auth-Karte.
   Nach hlk-shell.css laden. Enthält am Ende die Alias-Schicht für Paket 1. */

/* ---------- Seitenkopf ---------- */
.hlk-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hlk-space-6); }
.hlk-page-head__sub { font-size: var(--hlk-fs-data); color: var(--hlk-text-3); margin-top: 3px; }
.hlk-page-head__actions { display: flex; align-items: center; gap: var(--hlk-space-2); position: relative; }
.hlk-zone-label { font-size: var(--hlk-fs-overline-sm); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--hlk-text-4); }

/* ---------- Flächen ---------- */
.hlk-panel {
  background: var(--hlk-surface);
  border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius-lg);
  overflow: hidden;
}
.hlk-panel__head { padding: 13px 18px; border-bottom: 1px solid var(--hlk-border); display: flex; align-items: center; gap: var(--hlk-space-3); }
.hlk-panel__body { padding: var(--hlk-space-4) 18px; }
.hlk-panel__foot {
  display: flex; align-items: center; gap: var(--hlk-space-3);
  padding: var(--hlk-space-3) 18px;
  border-top: 1px solid var(--hlk-border);
  background: var(--hlk-surface-soft);
}
.hlk-panel--flush { overflow: visible; }
.hlk-panel__title { font-size: var(--hlk-fs-data); font-weight: 600; }

/* ---------- Buttons ---------- */
.hlk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--hlk-h-btn); padding: 0 var(--hlk-space-3);
  border: 1px solid var(--hlk-border-strong);
  border-radius: var(--hlk-radius);
  background: var(--hlk-surface);
  color: var(--hlk-text-2);
  font-family: inherit; font-size: var(--hlk-fs-data); font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.hlk-btn:hover { background: var(--hlk-surface-soft); border-color: var(--hlk-text-4); color: var(--hlk-text); text-decoration: none; }
.hlk-btn--primary { border-color: var(--hlk-primary); background: var(--hlk-primary); color: #fff; padding: 0 14px; }
.hlk-btn--primary:hover { background: var(--hlk-primary-hover); border-color: var(--hlk-primary-hover); color: #fff; }
.hlk-btn--ghost { border-color: transparent; background: transparent; color: var(--hlk-text-3); font-weight: 400; }
.hlk-btn--ghost:hover { background: var(--hlk-surface-sunken); border-color: transparent; color: var(--hlk-text); }
.hlk-btn--tertiary { height: var(--hlk-h-btn-sm); padding: 0 6px; border-color: transparent; background: transparent; color: var(--hlk-primary); font-size: var(--hlk-fs-data-sm); }
.hlk-btn--tertiary:hover { background: var(--hlk-primary-soft); border-color: transparent; color: var(--hlk-primary-hover); }
.hlk-btn--diagnostic { background: var(--hlk-surface-soft); }
.hlk-btn--danger { border-color: var(--hlk-danger-border); background: var(--hlk-surface); color: var(--hlk-danger); }
.hlk-btn--danger:hover { background: var(--hlk-danger-soft); border-color: #cf8b83; color: var(--hlk-danger); }
.hlk-btn--danger-solid { border-color: var(--hlk-danger); background: var(--hlk-danger); color: #fff; }
.hlk-btn--danger-solid:hover { background: var(--hlk-danger-hover); border-color: var(--hlk-danger-hover); color: #fff; }
.hlk-btn--sm { height: var(--hlk-h-btn-sm); padding: 0 10px; font-size: var(--hlk-fs-data-sm); }
.hlk-btn--lg { height: var(--hlk-h-btn-lg); padding: 0 var(--hlk-space-4); font-size: var(--hlk-fs-control); }
.hlk-btn--block { width: 100%; height: var(--hlk-h-btn-xl); font-size: var(--hlk-fs-control); }
.hlk-btn--icon { width: var(--hlk-h-btn); padding: 0; }
.hlk-btn--icon.hlk-btn--sm { width: 26px; height: 26px; }
.hlk-btn:disabled, .hlk-btn[aria-disabled="true"] {
  border-style: dashed; border-color: var(--hlk-border-strong);
  background: var(--hlk-disabled-bg); color: var(--hlk-disabled-text);
  cursor: not-allowed;
}
.hlk-btn--danger:disabled, .hlk-btn--danger-solid:disabled {
  border-style: solid; border-color: var(--hlk-danger-border);
  background: var(--hlk-danger-soft); color: #c98a82;
}
.hlk-disabled-reason { font-size: var(--hlk-fs-meta); color: var(--hlk-danger-text); margin-top: 6px; }

.hlk-btn-group { display: flex; align-items: center; gap: var(--hlk-space-2); }
.hlk-icon { width: 13px; height: 13px; flex: none; }

/* ---------- Menü (Werkzeuge, Zeilen-Overflow) ---------- */
.hlk-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  min-width: 226px; padding: 5px;
  background: var(--hlk-surface);
  border: 1px solid var(--hlk-border-strong);
  border-radius: var(--hlk-radius-lg);
  box-shadow: var(--hlk-e2);
}
.hlk-menu[hidden] { display: none; }
.hlk-menu__label { font-size: var(--hlk-fs-overline-sm); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hlk-text-4); padding: 6px 9px 4px; }
.hlk-menu__item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 9px; border: none; border-radius: var(--hlk-radius-sm);
  background: transparent; color: var(--hlk-text-2);
  font-family: inherit; font-size: var(--hlk-fs-data); text-align: left; text-decoration: none;
  cursor: pointer;
}
.hlk-menu__item:hover { background: var(--hlk-surface-sunken); color: var(--hlk-text); text-decoration: none; }
.hlk-menu__item--danger { color: var(--hlk-danger); }
.hlk-menu__item--danger:hover { background: var(--hlk-danger-soft); color: var(--hlk-danger); }
.hlk-menu__meta { margin-left: auto; font-family: var(--hlk-mono); font-size: var(--hlk-fs-overline); color: var(--hlk-text-4); }
.hlk-menu__sep { height: 1px; background: var(--hlk-border-soft); margin: 5px 0; }
.hlk-menu__note { padding: 6px 9px 4px; margin-top: 5px; border-top: 1px solid var(--hlk-border-soft); font-size: var(--hlk-fs-overline); color: var(--hlk-text-4); }

/* ---------- Kennzahlenreihe ---------- */
.hlk-metrics { display: grid; grid-template-columns: repeat(var(--hlk-metric-cols, 4), minmax(0, 1fr)); }
.hlk-metric { padding: 15px 18px; border-right: 1px solid var(--hlk-border-soft); }
.hlk-metric:last-child { border-right: none; }
.hlk-metric__label { font-size: var(--hlk-fs-meta); color: var(--hlk-text-3); }
.hlk-metric__value { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin-top: 1px; }
.hlk-metric__value--sm { font-size: 17px; }
.hlk-metric__note { font-size: var(--hlk-fs-meta); color: var(--hlk-text-4); }
.hlk-metric__value--danger { color: var(--hlk-danger); }
.hlk-metric__value--warning { color: var(--hlk-warning-text); }
.hlk-metric__value--success { color: var(--hlk-success-text); }

/* ---------- Zustandsstreifen ---------- */
.hlk-state { border-left: 3px solid var(--hlk-neutral); }
.hlk-state--ok { border-left-color: var(--hlk-success); }
.hlk-state--warn { border-left-color: var(--hlk-warning); }
.hlk-state--error { border-left-color: var(--hlk-danger); }
.hlk-state--info { border-left-color: var(--hlk-info); }
.hlk-state__body { display: flex; align-items: center; gap: var(--hlk-space-6); padding: 18px 22px; }
.hlk-state__icon { width: 34px; height: 34px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.hlk-state__title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.hlk-state__sub { font-size: var(--hlk-fs-data-sm); color: var(--hlk-text-3); }
.hlk-state__facts { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.hlk-state__fact-label { font-size: var(--hlk-fs-overline); color: var(--hlk-text-4); }
.hlk-state__fact-value { font-size: var(--hlk-fs-data-sm); font-weight: 500; }
.hlk-state__icon .hlk-icon { width: 18px; height: 18px; }
.hlk-state--ok .hlk-state__icon { background: var(--hlk-success-bg); color: var(--hlk-success); }
.hlk-state--warn .hlk-state__icon { background: var(--hlk-warning-bg); color: var(--hlk-warning-text); }
.hlk-state--error .hlk-state__icon { background: var(--hlk-danger-bg); color: var(--hlk-danger); }
.hlk-state--error .hlk-state__title { color: var(--hlk-danger-text); }
.hlk-state__fact-value--bad { color: var(--hlk-danger-text); }

/* ---------- Status: Punkt, Badge ---------- */
.hlk-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; }
.hlk-status { display: inline-flex; align-items: center; gap: 7px; }
.hlk-dot--success { background: var(--hlk-success); }
.hlk-dot--info { background: var(--hlk-info); }
.hlk-dot--warning { background: var(--hlk-warning); }
.hlk-dot--danger { background: var(--hlk-danger); }
.hlk-dot--neutral { background: var(--hlk-neutral); }
.hlk-dot--unchecked { background: transparent; border: 1.5px solid var(--hlk-text-4); }
.hlk-dot--running { background: repeating-linear-gradient(45deg, var(--hlk-neutral) 0 2px, var(--hlk-border-strong) 2px 4px); }
.hlk-status--danger { color: var(--hlk-danger-text); }
.hlk-status--muted { color: var(--hlk-text-3); }

.hlk-badge, .pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--hlk-fs-meta); font-weight: 500;
  padding: 2px 7px; border-radius: var(--hlk-radius-sm);
  background: var(--hlk-neutral-soft); color: var(--hlk-neutral-text);
  border: 1px solid var(--hlk-neutral-line);
}
.hlk-badge--success, .pill--success { background: var(--hlk-success-soft); color: var(--hlk-success-text); border-color: var(--hlk-success-line); }
.hlk-badge--warning, .pill--warning { background: var(--hlk-warning-soft); color: var(--hlk-warning-text); border-color: var(--hlk-warning-line); }
.hlk-badge--danger, .pill--danger { background: var(--hlk-danger-soft); color: var(--hlk-danger-text); border-color: var(--hlk-danger-line); }
.hlk-badge--info, .pill--info { background: var(--hlk-info-soft); color: var(--hlk-info-text); border-color: var(--hlk-info-line); }
.hlk-badge--muted, .pill--muted { background: var(--hlk-neutral-soft); color: var(--hlk-neutral-text); border-color: var(--hlk-neutral-line); }
.hlk-badge--locked { background: var(--hlk-disabled-bg); color: var(--hlk-disabled-text); border-style: dashed; }
.hlk-badge--mono { font-family: var(--hlk-mono); font-size: var(--hlk-fs-overline); }

/* ---------- Alerts ---------- */
.hlk-alert {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--hlk-border);
  border-left: 3px solid var(--hlk-neutral);
  background: var(--hlk-surface);
  border-radius: var(--hlk-radius);
  padding: 11px 13px;
}
.hlk-alert__title { font-size: var(--hlk-fs-data); font-weight: 600; }
.hlk-alert__text { font-size: var(--hlk-fs-data-sm); }
.hlk-alert ul { margin-top: var(--hlk-space-1); padding-left: var(--hlk-space-4); font-size: var(--hlk-fs-data-sm); }
.hlk-alert--success { border-color: var(--hlk-success-line); border-left-color: var(--hlk-success); background: var(--hlk-success-bg); color: var(--hlk-success-text); }
.hlk-alert--warning { border-color: var(--hlk-warning-line); border-left-color: var(--hlk-warning); background: var(--hlk-warning-bg); color: var(--hlk-warning-text); }
.hlk-alert--danger { border-color: var(--hlk-danger-line); border-left-color: var(--hlk-danger); background: var(--hlk-danger-bg); color: var(--hlk-danger-text); }
.hlk-alert--info { border-color: var(--hlk-info-line); border-left-color: var(--hlk-info); background: var(--hlk-info-bg); color: var(--hlk-info-text); }

/* ---------- Formulare ---------- */
.hlk-form-section + .hlk-form-section { border-top: 1px solid var(--hlk-border-soft); margin-top: var(--hlk-space-4); padding-top: var(--hlk-space-4); }
.hlk-form-section__title { font-size: var(--hlk-fs-h3); font-weight: 600; }
.hlk-form-section__hint { font-size: var(--hlk-fs-caption); color: var(--hlk-text-3); margin-top: 2px; }
.hlk-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hlk-space-4); }
.hlk-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hlk-form-grid--1 { grid-template-columns: minmax(0, 1fr); }
.hlk-field { display: block; }
.hlk-field__label { display: flex; align-items: baseline; gap: 5px; font-size: var(--hlk-fs-data-sm); font-weight: 500; color: var(--hlk-text-2); }
.hlk-field__req { color: var(--hlk-danger); }
.hlk-field__hint { display: block; font-size: var(--hlk-fs-meta); color: var(--hlk-text-4); margin-top: var(--hlk-space-1); }
.hlk-field__error { display: flex; align-items: center; gap: 5px; font-size: var(--hlk-fs-meta); color: var(--hlk-danger); margin-top: var(--hlk-space-1); }

input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="number"], select, textarea, .hlk-input {
  width: 100%;
  height: var(--hlk-h-input);
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid var(--hlk-border-strong);
  border-radius: var(--hlk-radius);
  background: var(--hlk-surface);
  color: var(--hlk-text);
  font-family: inherit;
  font-size: var(--hlk-fs-data);
}
textarea { height: auto; padding: 8px 10px; line-height: 1.5; resize: vertical; }
select { padding: 0 8px; }
.hlk-input--mono, input.hlk-input--mono { font-family: var(--hlk-mono); font-size: var(--hlk-fs-data-sm); }
.hlk-input--num { text-align: right; }
.hlk-input--sm { height: var(--hlk-h-input-sm); font-size: var(--hlk-fs-data-sm); margin-top: 0; }
.hlk-input--inline { width: auto; margin-top: 0; }
.is-invalid, .hlk-input--error { border-color: var(--hlk-danger) !important; box-shadow: 0 0 0 3px rgba(169, 45, 32, .12); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--hlk-primary); box-shadow: var(--hlk-focus-ring); }
input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--hlk-primary); }
.hlk-check { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.hlk-check__title { display: block; font-size: var(--hlk-fs-data); color: var(--hlk-text); }
.hlk-check__hint { display: block; font-size: var(--hlk-fs-meta); color: var(--hlk-text-4); }
.hlk-save-bar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--hlk-space-3);
  background: var(--hlk-surface);
  border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius-lg);
  padding: 11px var(--hlk-space-4);
  box-shadow: 0 -2px 8px -4px rgba(19, 26, 32, .12);
}

/* ---------- Tabellen ---------- */
.hlk-table-wrap, .data-table-wrap {
  background: var(--hlk-surface);
  border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius-lg);
  overflow: hidden;
}
.hlk-table { width: 100%; font-size: var(--hlk-fs-data); }
.hlk-table thead tr { background: var(--hlk-surface-soft); border-bottom: 1px solid var(--hlk-border); }
.hlk-table th {
  text-align: left; padding: var(--hlk-space-2) var(--hlk-space-3);
  font-size: var(--hlk-fs-overline-sm); font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--hlk-text-3);
  white-space: nowrap;
}
.hlk-table td { padding: 0 var(--hlk-space-3); }
.hlk-table tbody tr { height: var(--hlk-h-row); border-bottom: 1px solid var(--hlk-border-soft); }
.hlk-table tbody tr:last-child { border-bottom: none; }
.hlk-table tbody tr:hover { background: var(--hlk-surface-soft); }
.hlk-table tbody tr.is-selected { background: #f2f7f9; }
.hlk-table__select { width: 34px; padding-left: 14px !important; }
.hlk-table__num { text-align: right; font-family: var(--hlk-mono); font-size: var(--hlk-fs-data-sm); }
.hlk-table__id { font-family: var(--hlk-mono); font-size: var(--hlk-fs-data-sm); font-weight: 500; }
.hlk-table__meta { font-family: var(--hlk-mono); font-size: var(--hlk-fs-meta); color: var(--hlk-text-3); }
.hlk-table__actions { text-align: right; white-space: nowrap; padding-right: 14px !important; }
.hlk-table__truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlk-table tbody tr .hlk-row-hover { visibility: hidden; }
.hlk-table tbody tr:hover .hlk-row-hover,
.hlk-table tbody tr:focus-within .hlk-row-hover { visibility: visible; }
.hlk-table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hlk-space-3);
  padding: 10px 14px; border-top: 1px solid var(--hlk-border); background: var(--hlk-surface-soft);
  font-size: var(--hlk-fs-caption); color: var(--hlk-text-3);
}
.hlk-pagination { display: flex; align-items: center; gap: var(--hlk-space-1); }
.hlk-pagination__current { font-size: var(--hlk-fs-data-sm); font-weight: 500; color: var(--hlk-text); padding: 0 var(--hlk-space-2); }

/* ---------- Filter ---------- */
.hlk-filterbar { background: var(--hlk-surface); border: 1px solid var(--hlk-border); border-bottom: none; border-radius: var(--hlk-radius-lg) var(--hlk-radius-lg) 0 0; }
.hlk-filterbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: var(--hlk-space-3) var(--hlk-space-4); }
.hlk-filterbar__row + .hlk-filterbar__row { border-top: 1px solid var(--hlk-border-soft); background: var(--hlk-surface-faint); }
.hlk-search { position: relative; width: 320px; flex: none; }
.hlk-search .hlk-icon { position: absolute; left: 9px; top: 10px; width: 14px; height: 14px; color: var(--hlk-text-4); }
.hlk-search input { padding-left: 29px; margin-top: 0; }
.hlk-divider-v { width: 1px; height: 22px; background: var(--hlk-border); }
.hlk-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.hlk-preset {
  font-size: var(--hlk-fs-data-sm); padding: 4px 9px;
  border: 1px solid var(--hlk-border-strong); border-radius: var(--hlk-radius-sm);
  background: var(--hlk-surface); color: var(--hlk-text-2); text-decoration: none; cursor: pointer;
}
.hlk-preset:hover { border-color: var(--hlk-text-4); color: var(--hlk-text); text-decoration: none; }
.hlk-preset.is-active { background: var(--hlk-primary); border-color: var(--hlk-primary); color: #fff; }
.hlk-filter-toggle { margin-left: auto; }
.hlk-filter-toggle.is-active { border-color: var(--hlk-primary-line); background: var(--hlk-primary-soft); color: var(--hlk-primary); }
.hlk-resultline {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--hlk-space-2);
  padding: 9px var(--hlk-space-4);
  background: var(--hlk-surface-soft);
  border: 1px solid var(--hlk-border); border-bottom: none;
  font-size: var(--hlk-fs-caption); color: var(--hlk-text-3);
}
.hlk-resultline__count { font-weight: 600; color: var(--hlk-text); }
.hlk-resultline__summary { margin-left: auto; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--hlk-fs-caption); padding: 3px 5px 3px 8px;
  border: 1px solid var(--hlk-border-strong); border-radius: var(--hlk-radius-sm);
  background: var(--hlk-surface); color: var(--hlk-text-2);
}
.filter-chip__remove { color: var(--hlk-text-4); font-size: var(--hlk-fs-data); line-height: 1; text-decoration: none; }
.filter-chip__remove:hover { color: var(--hlk-danger); text-decoration: none; }
.hlk-table-wrap--attached { border-radius: 0 0 var(--hlk-radius-lg) var(--hlk-radius-lg); }

/* ---------- Bulk-Leiste ---------- */
.hlk-bulk, [data-bulk-bar] {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 35;
  display: none; align-items: center; gap: var(--hlk-space-3);
  background: var(--hlk-bulk-bg);
  border-radius: var(--hlk-radius-lg);
  padding: 10px 14px;
  box-shadow: var(--hlk-e-bulk);
}
.hlk-bulk.is-visible, [data-bulk-bar].is-visible { display: flex; }
.hlk-bulk__count { display: inline-flex; align-items: center; gap: var(--hlk-space-2); font-size: var(--hlk-fs-data); font-weight: 500; color: #fff; }
.hlk-bulk__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--hlk-radius-sm);
  background: var(--hlk-primary); font-family: var(--hlk-mono); font-size: var(--hlk-fs-meta);
}
.hlk-bulk select, .hlk-bulk__btn {
  height: var(--hlk-h-btn-sm); margin-top: 0; padding: 0 10px;
  border: 1px solid var(--hlk-bulk-border); border-radius: var(--hlk-radius-sm);
  background: var(--hlk-bulk-surface); color: var(--hlk-bulk-text);
  font-family: inherit; font-size: var(--hlk-fs-data-sm); width: auto; cursor: pointer;
}
.hlk-bulk__btn:hover { background: var(--hlk-bulk-surface-hover); }
.hlk-bulk__sep { width: 1px; height: 20px; background: var(--hlk-bulk-border); }
.hlk-bulk__btn--danger { border-color: var(--hlk-bulk-danger-border); background: transparent; color: var(--hlk-bulk-danger-text); }
.hlk-bulk__btn--danger:hover { background: var(--hlk-bulk-danger-bg); color: var(--hlk-danger-soft); }
.hlk-bulk__close { width: 26px; height: 26px; border: none; background: transparent; color: var(--hlk-text-4); cursor: pointer; border-radius: var(--hlk-radius-sm); }
.hlk-bulk__close:hover { color: #fff; }

/* ---------- Secret / Copy ---------- */
.hlk-secret { display: flex; align-items: center; gap: var(--hlk-space-2); }
.hlk-secret__value, .copy-card__value {
  flex: 1; min-width: 0;
  font-family: var(--hlk-mono); font-size: var(--hlk-fs-data-sm);
  background: var(--hlk-surface-soft);
  border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius);
  padding: 7px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hlk-secret__value[data-secret-shown="0"] { letter-spacing: .06em; }
.copy-card { display: block; }
.copy-card__head { display: flex; align-items: center; gap: 7px; }
.copy-card__title { font-size: var(--hlk-fs-data-sm); font-weight: 600; }
.copy-card__tag { font-size: var(--hlk-fs-overline); color: var(--hlk-text-4); }
.copy-card__note { font-size: var(--hlk-fs-meta); color: var(--hlk-text-3); margin-top: 6px; }

/* ---------- Tabs ---------- */
.hlk-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hlk-border); }
.hlk-tabs__btn {
  height: var(--hlk-h-btn-lg); padding: 0 var(--hlk-space-3);
  border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent; color: var(--hlk-text-3);
  font-family: inherit; font-size: var(--hlk-fs-control); cursor: pointer;
}
.hlk-tabs__btn:hover { color: var(--hlk-text); }
.hlk-tabs__btn.is-active { color: var(--hlk-primary); border-bottom-color: var(--hlk-primary); font-weight: 600; }

/* ---------- Accordion ---------- */
.hlk-collapsible, details.hlk-collapsible {
  background: var(--hlk-surface);
  border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius-lg);
}
.hlk-collapsible > summary {
  display: flex; align-items: center; gap: 10px;
  padding: var(--hlk-space-3) 14px;
  font-size: var(--hlk-fs-data); font-weight: 500;
  cursor: pointer; list-style: none;
}
.hlk-collapsible > summary::-webkit-details-marker { display: none; }
.hlk-collapsible > summary::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-right: 2px solid var(--hlk-text-3); border-bottom: 2px solid var(--hlk-text-3);
  transform: rotate(-45deg); transition: transform .12s ease-out;
}
.hlk-collapsible[open] > summary::before { transform: rotate(45deg); }
.hlk-collapsible > summary:hover { background: var(--hlk-surface-soft); }
.hlk-collapsible__body { border-top: 1px solid var(--hlk-border-soft); padding: 14px; }
.hlk-collapsible__meta { margin-left: auto; font-size: var(--hlk-fs-meta); color: var(--hlk-text-4); font-weight: 400; }
.hlk-collapsible--warning { border-color: var(--hlk-warning-line); }
.hlk-collapsible--warning > summary { background: var(--hlk-warning-bg); color: var(--hlk-warning-text); }
.hlk-collapsible--danger { border-color: var(--hlk-danger-line); }
.hlk-collapsible--danger > summary { background: var(--hlk-danger-bg); color: var(--hlk-danger-text); }

/* ---------- Danger Zone ---------- */
.hlk-danger-zone { background: var(--hlk-surface); border: 1px solid var(--hlk-danger-line); border-radius: var(--hlk-radius-lg); overflow: hidden; }
.hlk-danger-zone__head {
  display: flex; align-items: center; gap: var(--hlk-space-2);
  padding: 11px var(--hlk-space-4);
  background: var(--hlk-danger-bg); border-bottom: 1px solid var(--hlk-danger-line);
  font-size: var(--hlk-fs-data-sm); font-weight: 600; color: var(--hlk-danger-text);
}
.hlk-danger-zone__hint { font-weight: 400; font-size: var(--hlk-fs-meta); color: #a1655c; }
.hlk-danger-zone__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hlk-space-4);
  padding: 13px var(--hlk-space-4);
  border-bottom: 1px solid #f5e3e0;
}
.hlk-danger-zone__row:last-child { border-bottom: none; }
.hlk-danger-zone__title { font-size: var(--hlk-fs-data); font-weight: 500; }
.hlk-danger-zone__text { font-size: var(--hlk-fs-meta); color: var(--hlk-text-3); }

/* ---------- Modal ---------- */
.hlk-modal[hidden] { display: none; }
.hlk-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: var(--hlk-overlay);
  padding: var(--hlk-space-4);
}
.hlk-modal__box {
  width: 100%; max-width: 440px;
  background: var(--hlk-surface);
  border: 1px solid var(--hlk-border-strong);
  border-radius: var(--hlk-radius-lg);
  box-shadow: 0 24px 48px -12px rgba(19, 26, 32, .4);
  overflow: hidden;
}
.hlk-modal__head { display: flex; align-items: center; gap: var(--hlk-space-2); padding: 18px 20px 0; }
.hlk-modal__icon { width: 26px; height: 26px; flex: none; border-radius: var(--hlk-radius); background: var(--hlk-danger-soft); display: inline-flex; align-items: center; justify-content: center; }
.hlk-modal__title { font-size: 15px; font-weight: 600; }
.hlk-modal__body { padding: 10px 20px 0; font-size: var(--hlk-fs-data); color: var(--hlk-text-2); }
.hlk-modal__scope {
  margin-top: var(--hlk-space-3); padding: 10px 12px;
  background: var(--hlk-surface-soft); border: 1px solid var(--hlk-border); border-radius: var(--hlk-radius);
  font-size: var(--hlk-fs-data-sm); color: var(--hlk-text-2);
}
.hlk-modal__foot {
  display: flex; justify-content: flex-end; gap: var(--hlk-space-2);
  padding: 14px 20px; margin-top: var(--hlk-space-4);
  background: var(--hlk-surface-soft); border-top: 1px solid var(--hlk-border);
}

/* ---------- Empty State ---------- */
.empty-state, .hlk-empty { padding: 56px 20px; text-align: center; }
.hlk-empty__icon { width: 38px; height: 38px; border-radius: 50%; background: var(--hlk-surface-sunken); display: inline-flex; align-items: center; justify-content: center; }
.hlk-empty__title, .empty-state p:first-child { font-size: var(--hlk-fs-h3); font-weight: 600; margin-top: var(--hlk-space-3); }
.hlk-empty__text { font-size: var(--hlk-fs-data-sm); color: var(--hlk-text-3); margin-top: var(--hlk-space-1); }
.hlk-empty__actions { display: flex; gap: var(--hlk-space-2); justify-content: center; margin-top: var(--hlk-space-4); }

/* ---------- Schrittkette ---------- */
.hlk-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.hlk-step { display: flex; align-items: center; gap: 9px; min-width: 0; padding-right: var(--hlk-space-3); }
.hlk-step__num {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--hlk-fs-overline); font-weight: 600;
  background: var(--hlk-surface); color: var(--hlk-text-4); border: 1.5px solid var(--hlk-border-strong);
}
.hlk-step__title { font-size: var(--hlk-fs-data-sm); color: var(--hlk-text-4); white-space: nowrap; }
.hlk-step__note { font-size: var(--hlk-fs-overline); color: var(--hlk-text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hlk-step__line { height: 1.5px; flex: 1; min-width: 12px; background: var(--hlk-border); }
.hlk-step.is-done .hlk-step__num { background: var(--hlk-success); border-color: var(--hlk-success); color: #fff; }
.hlk-step.is-done .hlk-step__title { color: var(--hlk-text); font-weight: 500; }
.hlk-step.is-done .hlk-step__line { background: var(--hlk-success); }
.hlk-step.is-current .hlk-step__num { background: var(--hlk-primary-soft); border: 2px solid var(--hlk-primary); color: var(--hlk-primary); }
.hlk-step.is-current .hlk-step__title { color: var(--hlk-primary); font-weight: 600; }
.hlk-step.is-blocked .hlk-step__num { background: var(--hlk-danger-soft); border: 2px solid var(--hlk-danger); color: var(--hlk-danger); }
.hlk-step.is-blocked .hlk-step__title { color: var(--hlk-danger-text); font-weight: 600; }
.hlk-steps--vertical { display: flex; flex-direction: column; }
.hlk-steps--vertical .hlk-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--hlk-space-3); align-items: start; }
.hlk-steps--vertical .hlk-step__title, .hlk-steps--vertical .hlk-step__note { white-space: normal; }

/* ---------- Ladezustand ---------- */
.hlk-loading { display: flex; align-items: center; gap: var(--hlk-space-3); }
.hlk-spinner {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  border: 2px solid var(--hlk-border); border-top-color: var(--hlk-primary);
  animation: hlk-spin .8s linear infinite;
}
@keyframes hlk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hlk-spinner { animation-duration: 2.4s; } }
.hlk-progress { height: 4px; border-radius: 2px; background: var(--hlk-surface-sunken); overflow: hidden; }
.hlk-progress__bar { display: block; height: 100%; background: var(--hlk-primary); }

/* ---------- Auth ---------- */
body.auth-screen { min-height: 100vh; background: var(--hlk-canvas); }
.auth-topbar {
  height: var(--hlk-h-topbar); background: var(--hlk-surface); border-bottom: 1px solid var(--hlk-border);
  display: flex; align-items: center; gap: 10px; padding: 0 20px;
}
.auth-shell { display: flex; align-items: center; justify-content: center; padding: var(--hlk-space-12) 20px; }
.auth-card { width: 100%; max-width: 396px; }
.auth-card--wide { max-width: 460px; }
.auth-card__panel {
  background: var(--hlk-surface); border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius-lg); padding: 20px; margin-top: var(--hlk-space-4);
}
.auth-card h1 { font-size: 20px; }
.auth-password { position: relative; display: block; width: 100%; }
.auth-password__toggle {
  position: absolute; right: 0; top: 0;
  height: 20px; padding: 0 5px;
  border: 1px solid transparent; border-radius: var(--hlk-radius-sm);
  background: transparent; color: var(--hlk-primary);
  font-family: inherit; font-size: var(--hlk-fs-caption); font-weight: 500; cursor: pointer;
}
.auth-password__toggle:hover { background: var(--hlk-primary-soft); }
.auth-link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--hlk-space-3); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hlk-border-soft); }

/* Definitionsraster für Schlüssel/Wert-Listen (Stammdaten, Technik, Verbindungsdaten). */
.hlk-spec { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 9px 14px; margin: 0; font-size: var(--hlk-fs-data-sm); }
.hlk-spec dt { color: var(--hlk-text-3); }
.hlk-spec dd { margin: 0; color: var(--hlk-text); word-break: break-word; }

/* ---------- Basis-Komponenten (Paket 9: aus Übergangsschicht befördert, tote Reste entfernt) ---------- */
.card {
  background: var(--hlk-surface); border: 1px solid var(--hlk-border);
  border-radius: var(--hlk-radius-lg); box-shadow: none;
  padding: 18px; margin-bottom: var(--hlk-space-4);
}
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--hlk-space-4); margin-bottom: 18px; }
.section-heading__meta { max-width: var(--hlk-read-max); }
.section-heading__actions { display: flex; flex-wrap: wrap; gap: var(--hlk-space-2); align-items: center; }
.grid { display: grid; gap: var(--hlk-space-4); }
.grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flash { border-radius: var(--hlk-radius); padding: 11px 13px; border: 1px solid var(--hlk-success-line); border-left: 3px solid var(--hlk-success); background: var(--hlk-success-bg); color: var(--hlk-success-text); font-size: var(--hlk-fs-data-sm); }
.flash--error { border-color: var(--hlk-danger-line); border-left-color: var(--hlk-danger); background: var(--hlk-danger-bg); color: var(--hlk-danger-text); }
.flash--success { background: var(--success-soft); border-color: #bfdfca; color: var(--success); }
.callout--warning { border: 1px solid var(--hlk-warning-line); border-left: 3px solid var(--hlk-warning); background: var(--hlk-warning-bg); color: var(--hlk-warning-text); border-radius: var(--hlk-radius); padding: 11px 13px; font-size: var(--hlk-fs-data-sm); }
.button, button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--hlk-h-btn); padding: 0 var(--hlk-space-3);
  border: 1px solid var(--hlk-border-strong); border-radius: var(--hlk-radius);
  background: var(--hlk-surface); color: var(--hlk-text-2);
  font-family: inherit; font-size: var(--hlk-fs-data); font-weight: 500; cursor: pointer; text-decoration: none;
}
.button:hover { background: var(--hlk-surface-soft); border-color: var(--hlk-text-4); color: var(--hlk-text); text-decoration: none; }
.button--soft { background: var(--primary-soft); border-color: #cfe7ef; color: var(--primary); }
.button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.hlk-doc-flow { display: flex; flex-direction: column; gap: var(--hlk-space-3); }
.hlk-help > summary { font-size: var(--hlk-fs-data-sm); color: var(--hlk-primary); font-weight: 500; }
.page-footer { padding: var(--hlk-space-4) var(--hlk-space-6); font-size: var(--hlk-fs-caption); color: var(--hlk-text-4); }
.list-note { display: flex; align-items: center; gap: var(--hlk-space-2); font-size: var(--hlk-fs-caption); color: var(--hlk-text-3); }

/* Listen-/Diagnose-Bausteine (Paket 9: aus Übergangsschicht befördert) */
.callout { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; background: var(--surface-soft); }
.callout > *:last-child { margin-bottom: 0; }
.inline-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cell-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cell-title { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.cell-subtitle { color: var(--text-soft); font-size: var(--hlk-fs-meta); overflow-wrap: anywhere; }
/* Domain-Spalte: breiter halten und den Domainnamen in einer Zeile führen (5V-Feinschliff). */
.hlk-table__domain { min-width: 260px; }
.hlk-table__domain .cell-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.status-card { border: 1px solid var(--border); border-radius: 6px; padding: 12px; background: var(--surface-soft); }
.status-card strong { display: block; margin-bottom: 4px; }
.system-checks { display: grid; gap: 10px; }
.system-check { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; background: #fff; }
.system-check__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.system-check__detail { color: var(--text-soft); overflow-wrap: anywhere; }
.filter-chip__label { overflow-wrap: anywhere; white-space: normal; }
.active-filters__reset { font-weight: 700; font-size: .86rem; }

/* Reiter/Tabs (JS-gestützt; Paket 9: aus Übergangsschicht befördert) */
.hlk-tabs__nav { display: none; }
.hlk-tabs--js .hlk-tabs__nav { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 20px; border-bottom: 1px solid var(--border); }
.hlk-tabs__tab { appearance: none; border: none; background: transparent; color: var(--text-soft); font-weight: 600; font-size: .94rem; padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.hlk-tabs__tab:hover { color: var(--text); }
.hlk-tabs__tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.hlk-tabs__tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.hlk-tabpanel > h2:first-child { margin-top: 0; }
@media (max-width: 1100px) { .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .status-grid { grid-template-columns: 1fr; } .system-check { flex-direction: column; } }

/* ---------- Dashboard ---------- */
.hlk-dash-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--hlk-space-4); align-items: start; }
.hlk-dash-diag { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hlk-space-3); align-items: start; }
.hlk-worklist__item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--hlk-border-soft); }
.hlk-worklist__item:last-child { border-bottom: none; }
.hlk-worklist__title { font-size: var(--hlk-fs-control); font-weight: 500; }
.hlk-worklist__detail { font-size: var(--hlk-fs-data-sm); color: var(--hlk-text-3); }
.hlk-worklist__route { margin-left: auto; font-family: var(--hlk-mono); font-size: var(--hlk-fs-caption); color: var(--hlk-text-4); white-space: nowrap; }

/* ---------- Responsive ---------- */
@media (max-width: 1599px) {
  .hlk-hide-lg { display: none; }
}
@media (max-width: 1023px) {
  .hlk-dash-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hlk-dash-diag { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1279px) {
  .hlk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hlk-metric { border-bottom: 1px solid var(--hlk-border-soft); }
  .hlk-hide-md { display: none; }
  .hlk-form-grid, .hlk-form-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hlk-metrics, .grid--two { grid-template-columns: minmax(0, 1fr); }
  .hlk-page-head { flex-direction: column; align-items: stretch; gap: var(--hlk-space-3); }
  .hlk-page-head__actions { flex-wrap: wrap; }
  .hlk-btn--block-mobile { width: 100%; }
  .hlk-search { width: 100%; }
  /* Auf schmalen Viewports nicht schweben, sondern inline zeigen – so bleiben die
     Sammelaktionen (Aktivieren/Deaktivieren) auch auf Tablet/schmalem Fenster erreichbar.
     Die Sichtbarkeit steuert weiterhin .is-visible (JS) bzw. der <noscript>-Stil. */
  .hlk-bulk, [data-bulk-bar] { position: static; transform: none; left: auto; bottom: auto; width: 100%; margin: 0 0 var(--hlk-space-3); box-shadow: none; flex-wrap: wrap; }
  .hlk-steps { grid-auto-flow: row; }
  .hlk-hide-sm { display: none; }
  .hlk-state__body { flex-direction: column; align-items: flex-start; }
  .hlk-state__facts { margin-left: 0; flex-wrap: wrap; gap: var(--hlk-space-3); }
}
@media print { .sidebar, .topbar, .hlk-bulk { display: none; } }