/* Basis --------------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: var(--text-body);
  color: var(--color-foreground);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure { margin: 0; }
/* Hover-Hintergründe stehen in @media (hover: hover): Auf einem Touch-Gerät bliebe der
   Hover-Zustand nach dem Antippen hängen, z. B. eine grau hinterlegte Zeile. Ausgenommen
   sind Hover-Regeln, die etwas erst sichtbar machen (Aktionen, Löschen) – die braucht man
   auch beim Tippen. */
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--color-secondary); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

[hidden] { display: none !important; }

.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;
}
.icon { width: 16px; height: 16px; flex: none; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* App-Gerüst ---------------------------------------------------------------*/
.app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100dvh; }

.sidebar {
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding: var(--space-xl) var(--space-lg);
  /* Durchscheinendes Material statt undurchsichtiger Streifen: Der Inhalt läuft
     sichtbar darunter durch, das gibt Tiefe ohne zusätzliche Linien. */
  background: rgba(252, 252, 253, .72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(0, 0, 0, .06);
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.sidebar__brand { display: flex; align-items: center; gap: var(--space-md); padding: 0 var(--space-md) var(--space-md); }
.sidebar__mark {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--color-primary); color: var(--color-on-primary);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
}
.sidebar__title { font: var(--text-section); font-weight: 600; }
.sidebar__group { display: flex; flex-direction: column; gap: var(--space-xs); }
.sidebar__nav { display: flex; flex-direction: column; flex: 1; gap: var(--space-lg); }
.sidebar__group--foot { margin-top: auto; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.sidebar__grouplabel {
  font: var(--text-label); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-muted-foreground); padding: var(--space-md) var(--space-md) var(--space-sm);
}
.navlink {
  display: flex; align-items: center; gap: var(--space-md);
  min-height: var(--control-height); padding: 0 var(--space-md);
  border-radius: var(--radius-sm); text-decoration: none;
  /* Etwas kleiner als der Fließtext: Die Navigation ist Rahmen, nicht Inhalt –
     so bleiben auch lange Punkte wie „Änderungen & Konflikte“ einzeilig. */
  color: var(--color-foreground); font-weight: 500; font-size: 14px;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
@media (hover: hover) { .navlink:hover { background: var(--color-muted); } }
.navlink[aria-current="page"] { background: rgba(10, 108, 255, .10); color: #0a5bd6; }
.navlink__icon { color: var(--color-muted-foreground); }
.navlink[aria-current="page"] .navlink__icon { color: currentColor; }
.navlink--disabled { color: var(--color-muted-foreground); cursor: not-allowed; opacity: 0.7; }

.sidebar__footer { margin-top: auto; border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.userchip { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); }
.userchip__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--color-muted); color: var(--color-muted-foreground);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.userchip__name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userchip__role { font: var(--text-label); color: var(--color-muted-foreground); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: var(--space-lg);
  min-height: var(--topbar-height); padding: var(--space-md) var(--space-2xl);
  flex: none;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: rgba(252, 252, 253, .72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  position: sticky; top: 0; z-index: 20;
}
/* Große Schrift wirkt zu weit gesetzt – enger laufen lassen. */
.topbar__title { font: var(--text-page); font-weight: 600; letter-spacing: -0.021em; }
.topbar__meta { font: var(--text-label); color: var(--color-muted-foreground); margin-top: 2px; }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-md); }
/* Reiterleiste: mehrere Ansichten gleichzeitig offen (app/js/lib/tabs.js).
   Sie klebt unter der Topbar und erscheint erst ab dem zweiten Reiter. */
.tabbar {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-2xl);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: rgba(252, 252, 253, .72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  position: sticky; top: var(--topbar-height); z-index: 19;
}
.tabbar__list { display: flex; align-items: center; gap: var(--space-xs); overflow-x: auto; scrollbar-width: thin; }
.tabbar__tab {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 5px 8px 5px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-muted-foreground);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease),
              transform var(--motion-fast) var(--ease-press);
  position: relative;
}
@media (hover: hover) { .tabbar__tab:hover { background: rgba(0, 0, 0, .04); color: var(--color-foreground); } }
.tabbar__tab:active { transform: scale(0.97); }
.tabbar__tab.is-active {
  background: var(--color-card); color: var(--color-foreground);
  box-shadow: 0 1px 2px rgba(16, 18, 27, .10), 0 0 0 1px rgba(16, 18, 27, .05);
}
.tabbar__label { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tabbar__tab.is-dragging { opacity: .4; }
/* Einfügemarke beim Ziehen */
.tabbar__tab.is-dropbefore::before, .tabbar__tab.is-dropafter::after {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: 2px;
  background: var(--color-primary); border-radius: 1px;
}
.tabbar__tab.is-dropbefore::before { left: -3px; }
.tabbar__tab.is-dropafter::after { right: -3px; }
.tabbar__close {
  display: grid; place-items: center; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: .55;
}
@media (hover: hover) { .tabbar__close:hover { background: rgba(0, 0, 0, .08); opacity: 1; } }
/* Menü am Reiter (Rechtsklick): „In neuem Fenster öffnen" / „Schließen" */
.tabmenu {
  position: fixed; z-index: 60; min-width: 220px; padding: 4px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  animation: pop-in var(--motion-fast) var(--ease);
}
.tabmenu__item {
  display: block; width: 100%; text-align: left; padding: 7px 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  font: inherit; font-size: 13px; color: var(--color-foreground); cursor: pointer;
}
@media (hover: hover) { .tabmenu__item:hover:not(:disabled) { background: var(--color-muted); } }
.tabmenu__item:disabled { color: var(--color-muted-foreground); cursor: default; }
.tabmenu__hint { padding: 2px 10px 6px; font: var(--text-label); color: var(--color-muted-foreground); }

.tabbar__new {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-muted-foreground); cursor: pointer;
}
@media (hover: hover) { .tabbar__new:hover { background: rgba(0, 0, 0, .04); color: var(--color-foreground); } }

.content {
  padding: var(--space-xl) var(--space-2xl) var(--space-3xl);
  display: flex; flex-direction: column; gap: var(--space-xl);
  min-width: 0; width: 100%; max-width: var(--content-max);
}


/* Schaltflächen ------------------------------------------------------------*/
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-md);
  min-height: var(--control-height); padding: 0 var(--space-lg);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-card); color: var(--color-foreground);
  font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease),
              color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--color-muted); } }
