/*
 * Kopie aus innohubone/ui, packages/core/innohub.css
 * Stand: Commit 9dfb522d5ddae6aa6a2029a6478843985cb610e6 vom 06.11.2026
 * Nicht von Hand ändern; Nachziehen siehe packages/control-plane/README.md (Oberfläche).
 */
/*
 * InnoHub UI · innohub.css
 * Schicht A, Teil 2: Komponenten-Klassen mit Präfix ih-. Setzt tokens.css voraus.
 *
 * Regeln:
 * - Kein globaler Reset. Es werden nur Elemente mit ih-Klassen gestaltet, plus Kinder
 *   davon (z. B. th/td in .ih-table). Fremde Seiten bleiben unberührt.
 * - Eine Klasse pro Baustein, Varianten als Modifikator (.ih-btn--primary), Zustände
 *   als is-/aria-Attribute (.is-active, [aria-current="page"], :disabled).
 * - Farben nur über Tokens; kein Hex in dieser Datei.
 *
 * Inhalt: 1 Basis · 2 Shell · 3 Typografie · 4 Buttons · 5 Badges und Status
 * 6 Tabellen · 7 Formulare · 8 Karten und Kennzahlen · 9 Hinweise, Leerzustand, Toast
 * 10 Tabs, Pills, Details, Fortschritt, Dialog · 11 Hilfsklassen
 */

@import url("./tokens.css");

/* ============================================================ 1 Basis */

.ih-app {
  box-sizing: border-box;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--ih-font-sans);
  font-size: var(--ih-text-sm);
  line-height: var(--ih-leading);
  color: var(--ih-fg);
  background: var(--ih-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}
.ih-app *,
.ih-app *::before,
.ih-app *::after {
  box-sizing: border-box;
}
.ih-app a {
  color: var(--ih-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.ih-app a:hover {
  color: var(--ih-link-hover);
}
.ih-app :focus-visible {
  outline: 2px solid var(--ih-ring);
  outline-offset: 2px;
  border-radius: var(--ih-radius-sm);
}

/* ============================================================ 2 Shell */

/* Sidebar-Layout: <div class="ih-shell"><aside class="ih-sidebar">…</aside><div class="ih-shell__main">…</div></div> */
.ih-shell {
  display: grid;
  grid-template-columns: var(--ih-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.ih-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ih-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-4);
  padding: var(--ih-space-4) var(--ih-space-3);
  /* dunkle Sidebar: die Text- und Linien-Tokens innerhalb umlenken */
  --ih-fg: var(--ih-sidebar-fg);
  --ih-fg-muted: var(--ih-sidebar-fg-muted);
  --ih-fg-subtle: var(--ih-sidebar-fg-muted);
  --ih-surface-hover: var(--ih-sidebar-accent);
  --ih-border: var(--ih-sidebar-border);
  color: var(--ih-fg);
  background: var(--ih-sidebar);
  border-right: var(--ih-border-width) solid var(--ih-border);
}
.ih-sidebar__footer {
  margin-top: auto;
  padding-top: var(--ih-space-3);
  border-top: var(--ih-border-width) solid var(--ih-border);
  font-size: var(--ih-text-xs);
  color: var(--ih-fg-muted);
}

/* Marke: offizielles Logo (<img>) + optionaler Produktname */
.ih-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ih-space-3);
  padding: 0 var(--ih-space-2);
  color: var(--ih-fg);
  text-decoration: none;
}
.ih-brand:hover {
  color: var(--ih-fg);
}
.ih-brand img {
  display: block;
  height: 1.5rem;
  width: auto;
}
.ih-brand__product {
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-medium);
  color: var(--ih-fg);
}

/* Navigation (vertikal in der Sidebar, horizontal in der Topbar) */
.ih-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ih-nav__title {
  padding: var(--ih-space-3) var(--ih-space-2) var(--ih-space-1);
  font-size: var(--ih-text-xs);
  font-weight: var(--ih-weight-semibold);
  color: var(--ih-fg-subtle);
}
.ih-nav__link {
  display: flex;
  align-items: center;
  gap: var(--ih-space-2);
  padding: var(--ih-space-2) var(--ih-space-2);
  border-radius: var(--ih-radius);
  color: var(--ih-fg-muted);
  font-weight: var(--ih-weight-medium);
  text-decoration: none;
  transition: background var(--ih-duration) var(--ih-ease), color var(--ih-duration) var(--ih-ease);
}
.ih-nav__link:hover {
  background: var(--ih-surface-hover);
  color: var(--ih-fg);
}
.ih-nav__link[aria-current="page"],
.ih-nav__link.is-active {
  background: var(--ih-primary);
  color: var(--ih-primary-fg);
}
.ih-nav__link svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}
.ih-nav__badge {
  margin-left: auto;
}

