/* ===== Layout der Mockups (nur Token-Variablen) ===== */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.topbar { position: relative; background: var(--color-primary); color: var(--color-on-primary); border-bottom: 1px solid var(--color-primary); }
.topbar-in { display: flex; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--color-on-primary); text-decoration: none; }
.brand:hover { color: var(--color-on-primary); }
.brand svg { color: var(--color-accent); }
.nav { display: flex; gap: var(--space-1); flex-wrap: wrap; flex: 1; }
.topbar .nav a { color: var(--color-on-primary); }
.topbar .nav a:hover { background: color-mix(in srgb, var(--color-on-primary) 16%, transparent); color: var(--color-on-primary); }
.topbar .nav a[aria-current="page"] { background: color-mix(in srgb, var(--color-on-primary) 12%, transparent); font-weight: var(--fw-bold); box-shadow: inset 0 -3px 0 var(--color-accent); }
.topbar a:focus-visible { box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 4px var(--color-on-primary); }
.topbar .cta { margin-left: auto; }
.page { padding-top: var(--space-6); padding-bottom: var(--space-12); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-head h1 { margin-bottom: var(--space-1); }
.muted { color: var(--color-text-muted); }
.lead { margin: 0; color: var(--color-text-muted); }
.row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: var(--space-4); }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.section-title h2 { font-size: var(--fs-lg); margin: 0; }
.foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Dashboard */
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi { padding: var(--space-4) var(--space-6); border-top: 4px solid var(--color-primary); }
.kpi.is-warn { border-top-color: var(--color-warning); }
.kpi .k { font-size: var(--fs-sm); color: var(--color-text-muted); font-weight: var(--fw-medium); }
.kpi .v { font-family: var(--font-heading); font-size: var(--fs-kpi, 2.5rem); font-weight: var(--fw-bold); line-height: 1.1; }
.kpi .s { font-size: var(--fs-sm); color: var(--color-text-muted); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.bars { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.bar-row { display: grid; grid-template-columns: minmax(84px, 130px) 1fr 36px; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.bar-row b { text-align: right; font-weight: var(--fw-bold); }
.bar { height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--color-text) 10%, transparent); overflow: hidden; }
.bar > i { display: block; height: 100%; width: var(--w); background: var(--c, var(--color-primary)); border-radius: inherit; }
.need { display: grid; gap: 0; }
.need-row { display: flex; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.need-row:first-child { border-top: 0; }
.need-main { flex: 1 1 220px; min-width: 0; }
.need-main strong { display: block; }
.need-main span { font-size: var(--fs-sm); color: var(--color-text-muted); }
.need-count { font-weight: var(--fw-bold); min-width: 36px; text-align: right; }

/* Werkzeugleiste Bestand */
.toolbar { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.toolbar-filters { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.toolbar-top { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: end; }
.seg { display: inline-flex; gap: var(--space-1); }
.result-line { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.tile { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.tile-body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.tile-body .badges { margin-top: auto; padding-top: var(--space-1); }
.tile-body h3 { font-size: var(--fs-base); margin: 0; font-family: var(--font-text); font-weight: var(--fw-bold); color: var(--color-text); }
.tile-meta { font-size: var(--fs-sm); color: var(--color-text-muted); margin: 0; }
.tile-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
.tile-foot .qty { font-weight: var(--fw-bold); }
.badges { display: flex; gap: var(--space-1); flex-wrap: wrap; }

/* Liste */
.table-wrap { padding: 0; overflow: hidden; }
table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th { text-align: left; font-weight: var(--fw-semibold, 600); padding: var(--space-3) var(--space-4); background: var(--color-surface-alt, var(--color-bg)); border-bottom: 1px solid var(--color-border); color: var(--color-text); white-space: nowrap; }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.table .num { text-align: right; font-weight: var(--fw-bold); }
.table .name strong { display: block; }
.table .name span { color: var(--color-text-muted); font-size: var(--fs-sm); }
.table .act { white-space: nowrap; text-align: right; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Formular */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-6); }
.form-grid .full { grid-column: 1 / -1; }
.color-pick { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-2); }
.color-pick input[type="color"] { width: 56px; height: 44px; padding: 2px; border-radius: var(--radius); border: 1px solid var(--color-border-strong, var(--color-border)); background: var(--color-surface); cursor: pointer; }
.stepper { display: grid; grid-template-columns: 44px 1fr 44px; gap: var(--space-2); }
.stepper .btn { padding: 0; }
.stepper .input { text-align: center; }
.form-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.codebox { background: var(--color-surface-alt, var(--color-bg)); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); }

/* ===== Responsiv ===== */
@media (max-width: 1000px) {
  .toolbar-filters { grid-template-columns: repeat(3, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .two-col, .form-grid, .grid-3 { grid-template-columns: 1fr; }
  .toolbar-filters { grid-template-columns: 1fr 1fr; }
  .toolbar-top { grid-template-columns: 1fr; }
  .card:not(.tile):not(.table-wrap) { padding: var(--space-4); }
  .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .nav { flex-basis: 100%; order: 3; gap: 0; }
  .topbar .nav a { padding: 6px 10px; min-height: 40px; font-size: var(--fs-sm); }
  .topbar .cta { order: 2; margin-left: auto; }
  /* Tabelle wird zu Karten */
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .table td { padding: var(--space-1) 0; border: 0; display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .table td::before { content: attr(data-label); color: var(--color-text-muted); font-weight: var(--fw-medium); text-align: left; flex: none; }
  .table td.name, .table td.sw { text-align: left; }
  .table td.sw::before, .table td.name::before { display: none; }
  .table td.name { font-size: var(--fs-base); }
  .table td.act { justify-content: flex-end; padding-top: var(--space-2); }
  .table td.act::before { display: none; }
}
@media (max-width: 420px) {
  .tile-body { padding: var(--space-3); }
  .tile-foot { padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
  .kpi { padding: var(--space-3) var(--space-4); }
  .kpi .v { font-size: 2rem; }
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Ergänzungen der App (nur Token-Variablen) ===== */
.page-head h2, .card > h2 { font-size: var(--fs-lg); }
.dialog { max-width: 440px; width: calc(100% - 2 * var(--space-4)); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.dialog::backdrop { background: var(--scrim); }
.dialog h3 { margin-top: 0; }
.dialog .row { justify-content: flex-end; }
.empty { text-align: center; padding: var(--space-8) var(--space-4); }
.empty svg { color: var(--color-text-muted); }
.empty .row { justify-content: center; }
.alert { margin-bottom: var(--space-4); }
.btn-link-danger { color: var(--color-error); }
.pager a[aria-disabled="true"], .pager button:disabled { opacity: .5; pointer-events: none; }
.tile-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; flex: 1; }
.tile-link:focus-visible { box-shadow: var(--focus-ring); }
.skeleton.lg { height: 40px; width: 60%; }