/* Antwort auf den Druck, nicht erst auf das Loslassen. */
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); box-shadow: 0 1px 2px rgba(16, 18, 27, .16); }
@media (hover: hover) { .btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } }
.btn--danger { color: var(--color-destructive); border-color: var(--color-border-strong); }
@media (hover: hover) { .btn--danger:hover:not(:disabled) { background: var(--color-destructive-soft); border-color: var(--color-destructive); } }
.btn--ghost { border-color: transparent; background: transparent; }
@media (hover: hover) { .btn--ghost:hover:not(:disabled) { background: var(--color-muted); } }
.btn--icon { padding: 0; width: var(--control-height); }
.btn--sm { min-height: 28px; padding: 0 var(--space-lg); font-size: 13px; border-radius: 999px; }
.btn--pill { border-radius: 999px; }
@media (pointer: coarse) { .btn--sm { min-height: 36px; } }

/* Formulare ----------------------------------------------------------------*/
.field { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.field__label {
  font: var(--text-label); font-weight: 500; color: var(--color-muted-foreground);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0;
}
.field__label .req { color: var(--color-destructive); }
.field__hint { font: var(--text-label); color: var(--color-muted-foreground); display: flex; align-items: center; gap: var(--space-sm); }
.field__error { font: var(--text-label); color: var(--color-destructive); font-weight: 500; }

.input, .select, .textarea {
  min-height: var(--control-height); width: 100%;
  padding: 0 var(--space-lg); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-card);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.textarea { padding: var(--space-md) var(--space-lg); min-height: 72px; resize: vertical; line-height: 20px; }
@media (hover: hover) { .input:hover:not(:disabled), .select:hover:not(:disabled), .textarea:hover:not(:disabled) { border-color: var(--color-muted-foreground); } }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { box-shadow: 0 0 0 4px rgba(10, 108, 255, .14); }
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--color-muted); color: var(--color-muted-foreground);
  cursor: not-allowed; opacity: 0.6;
}
/* Nur lesbar: Wert als Text, kein graues Eingabefeld */
.readonly {
  margin: 0; min-height: var(--control-height); display: flex; align-items: center;
  padding: var(--space-sm) 0; font-size: 14px; border-bottom: 1px solid var(--color-border);
  white-space: pre-wrap;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--color-destructive); }
.select {
  appearance: none; padding-right: var(--space-3xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--space-lg) center;
}
.checkbox { display: flex; align-items: center; gap: var(--space-md); min-height: var(--control-height); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.searchfield { position: relative; flex: 1 1 260px; max-width: 360px; }
.searchfield .icon { position: absolute; left: var(--space-lg); top: 50%; transform: translateY(-50%); color: var(--color-muted-foreground); pointer-events: none; }
.searchfield .input { padding-left: calc(var(--space-lg) * 2 + 16px); }

.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-lg); }
.formgrid--wide { grid-column: 1 / -1; }

.errorsummary {
  border: 1px solid var(--color-destructive); background: var(--color-destructive-soft);
  border-radius: var(--radius-md); padding: var(--space-lg); display: flex; gap: var(--space-md);
}
.errorsummary h3 { font: var(--text-section); font-weight: 600; color: var(--color-destructive); }
.errorsummary ul { margin: var(--space-sm) 0 0; padding-left: var(--space-xl); font-size: 13px; }
.errorsummary a { color: var(--color-destructive); }

/* Karten, Tabellen ---------------------------------------------------------*/
.card { background: var(--color-card); border: 1px solid rgba(0, 0, 0, .06); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.card__header { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--color-border); }
.card--plain { border: 0; background: transparent; }
.card__title { font: var(--text-section); font-weight: 600; }
.card__body { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }

.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-lg); }
.toolbar .field { flex: 0 1 180px; }
.toolbar__spacer { flex: 1 1 auto; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border-radius: 999px;
  background: var(--color-muted); font: var(--text-label); font-weight: 500;
}
.chip button { border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--color-muted-foreground); }
.chip button:hover { color: var(--color-foreground); }

.tablewrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font: var(--text-cell); }
.table th, .table td {
  text-align: left; padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border); vertical-align: middle;
}
/* Firmen- und Codespalten nicht umbrechen – sonst werden Zeilen unterschiedlich hoch */
.table td.ellipsis { max-width: var(--cell-max); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--color-muted);
  padding-top: var(--space-md); padding-bottom: var(--space-md);
  font: var(--text-label); font-weight: 500; letter-spacing: 0.02em;
  color: var(--color-muted-foreground); white-space: nowrap;
}
.table thead th button {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
}
.table thead th button:hover { color: var(--color-foreground); }
.table tbody tr { cursor: pointer; transition: background var(--motion-fast) var(--ease); }
@media (hover: hover) { .table tbody tr:hover { background: var(--color-muted); } }
.table tbody tr[aria-selected="true"] { background: rgba(10, 108, 255, .07); box-shadow: inset 3px 0 0 var(--color-secondary); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-strong { font-size: 13px; font-weight: 600; }
.table .cell-sub { font: var(--text-label); color: var(--color-muted-foreground); }

.thumb {
  width: 32px; height: 32px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--color-muted); border: 1px solid var(--color-border);
}
.thumb--empty { display: grid; place-items: center; color: var(--color-border-strong); }
.thumb--lg { width: 56px; height: 56px; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md); border-radius: 999px;
  font: var(--text-label); font-weight: 600; border: 1px solid transparent;
}
.badge--accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: #a7f3d0; }
.badge--muted { background: var(--color-muted); color: var(--color-muted-foreground); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); border-color: #fde68a; }

.pagination { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg) var(--space-xl); border-top: 1px solid var(--color-border); }
.pagination__info { font: var(--text-label); color: var(--color-muted-foreground); }
.pagination__nav { margin-left: auto; display: flex; gap: var(--space-md); }

/* Zustände -----------------------------------------------------------------*/
.skeleton { background: linear-gradient(90deg, var(--color-muted), #e9edf2, var(--color-muted)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: var(--radius-sm); height: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.emptystate { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); padding: var(--space-3xl) var(--space-xl); text-align: center; }
.emptystate__icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-muted); color: var(--color-muted-foreground); display: grid; place-items: center; }
.emptystate__title { font: var(--text-section); font-weight: 600; }
.emptystate__text { font-size: 13px; color: var(--color-muted-foreground); max-width: 42ch; }