/* Kopfzeile: Titelbereich oben im Hauptteil, oder Topbar-Layout ohne Sidebar */
.ih-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ih-space-3) var(--ih-space-4);
  min-height: var(--ih-header-height);
  padding: var(--ih-space-2) var(--ih-space-6);
  background: var(--ih-surface);
  border-bottom: var(--ih-border-width) solid var(--ih-border);
}
.ih-header__spacer {
  flex: 1 1 auto;
}
.ih-header .ih-nav {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ih-space-1);
}
.ih-header__user {
  display: inline-flex;
  align-items: center;
  gap: var(--ih-space-2);
  color: var(--ih-fg-muted);
  font-size: var(--ih-text-sm);
}

/* Inhaltsbereich */
.ih-page {
  width: 100%;
  max-width: var(--ih-page-max-width);
  padding: var(--ih-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-6);
}
.ih-page--narrow {
  max-width: 44rem;
}
.ih-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ih-space-3) var(--ih-space-4);
}
.ih-page__title {
  margin: 0;
  font-family: var(--ih-font-display);
  font-size: var(--ih-text-xl);
  font-weight: var(--ih-weight-semibold);
  line-height: var(--ih-leading-tight);
  letter-spacing: -0.01em;
}
.ih-page__lead {
  margin: var(--ih-space-1) 0 0;
  color: var(--ih-fg-muted);
}
.ih-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ih-space-2);
}

/* Login: zentrierte schmale Karte ohne Shell */
.ih-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--ih-space-6);
}
.ih-login .ih-card {
  width: 100%;
  max-width: 24rem;
}
.ih-login .ih-brand {
  justify-content: center;
  margin-bottom: var(--ih-space-4);
}

@media (max-width: 900px) {
  .ih-shell {
    grid-template-columns: 1fr;
  }
  .ih-sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: var(--ih-border-width) solid var(--ih-border);
  }
  .ih-sidebar .ih-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ih-sidebar .ih-nav__title {
    width: 100%;
  }
  .ih-page,
  .ih-header {
    padding-left: var(--ih-space-4);
    padding-right: var(--ih-space-4);
  }
}

/* ============================================================ 3 Typografie */

.ih-h1,
.ih-h2,
.ih-h3 {
  margin: 0;
  line-height: var(--ih-leading-tight);
  font-weight: var(--ih-weight-semibold);
  color: var(--ih-fg);
}
.ih-h1 {
  font-family: var(--ih-font-display);
  font-size: var(--ih-text-xl);
  letter-spacing: -0.01em;
}
.ih-h2 {
  font-size: var(--ih-text-lg);
}
.ih-h3 {
  font-size: var(--ih-text-md);
}
.ih-text {
  margin: 0;
}
.ih-muted {
  color: var(--ih-fg-muted);
}
.ih-subtle {
  color: var(--ih-fg-subtle);
}
.ih-small {
  font-size: var(--ih-text-xs);
}
.ih-mono,
.ih-key {
  font-family: var(--ih-font-mono);
  font-size: 0.92em;
}
.ih-key {
  color: var(--ih-link);
  text-decoration: none;
}
.ih-key:hover {
  text-decoration: underline;
}
.ih-code {
  display: block;
  margin: 0;
  padding: var(--ih-space-3) var(--ih-space-4);
  overflow-x: auto;
  font-family: var(--ih-font-mono);
  font-size: var(--ih-text-xs);
  line-height: 1.6;
  color: var(--ih-fg);
  background: var(--ih-bg-subtle);
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius);
}
.ih-kbd {
  display: inline-block;
  padding: 0 0.4em;
  font-family: var(--ih-font-mono);
  font-size: var(--ih-text-xs);
  line-height: 1.6;
  border: var(--ih-border-width) solid var(--ih-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--ih-radius-sm);
  background: var(--ih-surface);
}

/* ============================================================ 4 Buttons */