/* Aufklappbare Abschnitte --------------------------------------------------*/
.section { border-bottom: 1px solid var(--color-border); }
.section:first-of-type { border-top: 1px solid var(--color-border); }
.section__summary {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-lg) 0; cursor: pointer; list-style: none;
  transition: color var(--motion-fast) var(--ease);
}
.section__summary::-webkit-details-marker { display: none; }
.section__summary:hover { color: var(--color-muted-foreground); }
.section__summary:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.section__title {
  font: var(--text-label); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
/* „Maße“ würde zu „MASSE“ – das ist ein anderes Wort. Solche Titel stehen schon
   groß im Code und werden nicht noch einmal umgewandelt. */
.section__title--literal { text-transform: none; }
.section__meta { font: var(--text-label); color: var(--color-muted-foreground); margin-left: auto; }
.section__sign { margin-left: var(--space-md); width: 14px; height: 14px; position: relative; flex: none; }
.section__meta + .section__sign { margin-left: var(--space-lg); }
.section__sign::before, .section__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease);
}
.section__sign::before { inset: 6px 0 auto; height: 1px; }
.section__sign::after { inset: 0 6px auto; width: 1px; height: 13px; }
.section[open] .section__sign::after { transform: rotate(90deg); opacity: 0; }
/* Der Inhalt klappt in 200 ms auf und zu, statt zu springen. Browser, die das nicht
   können, klappen wie bisher sofort. Abgeschnitten wird nur in der Höhe, damit
   Fokusrahmen an den Seiten sichtbar bleiben. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .section { interpolate-size: allow-keywords; }
  .section::details-content {
    block-size: 0; overflow-x: visible; overflow-y: clip;
    transition: block-size 200ms var(--ease), content-visibility 200ms var(--ease) allow-discrete;
  }
  .section[open]::details-content { block-size: auto; }
}
.section__body { padding: 0 0 var(--space-xl); display: flex; flex-direction: column; gap: var(--space-lg); }
.section__summary:not(:only-child) ~ .section__body { }

/* Kennzahlen ---------------------------------------------------------------*/
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-lg); margin: 0; padding: var(--space-lg); background: var(--color-muted);
  border-radius: var(--radius-md);
}
.facts__item { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.facts__label {
  font: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--color-muted-foreground);
}
.facts__value { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }

/* Panel oder Dialog offen: der Hintergrund scrollt nicht mit (ui.js: lockScroll).
   Ohne das wandert die Liste unter dem Formular weg – man scrollt im Panel und
   verliert gleichzeitig die Stelle, an der man gerade war. */
/* Nur das Wurzelelement sperren, nicht body: body ist 100 % hoch, ein overflow:hidden
   dort würde den Inhalt abschneiden und die Seite auf Position 0 zurückwerfen. */
html.is-scrolllocked { overflow: hidden; }

/* Detail-Panel -------------------------------------------------------------*/
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.32); z-index: 40;
  animation: fade var(--motion-base) var(--ease);
}
.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%);
  background: var(--color-card); border-left: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 41;
  display: flex; flex-direction: column;
  animation: slide-in var(--motion-base) var(--ease-press);
}
/* Inhaltstausch im offenen Panel: Fläche und Hintergrund bleiben stehen, nur der neue
   Inhalt blendet kurz ein (ui.js: sheet, „swap“). */
.sheet.is-swap, .sheet-backdrop.is-swap { animation: none; }
.sheet.is-swap > * { animation: fade var(--motion-fast) var(--ease); }
/* Schließen: ein Stück zurück nach rechts und ausblenden, kürzer als das Öffnen. */
.sheet.is-leaving { animation: sheet-out var(--motion-exit) var(--ease-exit) forwards; pointer-events: none; }
.sheet-backdrop.is-leaving { animation: fade-out var(--motion-exit) var(--ease-exit) forwards; pointer-events: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sheet-out { to { transform: translateX(16px); opacity: 0; } }
/* Nichts erscheint aus dem Nichts: leicht verkleinert, leicht unscharf, dann scharf. */
@keyframes slide-in { from { transform: translateX(24px) scale(0.985); opacity: 0; filter: blur(3px); } }
.sheet__header { display: flex; align-items: start; gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-lg); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.sheet__title { font: var(--text-page); font-weight: 600; }
.sheet__sub { font: var(--text-label); color: var(--color-muted-foreground); margin-top: var(--space-xs); }
.sheet__body { padding: var(--space-xl); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-lg); flex: 1; }
/* Hinweis im Panel, z. B. wenn jemand anderes denselben Datensatz geändert hat */
.sheet__notice { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm); background: var(--color-muted); font-size: var(--text-sm); }
.sheet__notice .btn { margin-left: auto; white-space: nowrap; }
.sheet__footer {
  display: flex; gap: var(--space-md); padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: rgba(252, 252, 253, .86);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.sheet__footer .btn--danger { margin-left: auto; }
.stack { display: flex; flex-direction: column; gap: var(--space-lg); }
.fieldset { display: block; border: 0; padding: 0; margin: 0; }
.fieldset__legend {
  font: var(--text-label); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-muted-foreground); padding: 0 0 var(--space-sm); margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border); width: 100%; float: left;
}
.fieldset__legend + * { clear: both; }
.fieldset > .attrrow + .attrrow { margin-top: var(--space-md); }
.fieldset > .attrrow:last-of-type { margin-bottom: var(--space-lg); }

.attrrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--space-md); align-items: center; }
.imagefield { display: flex; gap: var(--space-lg); align-items: center; }
.imagefield__preview { width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--color-border); background: var(--color-muted); }

/* Dialog -------------------------------------------------------------------*/
.dialog { border: 0; border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); max-width: 420px; width: calc(100% - var(--space-3xl)); }
.dialog::backdrop { background: rgba(15, 23, 42, 0.32); }
/* Der Dialog wächst aus der Mitte, statt aufzuploppen, und blendet beim Schließen kürzer aus
   (ui.js: dismissDialog). */
.dialog[open] { animation: dialog-in 180ms var(--ease); }
.dialog[open]::backdrop { animation: fade 180ms var(--ease); }
.dialog.is-leaving { animation: dialog-out var(--motion-fast) var(--ease-exit) forwards; pointer-events: none; }
.dialog.is-leaving::backdrop { animation: fade-out var(--motion-fast) var(--ease-exit) forwards; }
@keyframes dialog-in { from { transform: scale(0.96); opacity: 0; } }
@keyframes dialog-out { to { transform: scale(0.98); opacity: 0; } }
.dialog__body { padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); }
.dialog__title { font: var(--text-section); font-weight: 600; }
.dialog__text { font-size: 13px; color: var(--color-muted-foreground); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-md); padding: 0 var(--space-2xl) var(--space-2xl); }