.ih-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ih-space-2);
  height: var(--ih-control-height);
  padding: 0 var(--ih-space-4);
  margin: 0;
  border: var(--ih-border-width) solid var(--ih-border-strong);
  border-radius: var(--ih-radius);
  background: var(--ih-surface);
  color: var(--ih-fg);
  font: inherit;
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background var(--ih-duration) var(--ih-ease), border-color var(--ih-duration) var(--ih-ease), color var(--ih-duration) var(--ih-ease);
}
.ih-btn:hover {
  background: var(--ih-surface-hover);
  color: var(--ih-fg);
}
.ih-btn:active {
  transform: translateY(1px);
}
.ih-btn:disabled,
.ih-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ih-btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}
.ih-btn--primary {
  background: var(--ih-primary);
  border-color: var(--ih-primary);
  color: var(--ih-primary-fg);
}
.ih-btn--primary:hover {
  background: var(--ih-primary-hover);
  border-color: var(--ih-primary-hover);
  color: var(--ih-primary-fg);
}
.ih-btn--danger {
  background: var(--ih-danger);
  border-color: var(--ih-danger);
  color: var(--ih-danger-fg);
}
.ih-btn--danger:hover {
  background: var(--ih-danger-hover);
  border-color: var(--ih-danger-hover);
  color: var(--ih-danger-fg);
}
.ih-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ih-fg-muted);
}
.ih-btn--ghost:hover {
  background: var(--ih-surface-hover);
  color: var(--ih-fg);
}
.ih-btn--link {
  height: auto;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--ih-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.ih-btn--link:hover {
  background: transparent;
  color: var(--ih-link-hover);
}
.ih-btn--sm {
  height: var(--ih-control-height-sm);
  padding: 0 var(--ih-space-3);
  font-size: var(--ih-text-xs);
}
.ih-btn--lg {
  height: var(--ih-control-height-lg);
  padding: 0 var(--ih-space-6);
  font-size: var(--ih-text-md);
}
.ih-btn--icon {
  width: var(--ih-control-height);
  padding: 0;
}
.ih-btn--icon.ih-btn--sm {
  width: var(--ih-control-height-sm);
}
.ih-btn--block {
  width: 100%;
}
.ih-btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.ih-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-color: var(--ih-fg-subtle) transparent var(--ih-fg-subtle) transparent;
  border-radius: 50%;
  animation: ih-spin 0.8s linear infinite;
}
.ih-btn--primary.is-loading::after {
  border-color: var(--ih-primary-fg) transparent var(--ih-primary-fg) transparent;
}
@keyframes ih-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Gruppe aus Aktionen (Formularfuß, Kartenfuß, Tabellenzeile) */
.ih-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ih-space-2);
}
.ih-actions--end {
  justify-content: flex-end;
}

/* ============================================================ 5 Badges und Status */

/* Status-Badge: ok, warn, fail, info, neutral, special. Standard ist neutral. */
.ih-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--ih-radius);
  font-size: var(--ih-text-xs);
  font-weight: var(--ih-weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ih-neutral);
  background: var(--ih-neutral-soft);
}
.ih-badge--pill {
  border-radius: var(--ih-radius-pill);
}
.ih-badge--ok {
  color: var(--ih-ok);
  background: var(--ih-ok-soft);
}
.ih-badge--warn {
  color: var(--ih-warn);
  background: var(--ih-warn-soft);
}
.ih-badge--fail {
  color: var(--ih-fail);
  background: var(--ih-fail-soft);
}
.ih-badge--info {
  color: var(--ih-info);
  background: var(--ih-info-soft);
}
.ih-badge--special {
  color: var(--ih-special);
  background: var(--ih-special-soft);
}
.ih-badge--primary {
  color: var(--ih-primary);
  background: var(--ih-primary-soft);
}
.ih-badge--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
}
/* Punkt vor dem Text */
.ih-badge--dot::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}

/* Reiner Textstatus ohne Hintergrund, z. B. Verdict in einer Tabellenzelle */
.ih-status {
  font-weight: var(--ih-weight-semibold);
}
.ih-status--ok {
  color: var(--ih-ok);
}
.ih-status--warn {
  color: var(--ih-warn);
}
.ih-status--fail {
  color: var(--ih-fail);
}
.ih-status--info {
  color: var(--ih-info);
}
.ih-status--special {
  color: var(--ih-special);
}
.ih-status--neutral {
  color: var(--ih-fg-muted);
}

/* ============================================================ 6 Tabellen */