/* Toasts -------------------------------------------------------------------*/
.toasts { position: fixed; right: var(--space-xl); bottom: var(--space-xl); z-index: 60; display: flex; flex-direction: column; gap: var(--space-md); }
.toast {
  display: flex; align-items: start; gap: var(--space-md);
  background: var(--color-foreground); color: #fff; padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 13px; max-width: 360px;
  animation: toast-in 200ms var(--ease);
}
/* Toasts stehen unten rechts, also kommen sie von unten und gehen nach unten (ui.js: toast). */
.toast.is-leaving { animation: toast-out var(--motion-exit) var(--ease-exit) forwards; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(4px); opacity: 0; } }
.toast--error { background: var(--color-destructive); }
.toast--success { background: var(--color-accent); }

/* Login --------------------------------------------------------------------*/
.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-xl); }
.login__card { width: min(380px, 100%); background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-3xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.login__brand { display: flex; align-items: center; gap: var(--space-md); }
.login__title { font: var(--text-page); font-weight: 600; }
.login__hint { font: var(--text-label); color: var(--color-muted-foreground); }

/* Responsiv ----------------------------------------------------------------*/
.sidebar__close, .topbar__menu { display: none; }

@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 82vw); z-index: 50;
    transform: translateX(-100%); transition: transform var(--motion-base) var(--ease);
  }
  .app[data-nav="open"] .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  /* Der abgedunkelte Hintergrund blendet mit der Leiste ein und aus, statt zu springen. */
  .app::after {
    content: ""; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.32); z-index: 45;
    opacity: 0; pointer-events: none; transition: opacity var(--motion-base) var(--ease);
  }
  .app[data-nav="open"]::after { opacity: 1; pointer-events: auto; }
  .sidebar__close { display: inline-flex; margin-left: auto; }
  .topbar__menu { display: inline-flex; }
  .content { padding: var(--space-lg) var(--space-lg) var(--space-3xl); }
  .topbar { padding: var(--space-md) var(--space-lg); }
}

@media (max-width: 640px) {
  .sheet { width: 100%; border-left: 0; }
  .toolbar .field, .searchfield { flex: 1 1 100%; max-width: none; }
  .toasts { left: var(--space-lg); right: var(--space-lg); bottom: var(--space-lg); }
  .toast { max-width: none; }
}

/* Container der Ansicht – auch der eines Reiters: Er darf das Layout von .content
   nicht verändern, deshalb display: contents. Ausgeblendet wird er über [hidden]. */
.viewhost { display: contents; }

.checklist {
  display: flex; flex-direction: column; gap: var(--space-xs);
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
}

.cell-inline { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.cell-inline .cell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-inline .badge { flex: none; }

.plainlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.plainlist li { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.plainlist li:first-child { border-top: 1px solid var(--color-border); }

.swatch { border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); flex: none; }
.swatch--empty { background: repeating-linear-gradient(45deg, #fff, #fff 4px, var(--color-muted) 4px, var(--color-muted) 8px); }
.swatch--large { width: 72px; height: 72px; border-radius: var(--radius-md); }
.formgrid--cmyk { grid-template-columns: repeat(4, minmax(60px, 1fr)); }

/* Schaltflächen in Abschnitten behalten ihre natürliche Breite */
.section__body > .btn, .fieldset > .btn { align-self: flex-start; }

.attrrow--category { grid-template-columns: minmax(0, 1fr) 110px 84px auto; }
.attrrow__usage { white-space: nowrap; }

/* Arbeitsbereich Materialliste ---------------------------------------------*/
.workspace { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.library { position: sticky; top: calc(var(--topbar-height) + var(--space-xl)); max-height: calc(100dvh - var(--topbar-height) - var(--space-3xl)); display: flex; flex-direction: column; }
.library .card__body { gap: var(--space-md); }
.library__list { overflow-y: auto; border-top: 1px solid var(--color-border); }
.library__item {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border);
  cursor: grab; background: var(--color-card);
  transition: background var(--motion-fast) var(--ease);
}
@media (hover: hover) { .library__item:hover { background: var(--color-muted); } }
.library__item.is-dragging { opacity: 0.5; }
.library__item:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.library__item .thumb { width: 24px; height: 24px; }
.library__item > div { flex: 1; }
.library__title { margin: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library__meta { margin: 0; font: var(--text-label); color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bom.is-dropzone { outline: 2px dashed var(--color-primary); outline-offset: -2px; }
.bom__drophint { display: none; margin: 0; padding: var(--space-lg); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); text-align: center; font: var(--text-label); color: var(--color-muted-foreground); }
.bom.is-dropzone .bom__drophint { display: block; border-color: var(--color-primary); color: var(--color-foreground); }
.bom table .input, .bom table .select { min-height: 30px; padding: 0 var(--space-md); font-size: 13px; }

@media (max-width: 1023px) {
  .workspace { grid-template-columns: 1fr; }
  .library { position: static; max-height: 320px; }
}

/* BOM-Import ---------------------------------------------------------------*/
.sheet--wide { width: min(1120px, 100%); }
.import-step { display: flex; flex-direction: column; gap: var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.import-step:first-of-type { border-top: 0; padding-top: 0; }
.formgrid--mapping { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.table--compact td, .table--compact th { padding: var(--space-sm) var(--space-md); }
.table--compact .select { min-height: 30px; font-size: 13px; }
.table--compact .badge { margin-top: var(--space-xs); }
.table tbody tr.is-muted td { color: var(--color-muted-foreground); }
.table tbody tr.is-muted .cell-strong { font-weight: 500; }

/* In senkrechten Spalten wirkt flex-basis als Höhe – Suchfeld dort nicht strecken */
.library .searchfield, .card__body > .searchfield { flex: none; max-width: none; }

/* Konto-Zugang in der Seitenleiste */
.userchip__account {
  display: flex; align-items: center; gap: var(--space-md); flex: 1; min-width: 0;
  background: none; border: 0; padding: var(--space-sm); margin: calc(-1 * var(--space-sm));
  border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: inherit;
  transition: background var(--motion-fast) var(--ease);
}
@media (hover: hover) { .userchip__account:hover { background: var(--color-muted); } }

/* Auswahllisten ------------------------------------------------------------*/
.lookup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-xl); align-items: start; }
.lookup-list { list-style: none; margin: 0; padding: 0; }
.lookup-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.lookup-list__item:first-child { border-top: 1px solid var(--color-border); }
.lookup-list__actions { display: flex; gap: var(--space-xs); opacity: 0.6; transition: opacity var(--motion-fast) var(--ease); }
.lookup-list__item:hover .lookup-list__actions, .lookup-list__item:focus-within .lookup-list__actions { opacity: 1; }
.lookup-list__empty { padding: var(--space-md) 0; font: var(--text-label); color: var(--color-muted-foreground); }

.lookup-grid .card__body > .btn { align-self: flex-start; }

/* Varianten ----------------------------------------------------------------*/
.linkbutton {
  background: none; border: 0; padding: 0; font: inherit; color: var(--color-foreground);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--color-border-strong);
  cursor: pointer;
}
.linkbutton:hover { text-decoration-color: currentColor; }
.linkbutton:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: 2px; }
.variants { display: flex; flex-direction: column; }
.variants__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-md); align-items: center;
  padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border);
}
.variants__row:first-child { border-top: 1px solid var(--color-border); }
.variants__row p { margin: 0; }
.variants__choice { display: inline-flex; padding: var(--space-xs); cursor: pointer; }