.ih-table-wrap {
  overflow-x: auto;
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  background: var(--ih-surface);
}
.ih-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ih-surface);
  font-size: var(--ih-text-sm);
}
.ih-table th,
.ih-table td {
  padding: var(--ih-space-2) var(--ih-space-3);
  border-bottom: var(--ih-border-width) solid var(--ih-border);
  text-align: left;
  vertical-align: top;
}
.ih-table thead th {
  font-size: var(--ih-text-xs);
  font-weight: var(--ih-weight-medium);
  color: var(--ih-fg-subtle);
  background: var(--ih-bg-subtle);
  white-space: nowrap;
}
.ih-table tbody tr:last-child td {
  border-bottom: 0;
}
.ih-table tbody tr:hover td {
  background: var(--ih-surface-hover);
}
.ih-table--compact th,
.ih-table--compact td {
  padding: var(--ih-space-1) var(--ih-space-2);
}
.ih-table--plain {
  background: transparent;
}
.ih-table--plain thead th {
  background: transparent;
}
.ih-table .ih-num,
.ih-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ih-nw {
  white-space: nowrap;
}
.ih-table__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--ih-text-xs);
  color: var(--ih-fg-muted);
}
.ih-table .ih-row--muted td {
  color: var(--ih-fg-muted);
}
.ih-table .ih-row--fail td {
  color: var(--ih-fail);
}
.ih-table .ih-row--selected td {
  background: var(--ih-primary-soft);
}
.ih-table__actions {
  text-align: right;
  white-space: nowrap;
}
.ih-table th[aria-sort] {
  cursor: pointer;
}
.ih-table th[aria-sort="ascending"]::after {
  content: " ↑";
}
.ih-table th[aria-sort="descending"]::after {
  content: " ↓";
}

/* Werkzeugleiste über einer Tabelle: Suche links, Filter und Aktionen rechts */
.ih-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ih-space-2);
}
.ih-toolbar__search {
  flex: 1 1 16rem;
  max-width: 24rem;
}
.ih-toolbar__spacer {
  flex: 1 1 auto;
}

/* Fakten als Definitionsliste (Detailseite) */
.ih-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--ih-space-2) var(--ih-space-6);
  margin: 0;
}
.ih-facts dt {
  color: var(--ih-fg-muted);
  font-weight: var(--ih-weight-medium);
}
.ih-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .ih-facts {
    grid-template-columns: 1fr;
    gap: var(--ih-space-1);
  }
  .ih-facts dd {
    margin-bottom: var(--ih-space-2);
  }
}

/* Seitennummerierung unter der Tabelle */
.ih-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ih-space-2);
  color: var(--ih-fg-muted);
  font-size: var(--ih-text-xs);
}

/* ============================================================ 7 Formulare */

.ih-form {
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-5);
}
.ih-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--ih-space-3);
}
.ih-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--ih-space-4);
}
.ih-form-grid > .ih-field--wide {
  grid-column: 1 / -1;
}

.ih-field {
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-1);
  min-width: 0;
}
.ih-label {
  font-size: var(--ih-text-sm);
  font-weight: var(--ih-weight-medium);
  color: var(--ih-fg);
}
.ih-label__optional {
  font-weight: var(--ih-weight-normal);
  color: var(--ih-fg-subtle);
}
.ih-hint {
  font-size: var(--ih-text-xs);
  color: var(--ih-fg-muted);
}
.ih-error {
  font-size: var(--ih-text-xs);
  font-weight: var(--ih-weight-medium);
  color: var(--ih-fail);
}

.ih-input,
.ih-select,
.ih-textarea {
  display: block;
  width: 100%;
  height: var(--ih-control-height);
  padding: 0 var(--ih-space-3);
  margin: 0;
  border: var(--ih-border-width) solid var(--ih-border-strong);
  border-radius: var(--ih-radius);
  background: var(--ih-surface);
  color: var(--ih-fg);
  font: inherit;
  font-size: var(--ih-text-sm);
  line-height: 1.4;
  transition: border-color var(--ih-duration) var(--ih-ease), box-shadow var(--ih-duration) var(--ih-ease);
}
.ih-input::placeholder,
.ih-textarea::placeholder {
  color: var(--ih-fg-subtle);
}
.ih-input:hover,
.ih-select:hover,
.ih-textarea:hover {
  border-color: var(--ih-fg-subtle);
}
.ih-input:focus,
.ih-select:focus,
.ih-textarea:focus {
  outline: none;
  border-color: var(--ih-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ih-ring) 25%, transparent);
}
.ih-input:disabled,
.ih-select:disabled,
.ih-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--ih-bg-subtle);
}
.ih-input[readonly] {
  background: var(--ih-bg-subtle);
}
.ih-input--sm {
  height: var(--ih-control-height-sm);
  font-size: var(--ih-text-xs);
}
.ih-textarea {
  height: auto;
  min-height: 5.5rem;
  padding: var(--ih-space-2) var(--ih-space-3);
  resize: vertical;
}
.ih-textarea--code {
  font-family: var(--ih-font-mono);
  font-size: var(--ih-text-xs);
  line-height: 1.6;
  white-space: pre;
}
.ih-select {
  padding-right: var(--ih-space-8);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8494' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--ih-space-3) center;
}
.ih-select[multiple] {
  height: auto;
  padding: var(--ih-space-2);
  background-image: none;
}
.ih-field--invalid .ih-input,
.ih-field--invalid .ih-select,
.ih-field--invalid .ih-textarea,
.ih-input[aria-invalid="true"],
.ih-select[aria-invalid="true"],
.ih-textarea[aria-invalid="true"] {
  border-color: var(--ih-fail);
}
.ih-field--invalid .ih-input:focus,
.ih-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ih-fail) 25%, transparent);
}

/* Checkbox und Radio: Label umschließt Eingabe */
.ih-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ih-space-2);
  font-size: var(--ih-text-sm);
  cursor: pointer;
}
.ih-check input {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0.2rem 0 0;
  accent-color: var(--ih-primary);
  cursor: pointer;
}
.ih-check .ih-hint {
  display: block;
}
.ih-check--disabled,
.ih-check:has(input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}
.ih-check-group {
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-2);
}
.ih-check-group--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ih-space-4);
}

/* Schalter: <label class="ih-switch"><input type="checkbox" role="switch"><span class="ih-switch__track"></span> Text</label> */
.ih-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--ih-space-2);
  cursor: pointer;
}
.ih-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ih-switch__track {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: var(--ih-radius-pill);
  background: var(--ih-border-strong);
  transition: background var(--ih-duration) var(--ih-ease);
}
.ih-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ih-surface);
  box-shadow: var(--ih-shadow-sm);
  transition: transform var(--ih-duration) var(--ih-ease);
}
.ih-switch input:checked + .ih-switch__track {
  background: var(--ih-primary);
}
.ih-switch input:checked + .ih-switch__track::after {
  transform: translateX(1rem);
}
.ih-switch input:focus-visible + .ih-switch__track {
  outline: 2px solid var(--ih-ring);
  outline-offset: 2px;
}

/* Feldgruppe */
.ih-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-4);
  margin: 0;
  padding: var(--ih-space-5);
  min-width: 0;
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  background: var(--ih-surface);
}
.ih-fieldset > .ih-legend {
  float: left; /* legend aus dem Rahmen holen, damit flex greift */
  width: 100%;
  margin: 0 0 var(--ih-space-1);
  padding: 0;
  font-size: var(--ih-text-md);
  font-weight: var(--ih-weight-semibold);
}
.ih-fieldset > .ih-legend + * {
  clear: both;
}
.ih-fieldset__hint {
  margin: calc(-1 * var(--ih-space-3)) 0 0;
  font-size: var(--ih-text-xs);
  color: var(--ih-fg-muted);
}
.ih-fieldset:disabled {
  opacity: 0.6;
}

/* Gesperrtes Feld (nur für Admins änderbar o. ä.) */
.ih-locked {
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-1);
  padding: var(--ih-space-3);
  border: var(--ih-border-width) dashed var(--ih-border-strong);
  border-radius: var(--ih-radius);
  background: var(--ih-bg-subtle);
  color: var(--ih-fg-muted);
}

/* Fehlerliste über dem Formular */
.ih-field-errors {
  margin: 0;
  padding: var(--ih-space-3) var(--ih-space-4);
  list-style: none;
  border-left: 3px solid var(--ih-fail);
  border-radius: var(--ih-radius);
  background: var(--ih-fail-soft);
  color: var(--ih-fail);
}
.ih-field-errors li + li {
  margin-top: var(--ih-space-1);
}

/* Formularfuß */
.ih-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ih-space-2);
  padding-top: var(--ih-space-4);
  border-top: var(--ih-border-width) solid var(--ih-border);
}
.ih-form__footer .ih-muted {
  margin-right: auto;
}

/* Eingabe mit Anhängsel (Suchfeld mit Symbol, Einheit) */
.ih-input-group {
  display: flex;
  align-items: stretch;
}
.ih-input-group > .ih-input {
  border-radius: 0;
}
.ih-input-group > :first-child {
  border-top-left-radius: var(--ih-radius);
  border-bottom-left-radius: var(--ih-radius);
}
.ih-input-group > :last-child {
  border-top-right-radius: var(--ih-radius);
  border-bottom-right-radius: var(--ih-radius);
}
.ih-input-group > .ih-input + .ih-btn,
.ih-input-group > .ih-input + .ih-input-group__addon {
  margin-left: -1px;
}
.ih-input-group__addon {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--ih-space-3);
  border: var(--ih-border-width) solid var(--ih-border-strong);
  background: var(--ih-bg-subtle);
  color: var(--ih-fg-muted);
  font-size: var(--ih-text-sm);
  white-space: nowrap;
}