/* Farben & Styles (Matrix) -------------------------------------------------*/
.matrix th, .matrix td { vertical-align: top; }
.matrix tbody tr { cursor: default; }
.matrix .matrix__pos { width: 52px; }
.matrix .matrix__material { min-width: 200px; max-width: 280px; }
.matrix td:nth-child(2) { max-width: 280px; }
.matrix .matrix__toggle { width: 84px; text-align: center; }
.matrix td.matrix__toggle .checkbox { justify-content: center; }
.matrix .matrix__style { min-width: 210px; }
.matrix__stylehead { display: flex; align-items: start; justify-content: space-between; gap: var(--space-sm); }
.matrix__stylehead .cell-sub { max-width: 170px; }
.matrix .select { min-height: 30px; padding: 0 var(--space-md); font-size: 13px; }
.matrix__colour { width: 100%; }
.matrix__colour .select { flex: 1; min-width: 0; }
.matrix__colour.is-outside .select { border-color: var(--color-warning); background-color: var(--color-warning-soft); }
.matrix__variant { margin-top: var(--space-xs); width: 100%; color: var(--color-muted-foreground); }
.matrix td.matrix__fixed { background: var(--color-muted); }
.matrix td.matrix__fixed .matrix__colour { width: 260px; flex: none; }
.matrix tr.is-relevant td:first-child { box-shadow: inset 2px 0 0 var(--color-foreground); }