/* Fertiger Codekasten zum Kopieren (Snippet) */
.ih-snippet {
  position: relative;
}
.ih-snippet .ih-btn {
  position: absolute;
  top: var(--ih-space-2);
  right: var(--ih-space-2);
}

/* ============================================================ 8 Karten und Kennzahlen */

.ih-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--ih-surface);
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  box-shadow: var(--ih-shadow-sm);
}
.ih-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ih-space-2) var(--ih-space-4);
  padding: var(--ih-space-4) var(--ih-space-5) 0;
}
.ih-card__title {
  margin: 0;
  font-size: var(--ih-text-lg);
  font-weight: var(--ih-weight-semibold);
  line-height: var(--ih-leading-tight);
}
.ih-card__description {
  margin: var(--ih-space-1) 0 0;
  font-size: var(--ih-text-sm);
  color: var(--ih-fg-muted);
}
.ih-card__body {
  padding: var(--ih-space-4) var(--ih-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-4);
}
.ih-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ih-space-2);
  padding: var(--ih-space-3) var(--ih-space-5);
  border-top: var(--ih-border-width) solid var(--ih-border);
  background: var(--ih-bg-subtle);
  border-radius: 0 0 var(--ih-radius-lg) var(--ih-radius-lg);
}
.ih-card--flush .ih-card__body {
  padding: 0;
}
.ih-card--flush .ih-table-wrap {
  border: 0;
  border-radius: 0 0 var(--ih-radius-lg) var(--ih-radius-lg);
}
.ih-card--muted {
  background: var(--ih-bg-subtle);
  box-shadow: none;
}

/* Raster für Kacheln */
.ih-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--ih-space-3);
}
.ih-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--ih-space-4);
}

/* Kennzahl: Beschriftung, großer Wert, Zusatz */
.ih-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ih-space-3) var(--ih-space-4);
  background: var(--ih-surface);
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  color: inherit;
  text-decoration: none;
}
.ih-kpi__label {
  font-size: var(--ih-text-xs);
  font-weight: var(--ih-weight-medium);
  color: var(--ih-fg-muted);
}
.ih-kpi__value {
  font-size: var(--ih-text-2xl);
  font-weight: var(--ih-weight-semibold);
  line-height: var(--ih-leading-tight);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ih-kpi__sub {
  font-size: var(--ih-text-xs);
  color: var(--ih-fg-muted);
}
/* Statuskachel: farbiger linker Rand, klickbar als Filter */
.ih-kpi--ok {
  border-left: 4px solid var(--ih-ok);
}
.ih-kpi--warn {
  border-left: 4px solid var(--ih-warn);
}
.ih-kpi--fail {
  border-left: 4px solid var(--ih-fail);
}
.ih-kpi--info {
  border-left: 4px solid var(--ih-info);
}
.ih-kpi--special {
  border-left: 4px solid var(--ih-special);
}
.ih-kpi--neutral {
  border-left: 4px solid var(--ih-border-strong);
}
a.ih-kpi:hover {
  background: var(--ih-surface-hover);
}
.ih-kpi.is-active {
  outline: 2px solid var(--ih-ring);
  outline-offset: 1px;
}

/* Farbpunkt für Legenden */
.ih-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.35em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.ih-dot--1 { color: var(--ih-chart-1); }
.ih-dot--2 { color: var(--ih-chart-2); }
.ih-dot--3 { color: var(--ih-chart-3); }
.ih-dot--4 { color: var(--ih-chart-4); }
.ih-dot--5 { color: var(--ih-chart-5); }

/* ============================================================ 9 Hinweise, Leerzustand, Toast */

.ih-alert {
  display: flex;
  gap: var(--ih-space-3);
  padding: var(--ih-space-3) var(--ih-space-4);
  border: var(--ih-border-width) solid transparent;
  border-left-width: 3px;
  border-radius: var(--ih-radius);
  font-size: var(--ih-text-sm);
  color: var(--ih-info);
  background: var(--ih-info-soft);
  border-left-color: var(--ih-info);
}
.ih-alert__body {
  min-width: 0;
  flex: 1 1 auto;
}
.ih-alert__title {
  display: block;
  font-weight: var(--ih-weight-semibold);
  margin-bottom: 2px;
}
.ih-alert svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 1px;
}
.ih-alert--ok {
  color: var(--ih-ok);
  background: var(--ih-ok-soft);
  border-left-color: var(--ih-ok);
}
.ih-alert--warn {
  color: var(--ih-warn);
  background: var(--ih-warn-soft);
  border-left-color: var(--ih-warn);
}
.ih-alert--fail {
  color: var(--ih-fail);
  background: var(--ih-fail-soft);
  border-left-color: var(--ih-fail);
}
.ih-alert a {
  color: inherit;
}

/* Leerzustand */
.ih-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ih-space-2);
  padding: var(--ih-space-10) var(--ih-space-6);
  text-align: center;
  border: var(--ih-border-width) dashed var(--ih-border-strong);
  border-radius: var(--ih-radius-lg);
  color: var(--ih-fg-muted);
}
.ih-empty svg {
  width: 2rem;
  height: 2rem;
  color: var(--ih-fg-subtle);
}
.ih-empty__title {
  margin: 0;
  font-size: var(--ih-text-md);
  font-weight: var(--ih-weight-semibold);
  color: var(--ih-fg);
}
.ih-empty__text {
  margin: 0;
  max-width: 32rem;
}
.ih-empty__actions {
  display: flex;
  gap: var(--ih-space-2);
  margin-top: var(--ih-space-2);
}

/* Toasts: feste Region unten rechts; innohub.js füllt sie, oder die App rendert sie serverseitig */
.ih-toaster {
  position: fixed;
  right: var(--ih-space-4);
  bottom: var(--ih-space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-2);
  width: min(22rem, calc(100vw - 2 * var(--ih-space-4)));
  pointer-events: none;
}
.ih-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ih-space-3);
  padding: var(--ih-space-3) var(--ih-space-4);
  border: var(--ih-border-width) solid var(--ih-border);
  border-left: 3px solid var(--ih-info);
  border-radius: var(--ih-radius-lg);
  background: var(--ih-surface);
  color: var(--ih-fg);
  box-shadow: var(--ih-shadow-lg);
  font-size: var(--ih-text-sm);
  pointer-events: auto;
  animation: ih-toast-in var(--ih-duration) var(--ih-ease);
}
.ih-toast--ok {
  border-left-color: var(--ih-ok);
}
.ih-toast--warn {
  border-left-color: var(--ih-warn);
}
.ih-toast--fail {
  border-left-color: var(--ih-fail);
}
.ih-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}
.ih-toast__title {
  display: block;
  font-weight: var(--ih-weight-semibold);
}
.ih-toast__close {
  flex: none;
  margin: -0.25rem -0.5rem -0.25rem 0;
}
.ih-toast.is-leaving {
  animation: ih-toast-out var(--ih-duration) var(--ih-ease) forwards;
}
@keyframes ih-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}
@keyframes ih-toast-out {
  to {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

/* ============================================================ 10 Tabs, Pills, Details, Fortschritt, Dialog */

/* Reiter: <nav class="ih-tabs"><a class="ih-tabs__tab" aria-current="page">…</a></nav> */
.ih-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ih-space-1);
  border-bottom: var(--ih-border-width) solid var(--ih-border);
}
.ih-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ih-space-2);
  padding: var(--ih-space-2) var(--ih-space-3);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ih-fg-muted);
  font: inherit;
  font-weight: var(--ih-weight-medium);
  text-decoration: none;
  cursor: pointer;
}
.ih-tabs__tab:hover {
  color: var(--ih-fg);
}
.ih-tabs__tab[aria-current="page"],
.ih-tabs__tab[aria-selected="true"],
.ih-tabs__tab.is-active {
  color: var(--ih-primary);
  border-bottom-color: var(--ih-primary);
}

/* Pill-Navigation (Filter, Projekte) */
.ih-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ih-space-1);
}
.ih-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ih-space-1);
  padding: 0.25rem var(--ih-space-3);
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-pill);
  background: var(--ih-surface);
  color: var(--ih-fg-muted);
  font: inherit;
  font-size: var(--ih-text-sm);
  text-decoration: none;
  cursor: pointer;
}
.ih-pills__pill:hover {
  color: var(--ih-fg);
  border-color: var(--ih-border-strong);
}
.ih-pills__pill[aria-current="page"],
.ih-pills__pill[aria-pressed="true"],
.ih-pills__pill.is-active {
  background: var(--ih-primary);
  border-color: var(--ih-primary);
  color: var(--ih-primary-fg);
  font-weight: var(--ih-weight-medium);
}