.plainlist--compact li { padding: var(--space-sm) 0; font-size: 13px; }
.deflist { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); margin: 0; font-size: 13px; }
.deflist dt { font: var(--text-label); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted-foreground); padding-top: 2px; }
.deflist dd { margin: 0; }
.matrix__stylehead > div { flex: 1; }
.matrix__stylehead .cell-sub { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matrix__stylehead .btn { flex: none; margin: -4px -6px 0 0; }

/* Arbeitsfläche (Tech-Pack) -------------------------------------------------*/
.artwork-viewer { display: flex; flex-direction: column; min-width: 0; }
.artwork-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); }
.artwork-toolbar .select { min-height: 32px; font-size: 13px; width: auto; max-width: 260px; }
.artwork-zoom {
  position: absolute; right: var(--space-lg); bottom: var(--space-lg); display: flex; align-items: center; gap: 2px;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px; box-shadow: var(--shadow-sm);
}
.artwork-zoom .btn--icon { width: 30px; min-height: 30px; border-radius: 999px; }
.artwork-toolbar__zoom { min-width: 48px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-muted-foreground); }
.artwork-stagewrap { position: relative; }
.artwork-stage {
  overflow: auto; height: calc(100dvh - var(--topbar-height) - 190px); min-height: 360px;
  background: repeating-conic-gradient(#f3f3f3 0% 25%, #fafafa 0% 50%) 0 0 / 16px 16px;
  padding: 16px; outline: none;
}
.artwork-stage:focus-visible { box-shadow: inset 0 0 0 2px var(--color-ring); }
.artwork-status { margin: 0; padding: var(--space-sm) var(--space-lg); min-height: 30px; font: var(--text-label); color: var(--color-muted-foreground); border-top: 1px solid var(--color-border); }

@media (max-width: 1023px) {
  .artwork-stage { height: 60dvh; }
}

/* Tech-Packs -----------------------------------------------------------------*/
.techpack-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr) 270px; gap: var(--space-lg); align-items: start; }
.techpack-pages, .techpack-inspector { position: sticky; top: calc(var(--topbar-height) + var(--space-xl)); max-height: calc(100dvh - var(--topbar-height) - var(--space-3xl)); display: flex; flex-direction: column; overflow: hidden; }
.techpack-pages__list { overflow-y: auto; border-top: 1px solid var(--color-border); flex: 1; }
.techpack-pages__add { border-top: 1px solid var(--color-border); padding: var(--space-md) var(--space-lg); gap: var(--space-sm); }
.techpack-pages__add .btn { justify-content: flex-start; width: 100%; }
.techpack-page {
  display: flex; align-items: center; gap: var(--space-md); width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--color-border); padding: var(--space-md) var(--space-lg); cursor: pointer;
}
@media (hover: hover) { .techpack-page:hover { background: var(--color-muted); } }
.techpack-page:focus-visible { outline: 2px solid var(--color-ring); outline-offset: -2px; }
.techpack-page.is-active { background: var(--color-muted); box-shadow: inset 2px 0 0 var(--color-foreground); }
.techpack-page__no { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); font-size: 11px; font-weight: 600; flex: none; }
.techpack-page.is-active .techpack-page__no { background: var(--color-foreground); color: #fff; border-color: var(--color-foreground); }
.techpack-page__text { display: flex; flex-direction: column; min-width: 0; }
.techpack-page__title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.techpack-page__meta { font: var(--text-label); color: var(--color-muted-foreground); }
.techpack-inspector { overflow-y: auto; }
.techpack-inspector__body { gap: var(--space-md); }
.techpack-inspector__body > .btn { align-self: flex-start; }
.techpack-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.techpack-rule { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-md) 0; width: 100%; }
.formgrid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.techpack-tool[aria-pressed="true"] { background: var(--color-foreground); color: #fff; border-color: var(--color-foreground); }
.techpack-workspace .artwork-toolbar .select { max-width: 200px; }
.techpack-sep { width: 1px; align-self: stretch; background: var(--color-border); margin: 0 var(--space-sm); }
.techpack-save { font: var(--text-label); color: var(--color-muted-foreground); margin-right: var(--space-md); align-self: center; }
.techpack-stage { height: calc(100dvh - var(--topbar-height) - 150px); }
.techpack-paper { margin: 0 auto; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06); background: #fff; }
.techpack-svg { display: block; width: 100%; height: 100%; user-select: none; touch-action: none; }
.techpack-svg[data-tool="bubble"], .techpack-svg[data-tool="text"] { cursor: crosshair; }
.tp-hit { fill: transparent; }
.tp-el { cursor: move; }
.techpack-svg[data-tool="bubble"] .tp-el, .techpack-svg[data-tool="text"] .tp-el { cursor: crosshair; }
.tp-legend:hover .tp-hit, .tp-text:hover .tp-hit { stroke: #2563eb; stroke-opacity: 0.35; stroke-width: 0.6; }
.tp-anchor { cursor: grab; }
.tp-outline { fill: none; stroke: #2563eb; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.tp-handle { fill: #fff; stroke: #2563eb; stroke-width: 1; cursor: nwse-resize; }
circle.tp-handle { cursor: grab; }
.tp-bubble.is-orphan text { fill: #fff; }

@media (max-width: 1279px) {
  .techpack-workspace { grid-template-columns: 170px minmax(0, 1fr); }
  .techpack-inspector { grid-column: 1 / -1; position: static; max-height: none; }
}

/* Formen der Zeichnung im Tech-Pack */
/* Treffer berechnet das Skript (shapeAt) – die Pfade selbst fangen keine Maus ab */
.tp-shapes { pointer-events: none; }
.tp-shape { fill: none; stroke: none; vector-effect: non-scaling-stroke; pointer-events: none; }
.tp-shape--fill { fill: #111; fill-opacity: 0; }
.tp-shape--stroke { stroke: #111; stroke-opacity: 0; stroke-width: 7px; }
.techpack-svg[data-tool="assign"], .techpack-stage.is-material-drag .techpack-svg { cursor: crosshair; }
/* Über einer bestehenden Bubble wird aus dem Fadenkreuz wieder eine Hand: Dort setzt
   der Klick keine neue Bubble, sondern greift die vorhandene. */
.techpack-svg[data-tool="assign"].is-over-bubble { cursor: grab; }
.techpack-svg[data-tool="assign"] .tp-bubble { cursor: grab; }
.techpack-svg[data-tool="assign"] .tp-bubble:active { cursor: grabbing; }
.tp-shape--fill.is-hover { fill: #2563eb; fill-opacity: 0.32; stroke: #1d4ed8; stroke-opacity: 1; stroke-width: 1.5px; }
.tp-shape--stroke.is-hover { stroke: #2563eb; stroke-opacity: 0.85; stroke-width: 5px; }
/* Zugeordnet: nur eine feine Kontur, damit die Zeichnung ihre Originalfarben behält */
.tp-shape--fill.is-assigned { fill: none; stroke: #2563eb; stroke-opacity: 0.55; stroke-width: 1px; stroke-dasharray: 3 2; }
.tp-shape--stroke.is-assigned { stroke: #2563eb; stroke-opacity: 0.45; stroke-width: 2.5px; }
.techpack-stage.is-dropzone { outline: 2px dashed var(--color-primary); outline-offset: -6px; background-color: #eef3ff; }
.techpack-stage.is-dropzone::after {
  content: "Zeichnung hier ablegen"; position: absolute; inset: auto 0 16px 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--color-primary); pointer-events: none;
}
.artwork-stagewrap { position: relative; }

.bom table .input.bom__posno { min-height: 24px; font-size: 11px; padding: 0 var(--space-sm); color: var(--color-muted-foreground); margin-top: 2px; }

/* Zuschneiden */
.cropper { background: repeating-conic-gradient(#f3f3f3 0% 25%, #fafafa 0% 50%) 0 0 / 16px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-lg); }
.cropper__svg { display: block; width: 100%; max-height: 62dvh; touch-action: none; user-select: none; }
.cropper__shade { fill: rgba(17, 17, 17, 0.45); pointer-events: none; }
.cropper__frame { fill: transparent; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; cursor: move; }
.cropper__handle { fill: #fff; stroke: #111; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.cropper__handle--nw, .cropper__handle--se { cursor: nwse-resize; }
.cropper__handle--ne, .cropper__handle--sw { cursor: nesw-resize; }
.cropper__handle--n, .cropper__handle--s { cursor: ns-resize; }
.cropper__handle--e, .cropper__handle--w { cursor: ew-resize; }

/* Maße mit Einheit: L / B / H + Einheit bzw. Zahl + Einheit dahinter */
.dimgroup { display: flex; flex-direction: column; gap: var(--space-sm); }
.dimgroup__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 96px; gap: var(--space-md); align-items: start; }
.inputunit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; }
.inputunit .select { width: 84px; }
.inputunit__fixed { min-width: 56px; font: var(--text-label); color: var(--color-muted-foreground); }
@media (max-width: 520px) {
  .dimgroup__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Marke: Brandsign links (weiß auf Dunkel), Schriftzug rechts, darunter „Materialdatenbank" */
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__mark {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: #1a1a1a; color: #fff; display: grid; place-items: center;
}
.brand__sign { width: 30px; height: auto; display: block; }
.brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand__logotype { height: 20px; width: auto; display: block; align-self: flex-start; color: #0a0a0c; }
.brand__sub { font: var(--text-label); color: var(--color-muted-foreground); letter-spacing: 0.02em; white-space: nowrap; }
.login__brand .brand__mark { width: 48px; height: 48px; }
.login__brand .brand__sign { width: 36px; }
.login__brand .brand__logotype { height: 24px; }

/* Farbpalette am Material */
/* Farbe · Preis · Labdip-Nr. · bestätigt am · entfernen */
.colourrow { display: grid; grid-template-columns: minmax(0, 1.25fr) 88px minmax(0, 1fr) 138px auto; gap: var(--space-sm); align-items: center; }
.colourrow + .colourrow { margin-top: var(--space-sm); }
.colourrow__name { min-width: 0; }
.colourlist:empty { display: none; }
/* Vier schmale Felder brauchen Spaltenköpfe – Platzhaltertexte allein reichen hier nicht */
.colourrow--head { font: var(--text-label); color: var(--color-muted-foreground); padding: 0 0 var(--space-xs); }
@media (max-width: 520px) {
  .colourrow { grid-template-columns: minmax(0, 1fr) auto; }
  .colourrow--head { display: none; }
}

/* Änderungen & Konflikte */
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-muted); align-self: flex-start; flex-wrap: wrap; }
.segmented__item {
  display: inline-flex; align-items: center; gap: var(--space-sm); border: 0; background: transparent; cursor: pointer;
  padding: 6px 12px; border-radius: calc(var(--radius-sm) - 2px); font: inherit; font-size: 13px; color: var(--color-muted-foreground);
}
.segmented__item[aria-selected="true"] { background: var(--color-card); color: var(--color-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 600; }
.segmented__count:empty { display: none; }
.segmented__count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-warning); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.toolbar__check { padding-bottom: 8px; }
.callout { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 13px; }
.callout--warning { background: var(--color-warning-soft); border-color: #fde68a; color: var(--color-foreground); }
.callout--warning .icon { color: var(--color-warning); flex: none; margin-top: 2px; }
.table--plain tbody tr { cursor: default; }
@media (hover: hover) { .table--plain tbody tr:hover { background: transparent; } }
.table--plain th[scope="row"] { font-weight: 600; text-align: left; white-space: nowrap; }
.conflict__theirs { text-decoration: line-through; color: var(--color-muted-foreground); margin-bottom: 4px; }
.navlink__badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-warning); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.navlink__badge:empty { display: none; }
.toast--warning { background: var(--color-warning); }
a.btn { text-decoration: none; color: inherit; }

/* Export & Import */
.transfer__head { display: flex; gap: var(--space-sm); align-items: center; }
.transfer__head > .icon { flex: none; color: var(--color-muted-foreground); }
.transfer__title { font: var(--text-section); font-weight: 600; margin: 0 0 2px; }
.transfer__actions { flex-wrap: wrap; gap: var(--space-md); }
.transfer__products { max-height: 240px; overflow-y: auto; }
.dropzone { border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-lg); text-align: center; color: var(--color-muted-foreground); font-size: 13px; }
.dropzone.is-over { border-color: var(--color-foreground); background: var(--color-muted); color: var(--color-foreground); }
.overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 10, 12, .45); display: grid; place-items: center; padding: 16px; }
.overlay__box { background: var(--color-card); border-radius: var(--radius-sm); padding: var(--space-lg) 24px; max-width: 380px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.transfer .table .mono { word-break: break-all; }
.transfer .table .cell-inline { flex-wrap: wrap; }
.dropzone p { margin: 0; }
.dropzone .field__hint { display: block; text-align: center; }
.schedule { border-top: 1px solid var(--color-border); padding-top: var(--space-lg); }
.schedule .toolbar .inputunit .input { width: 72px; }

/* Speicherübersicht: gestapelter Balken mit Legende */
.meter { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--color-muted); }
.meter__part { display: block; height: 100%; }
.meter__part + .meter__part { box-shadow: inset 1px 0 0 var(--color-card); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.legend__item { display: flex; align-items: center; gap: var(--space-md); font: var(--text-cell); min-width: 0; }
.legend__dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.legend__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend__value { margin-left: auto; color: var(--color-muted-foreground); white-space: nowrap; }

/* Auswahlfeld mit Suche (lib/combobox.js) */
.combo { position: relative; min-width: 0; width: 100%; }
.combo__trigger { display: flex; align-items: center; gap: var(--space-sm); text-align: left; cursor: pointer; color: var(--color-foreground); font: inherit; }
.combo__trigger:disabled { cursor: not-allowed; opacity: .6; }
.combo__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__label.is-placeholder { color: var(--color-muted-foreground); }
.combo__preview { display: inline-flex; flex: none; }
.combo__preview[hidden] { display: none; }
.combo__pop {
  position: fixed; z-index: 2000; display: flex; flex-direction: column; min-height: 0;
  background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  /* Wächst aus seinem Auslöser, nicht aus der Bildmitte. */
  transform-origin: top center;
  animation: pop-in var(--motion-fast) var(--ease);
}
@keyframes pop-in { from { transform: scale(0.97); opacity: 0; } }
.combo__pop[hidden] { display: none; }
.combo__searchwrap { position: relative; padding: 6px; border-bottom: 1px solid var(--color-border); flex: none; }
.combo__searchwrap[hidden] { display: none; }
.combo__searchwrap .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-muted-foreground); pointer-events: none; }
.combo__search { padding-left: 32px; min-height: 34px; }
.combo__list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.combo__group { padding: 8px 8px 4px; font: var(--text-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted-foreground); }
.combo__option { display: flex; align-items: center; gap: var(--space-sm); padding: 6px 8px; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; font-size: 13px; min-height: 32px; }
.combo__option.is-active { background: var(--color-muted); }
.combo__option[aria-selected="true"] { font-weight: 600; }
.combo__option.is-empty { color: var(--color-muted-foreground); }
.combo__option.is-missing { color: var(--color-warning); }
.combo__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.combo__optlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__hint { font: var(--text-label); color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo__check { flex: none; color: var(--color-foreground); }
.combo__delete { flex: none; opacity: 0; }
.combo__option:hover .combo__delete, .combo__option.is-active .combo__delete { opacity: 1; }
.combo__delete:hover { color: var(--color-destructive); }
.combo__none { padding: 10px 8px; color: var(--color-muted-foreground); font-size: 13px; }
.combo__footer { border-top: 1px solid var(--color-border); padding: 4px; flex: none; }
.combo__footer[hidden] { display: none; }
.combo__create { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: 8px; border: 0; background: transparent; border-radius: calc(var(--radius-sm) - 2px); cursor: pointer; font: inherit; font-size: 13px; color: var(--color-foreground); text-align: left; }
@media (hover: hover) { .combo__create:hover { background: var(--color-muted); } }
.colourpick { max-width: 360px; }
.toolbar > .field .combo { min-width: 180px; }

/* Tech-Pack: linke Spalte mit Seiten und Materialliste */
.techpack-left { display: flex; flex-direction: column; gap: var(--space-lg); position: sticky; top: calc(var(--topbar-height) + var(--space-xl)); max-height: calc(100dvh - var(--topbar-height) - var(--space-3xl)); min-height: 0; }
.techpack-left .techpack-pages { position: static; max-height: 40%; flex: none; }
.techpack-materials { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.techpack-materials__head { display: flex; flex-direction: column; gap: var(--space-sm); }
.techpack-materials__list { overflow-y: auto; border-top: 1px solid var(--color-border); flex: 1; padding: 4px; }
.techpack-materials__empty { padding: var(--space-md); }
.techpack-material {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; text-align: left; cursor: grab; font: inherit; color: var(--color-foreground);
}
@media (hover: hover) { .techpack-material:hover { background: var(--color-muted); } }
.techpack-material:disabled { cursor: default; }
.techpack-material:active { cursor: grabbing; }
.techpack-material.is-armed { background: #eef3ff; border-color: #2563eb; }
.techpack-material.is-current { border-color: var(--color-border-strong); }
.techpack-material__no { flex: none; min-width: 30px; padding: 1px 5px; border-radius: 9px; background: #111; color: #fff; font: 600 10px/16px var(--font-mono, monospace); text-align: center; }
.techpack-material.is-armed .techpack-material__no { background: #2563eb; }
.techpack-material__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.techpack-material__name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.techpack-material__meta { font: var(--text-label); color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.techpack-material__meta:empty { display: none; }
.techpack-material__count { flex: none; font: var(--text-label); color: var(--color-muted-foreground); }
.techpack-material:not(.is-placed) .techpack-material__no { background: #737373; }
.techpack-material.is-armed:not(.is-placed) .techpack-material__no { background: #2563eb; }
.matrix__colour.is-no-palette .combo__label.is-placeholder { font-style: italic; }

/* Umschalter Tabelle / Kacheln */
.viewtoggle { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.viewtoggle__btn { border: 0; border-radius: 0; background: var(--color-card); color: var(--color-muted-foreground); }
.viewtoggle__btn + .viewtoggle__btn { border-left: 1px solid var(--color-border-strong); }
.viewtoggle__btn[aria-pressed="true"], .viewtoggle__btn[aria-pressed="true"]:hover { background: var(--color-foreground); color: #fff; }
@media (hover: hover) { .viewtoggle__btn[aria-pressed="false"]:hover { background: var(--color-muted); color: var(--color-foreground); } }

/* Kachelansicht */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-xl); padding: var(--space-xl); }
.cardgrid[hidden] { display: none; }
.pcard {
  display: flex; flex-direction: column; overflow: hidden; cursor: pointer; background: var(--color-card);
  border: 1px solid rgba(0, 0, 0, .06); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.pcard:focus-visible { border-color: rgba(0, 0, 0, .09); box-shadow: var(--shadow-md); }
@media (hover: hover) { .pcard:hover { border-color: rgba(0, 0, 0, .09); box-shadow: var(--shadow-md); } }
.pcard.is-selected { border-color: var(--color-foreground); }
/* Das Bild füllt den Rahmen mittig – ohne Streifen oben oder unten */
.pcard__media { position: relative; aspect-ratio: 5 / 3; background: #f4f4f5; display: grid; place-items: center; overflow: hidden; }
.pcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pcard__colour { width: 100%; height: 100%; }
.pcard__placeholder { color: var(--color-border-strong); }
.pcard__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.pcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 24px; margin-bottom: 4px; }
.pcard__code { font: var(--text-label); color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__badge { flex: none; }
.pcard__title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pcard__sub { margin: 0; font-size: 13px; color: var(--color-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__meta { margin: 4px 0 0; font-size: 13px; color: var(--color-muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard--skeleton { cursor: default; }
.pcard--skeleton .pcard__body { gap: 10px; }
.tp-handle--joint { cursor: ew-resize; }
.tp-outline--locked { stroke: #737373; stroke-dasharray: 3 2; }
/* „In Range" und „Not in Range" stehen immer nebeneinander */
.rangebox { display: flex; gap: var(--space-xl); flex-wrap: nowrap; align-items: center; }
.rangebox .checkbox { white-space: nowrap; }
/* In der Werkzeugleiste darf der Block nicht schmaler werden als seine Beschriftungen,
   sonst laufen „Not in Range" und die nächsten Kästchen ineinander (.toolbar .field ist spezifischer). */
.rangefilter, .toolbar .rangefilter { flex: 0 0 auto; min-width: max-content; }
.rangefilter .rangebox { gap: var(--space-lg); min-height: var(--control-height); align-items: center; flex-wrap: nowrap; }
.rangefilter .checkbox { white-space: nowrap; }
/* Weitere Kästchen der Werkzeugleiste (z. B. „nur bluesign") – gleiche Höhe, kein Quetschen */
.toolbar__checks { display: flex; gap: var(--space-xl); flex-wrap: wrap; flex: 0 0 auto; min-width: max-content; align-items: center; min-height: var(--control-height); }
.toolbar__checks .checkbox { white-space: nowrap; }

/* Erklärung hinter einem ⓘ */
.field__labelrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.field__labelrow .field__label { margin: 0; }
.infotip {
  display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-muted-foreground); cursor: help;
}
.infotip:hover, .infotip[aria-expanded="true"] { background: var(--color-muted); color: var(--color-foreground); }
.infotip__bubble {
  position: fixed; z-index: 2500; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--color-foreground); color: #fff; font: var(--text-cell); line-height: 1.45;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
}
/* Wächst aus dem ⓘ heraus (ui.js setzt transform-origin auf das Symbol). */
.infotip__bubble:not([hidden]) { animation: pop-in var(--motion-fast) var(--ease); }
.infotip__bubble[hidden] { display: none; }
.section__summary .infotip { margin-left: 2px; }

/* Hinweisleiste über dem Tech-Pack-Editor: Wer bearbeitet gerade, und was heißt das? */
.lockbar { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary); border-radius: var(--radius-sm);
  background: var(--color-muted); font-size: var(--text-sm); }
.lockbar .btn { margin-left: auto; white-space: nowrap; }

/* Systemwünsche des Betriebssystems ----------------------------------------
   Die durchscheinenden Leisten sind Gestaltung, kein Selbstzweck: Wer weniger
   Transparenz oder mehr Kontrast eingestellt hat, bekommt feste Flächen. */
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, .sheet__footer {
    background: #fcfcfd;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  :root { --color-border: #9a9aa2; --color-muted-foreground: #45454c; }
  .sidebar, .topbar {
    background: var(--color-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--color-border);
  }
  .card, .pcard { border-color: var(--color-border); }
}
/* Bewegung reduzieren ------------------------------------------------------
   Wer im System „Bewegung reduzieren“ eingestellt hat, bekommt kein Verschieben,
   Vergrößern und keine Unschärfe mehr. Weiches Ein- und Ausblenden bleibt: Es bewegt
   nichts, macht aber sichtbar, dass etwas kommt oder geht. Gleichnamige Keyframes
   weiter unten ersetzen die oberen, solange die Einstellung aktiv ist. */
@media (prefers-reduced-motion: reduce) {
  @keyframes slide-in { from { opacity: 0; } }
  @keyframes sheet-out { to { opacity: 0; } }
  @keyframes dialog-in { from { opacity: 0; } }
  @keyframes dialog-out { to { opacity: 0; } }
  @keyframes toast-in { from { opacity: 0; } }
  @keyframes toast-out { to { opacity: 0; } }
  @keyframes pop-in { from { opacity: 0; } }
  /* Der Ladebalken bewegt sich endlos – er steht still, die Skelett-Zeilen bleiben. */
  .skeleton { animation: none; }
  .btn:active:not(:disabled), .tabbar__tab:active { transform: none; }
  .tabbar__tab { transition: none; }
  .section__sign::before, .section__sign::after { transition: none; }
  .section::details-content { transition: none; }
  .sidebar { transition: none; }
}