/* Aufklappbarer Abschnitt */
.ih-details {
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  background: var(--ih-surface);
}
.ih-details > summary {
  display: flex;
  align-items: center;
  gap: var(--ih-space-2);
  padding: var(--ih-space-3) var(--ih-space-4);
  list-style: none;
  font-weight: var(--ih-weight-semibold);
  cursor: pointer;
  border-radius: var(--ih-radius-lg);
}
.ih-details > summary::-webkit-details-marker {
  display: none;
}
.ih-details > summary::after {
  content: "";
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--ih-fg-subtle);
  border-bottom: 2px solid var(--ih-fg-subtle);
  transform: rotate(45deg);
  transition: transform var(--ih-duration) var(--ih-ease);
}
.ih-details[open] > summary::after {
  transform: rotate(-135deg);
}
.ih-details[open] > summary {
  border-bottom: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg) var(--ih-radius-lg) 0 0;
}
.ih-details__body {
  padding: var(--ih-space-4);
}

/* Fortschrittsbalken */
.ih-progress {
  display: block;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--ih-radius-pill);
  background: var(--ih-neutral-soft);
}
.ih-progress__bar {
  display: block;
  height: 100%;
  border-radius: var(--ih-radius-pill);
  background: var(--ih-primary);
  transition: width 300ms var(--ih-ease);
}
.ih-progress__bar--ok {
  background: var(--ih-ok);
}
.ih-progress__bar--warn {
  background: var(--ih-warn);
}
.ih-progress__bar--fail {
  background: var(--ih-fail);
}
/* Mehrteilig: <span class="ih-progress"><span class="ih-progress__bar ih-progress__bar--ok" style="width:60%"></span>…</span> */
.ih-progress--stacked {
  display: flex;
}
.ih-progress--stacked .ih-progress__bar {
  border-radius: 0;
}

/* Trennlinie */
.ih-divider {
  border: 0;
  border-top: var(--ih-border-width) solid var(--ih-border);
  margin: 0;
}

/* Natives <dialog class="ih-dialog"> */
.ih-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 0;
  border: var(--ih-border-width) solid var(--ih-border);
  border-radius: var(--ih-radius-lg);
  background: var(--ih-surface);
  color: var(--ih-fg);
  box-shadow: var(--ih-shadow-lg);
  font-family: var(--ih-font-sans);
  font-size: var(--ih-text-sm);
}
.ih-dialog::backdrop {
  background: var(--ih-overlay);
}
.ih-dialog--wide {
  width: min(48rem, calc(100vw - 2rem));
}
.ih-dialog__header {
  padding: var(--ih-space-5) var(--ih-space-5) 0;
}
.ih-dialog__title {
  margin: 0;
  font-size: var(--ih-text-lg);
  font-weight: var(--ih-weight-semibold);
}
.ih-dialog__description {
  margin: var(--ih-space-1) 0 0;
  color: var(--ih-fg-muted);
}
.ih-dialog__body {
  padding: var(--ih-space-4) var(--ih-space-5);
}
.ih-dialog__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--ih-space-2);
  padding: var(--ih-space-3) var(--ih-space-5);
  border-top: var(--ih-border-width) solid var(--ih-border);
  background: var(--ih-bg-subtle);
  border-radius: 0 0 var(--ih-radius-lg) var(--ih-radius-lg);
}

/* Platzhalter beim Laden */
.ih-skeleton {
  display: block;
  height: 1em;
  border-radius: var(--ih-radius-sm);
  background: linear-gradient(90deg, var(--ih-neutral-soft) 25%, var(--ih-surface-hover) 50%, var(--ih-neutral-soft) 75%);
  background-size: 200% 100%;
  animation: ih-shimmer 1.4s linear infinite;
}
@keyframes ih-shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Avatar mit Initialen */
.ih-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ih-primary-soft);
  color: var(--ih-primary);
  font-size: var(--ih-text-xs);
  font-weight: var(--ih-weight-semibold);
  text-transform: uppercase;
}

/* ============================================================ 11 Hilfsklassen */

.ih-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ih-space-4);
}
.ih-stack--sm {
  gap: var(--ih-space-2);
}
.ih-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ih-space-3);
}
.ih-row--between {
  justify-content: space-between;
}
.ih-grow {
  flex: 1 1 auto;
}
.ih-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ih-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ih-hidden {
  display: none !important;
}
@media (max-width: 600px) {
  .ih-hide-mobile {
    display: none !important;
  }
}
@media print {
  .ih-sidebar,
  .ih-header,
  .ih-toaster,
  .ih-page__actions {
    display: none !important;
  }
  .ih-shell {
    grid-template-columns: 1fr;
  }
}