/* ============================================================
   Vorlage Dashboard: Tokens, Aufbau, Bausteine

   Herkunft: Lead- und Projektmanager (Repo lead-und-projekttool),
   Stand 07.09.2026, auf das Gehäuse und die Grundbausteine gekürzt.

   Jede Farbe hier ist ein Wert aus cd.css (Corporate Design Q-FOX)
   oder mit color-mix aus solchen Werten abgeleitet. Eigene Hex-Werte
   gibt es nicht; `python cd-pruefen.py <Ordner>` hält das fest.

   Aufbau der Datei:
     1. Tokens          Rollen-Variablen auf dem CD
     2. Grundlagen      Body, Überschriften, Fokus, Helfer
     3. Aufbau          Seitenleiste, Navigation, Inhaltsspalte, Raster
     4. Bausteine       Knöpfe, Karten, Kennzahlen, Tabellen, Formulare,
                        Ampel, Band, Leerzustand, Drawer, Toast
     5. Umbrüche        Leiste schrumpft zur Symbolleiste, dann Kopfleiste
   ============================================================ */

/* ============================================================
   1. Tokens
   ============================================================ */

:root {
  /* --- Marke: Aliasnamen auf das CD ------------------------ */
  --lw-navy:       var(--cd-blau);
  --lw-navy-700:   color-mix(in srgb, var(--cd-blau) 88%, #000000);   /* Primäraktion gedrückt */
  --lw-navy-300:   var(--cd-blau-60);
  --lw-red:        var(--cd-rot);
  --lw-red-700:    color-mix(in srgb, var(--cd-rot) 85%, #000000);    /* Zerstören gedrückt */
  --lw-blue:       var(--cd-blau-80);   /* Links, Markierungen: 6,5:1 auf Weiß */
  --lw-blue-light: var(--cd-blau-40);
  --lw-blue-pale:  var(--cd-blau-20);

  /* --- Status (Ampel) ---------------------------------------
     Rot und Grün aus der Ergänzung in cd.css (Freigabe Marketing
     offen), Gelb ist das BADEN-CLOUD-Gelb. Gelb trägt nur als
     Fläche; als Text wird der Ton abgedunkelt.                */
  --amp-green:     var(--cd-erfolg);
  --amp-green-bg:  color-mix(in srgb, var(--cd-erfolg) 12%, #ffffff);
  --amp-green-fg:  color-mix(in srgb, var(--cd-erfolg-dunkel) 78%, #000000);
  --amp-yellow:    var(--cd-warnung);
  --amp-yellow-bg: var(--cd-warnung-flaeche);
  --amp-yellow-fg: color-mix(in srgb, var(--cd-warnung) 42%, #000000);
  --amp-red:       var(--cd-fehler);
  --amp-red-bg:    color-mix(in srgb, var(--cd-fehler) 4%, #ffffff);
  --amp-idle:      var(--cd-grau-20);
  --amp-idle-bg:   var(--cd-grau-05);

  /* --- Flächen und Text ------------------------------------ */
  --bg:            var(--cd-flaeche-2);
  --bg-sunken:     var(--cd-grau-10);
  --surface:       var(--cd-flaeche);
  --surface-alt:   var(--cd-grau-05);
  --surface-hover: var(--cd-grau-05);
  --border:        var(--cd-linie);
  --border-strong: var(--cd-blau-60);   /* Rahmen des Bedienbaren, 3,0:1 auf Weiß */
  --text:          var(--cd-text);
  --text-body:     var(--cd-text-leise);
  --text-muted:    color-mix(in srgb, var(--cd-text-leise) 80%, #ffffff);  /* ~5:1 auf Weiß */
  --text-invert:   var(--cd-weiss);
  --auswahl-bg:    var(--cd-blau-20);
  --focus-ring:    var(--cd-fokus);

  /* Seitenleiste: die einzige große Markenfläche */
  --nav-bg:        var(--cd-blau);
  --nav-fg:        rgba(255, 255, 255, 0.84);
  --nav-fg-active: var(--cd-weiss);

  /* --- Typografie: Arial, wie das CD es für Online vorschreibt --- */
  --font:     var(--cd-schrift);

  --fs-kpi:   2rem;       /* 32px, die Zahl ist der Inhalt */
  --fs-kpi-s: 1.5rem;     /* 24px, Sekundärkennzahl */
  --fs-h1:    1.5rem;     /* 24px, Seitentitel */
  --fs-h2:    1.125rem;   /* 18px */
  --fs-h3:    1rem;       /* 16px */
  --fs-body:  0.9375rem;  /* 15px, dichter als 16: Datenwerkzeug */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-xs:    0.6875rem;  /* 11px, Eyebrows, Versalien */

  --lh-tight: 1.15;
  --lh-body:  1.55;

  --tr-kpi:   -0.02em;
  --tr-head:  -0.01em;
  --tr-label:  0.08em;

  /* --- Raster ---------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius:      6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --control-h-sm: 28px;
  --control-h:    34px;
  --control-h-lg: 40px;

  --sidebar-w:      240px;
  --sidebar-w-rail: 64px;
  --content-max:    1440px;

  /* Karten tragen einen Rahmen, keinen Schatten. Schatten nur für das,
     was wirklich schwebt: Drawer, Menü, Meldung. Getönt im Markenblau. */
  --shadow:    0 2px 8px rgba(14, 58, 93, 0.10);
  --shadow-lg: 0 8px 28px rgba(14, 58, 93, 0.18);

  --dur-fast: 120ms;
  --dur:      200ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   2. Grundlagen
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` bringt nur `display: none` aus dem Browser-Stil mit; jede
   eigene Regel mit `display` sticht es aus. Diese Zeile verhindert, dass
   Drawer und Scrim unsichtbar über dem Inhalt liegen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-head);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-3); }

a { color: var(--lw-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Sichtbarer Fokus überall, ohne Ringe beim Mausklick */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

/* Eyebrow: kleine Versalzeile über einem Titel oder einer Zahl */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Zahlen immer gleich breit, damit Spalten nicht zappeln */
.num, td.num, .kpi__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.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;
}

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

/* ============================================================
   3. Aufbau
   Eine Seitenleiste in Q-FOX Blau am linken Rand trägt Marke,
   Suche, Navigation und Werkzeuge. Kopfzeile und Reiterband gibt
   es nicht: die Höhe gehört dem Inhalt.
   ============================================================ */

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -3rem;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--lw-navy);
  color: #fff;
  border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* --- Zwei Spalten: Leiste und Inhalt ----------------------- */

body {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.app-main {
  position: relative;
  min-width: 0;
  /* Genau ein Fenster hoch: gescrollt wird im Inhalt, die Leiste und
     die Bänder darüber bleiben stehen. */
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* --- Seitenleiste ------------------------------------------ */

.app-sidebar {
  /* Auf der blauen Fläche trägt der weiße Ring; Rot hätte 2,4:1. */
  --focus-ring: var(--cd-weiss);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-3);
  background: var(--nav-bg);
  color: var(--nav-fg);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Das Logo ist Blau auf transparent und braucht Weiß. Eine Negativfassung
   liegt nicht vor (OFFEN: Marketing). Bis dahin steht es auf einer
   weißen Platte. */
.app-sidebar__logo {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--cd-weiss);
  border-radius: var(--radius);
  line-height: 0;
}
.app-sidebar__logo img {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
}

.app-sidebar__produkt {
  display: block;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--nav-fg-active);
}

/* --- Suche ------------------------------------------------- */

.search-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 0 var(--sp-3);
  height: var(--control-h);
  background: rgba(255, 255, 255, 0.10);
  color: var(--nav-fg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.search-trigger:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.16);
  color: var(--nav-fg-active);
}
.search-trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-trigger kbd {
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-bottom-width: 2px;
  border-radius: 3px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--nav-fg);
}

/* --- Navigation -------------------------------------------- */

.app-nav { flex: 1 1 auto; min-height: 0; }
.app-nav__inner { display: flex; flex-direction: column; gap: var(--sp-4); }

.nav-gruppe { display: flex; flex-direction: column; gap: 2px; }
.nav-gruppe__titel {
  display: block;
  padding: 0 var(--sp-2) var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-2);
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--nav-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav-item:hover { color: var(--nav-fg-active); background: rgba(255, 255, 255, 0.10); }

/* Weiß als Aktivmarkierung: Rot ist im System der Farbwert für
   Zerstörendes, und Rot auf Blau ist im CD verboten. */
.nav-item[aria-current="page"] { color: var(--lw-navy); background: var(--cd-weiss); }

.nav-item__icon { flex: none; width: 18px; height: 18px; }
.nav-item__icon svg { display: block; }
.nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Zähler nur dort, wo eine Zahl zum Handeln auffordert */
.nav-item__count {
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nav-item[aria-current="page"] .nav-item__count { background: var(--cd-blau-20); }
.nav-item__count[data-tone="rot"] { background: var(--lw-red); color: #fff; }

/* --- Fuß der Leiste: Werkzeuge, Nutzer, Fassung ------------ */

.app-sidebar__fuss {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.app-sidebar__werkzeuge { display: flex; gap: var(--sp-1); }
.app-sidebar__fassung {
  padding: 0 var(--sp-2);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--control-h);
  height: var(--control-h);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.app-sidebar .icon-btn { color: var(--nav-fg); }
.app-sidebar .icon-btn:hover { background: rgba(255, 255, 255, 0.10); color: var(--nav-fg-active); }
.app-sidebar .icon-btn[aria-pressed="true"] { background: var(--cd-weiss); color: var(--lw-navy); }

.badge-count {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  background: var(--lw-red);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  color: var(--nav-fg-active);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.user-chip:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.10); }
.user-chip__initials {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--cd-weiss);
  color: var(--lw-navy);
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.user-chip__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  line-height: 1.25;
}
.user-chip__name { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.user-chip__role { font-size: 10px; color: var(--nav-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* --- Inhaltsbereich --------------------------------------- */

main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: var(--sp-5);
  outline: none;
}

/* Kopf jeder Seite: Eyebrow, Titel, eine Zeile Erläuterung, rechts die
   Aktionen. Stapelt, sobald es eng wird. */
.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4);
  max-width: var(--content-max);
  margin: 0 auto var(--sp-4);
}
.view-head__text { flex: 1 1 20rem; min-width: 0; }
.view-head h1 { margin-top: 2px; }
.view-head p { margin: var(--sp-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
.view-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 0 1 auto; }

/* Körper der Seite. container-type erlaubt Bausteinen, auf die Breite
   dieses Behälters zu reagieren statt auf das Fenster. */
.view-body {
  container-type: inline-size;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* --- Zwölfspaltiges Raster --------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Unter 1180 px werden aus zwölf Spalten zwei Hälften. */
@media (max-width: 1180px) {
  .col-3, .col-4, .col-5,
  .col-7, .col-8, .col-9 { grid-column: span 6; }
  .col-10, .col-11 { grid-column: span 12; }
}

/* ============================================================
   4. Bausteine
   ============================================================ */

/* --- Schaltflächen ---------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface-hover); border-color: var(--lw-navy-300); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary { background: var(--lw-navy); border-color: var(--lw-navy); color: #fff; }
.btn--primary:hover { background: var(--lw-navy-700); border-color: var(--lw-navy-700); }

/* Rot nur für Zerstörendes: Löschen, Verwerfen. */
.btn--danger { background: var(--lw-red); border-color: var(--lw-red); color: #fff; }
.btn--danger:hover { background: var(--lw-red-700); border-color: var(--lw-red-700); }

.btn--ghost { background: none; border-color: transparent; font-weight: 500; }
.btn--ghost:hover { background: var(--surface-hover); border-color: var(--border); }

.btn--sm { height: var(--control-h-sm); padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn--lg { height: var(--control-h-lg); padding: 0 var(--sp-5); font-size: var(--fs-body); }

/* --- Karten ----------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
}
.card__head > :first-child { flex: 1; min-width: 0; }
.card__head h2, .card__head h3 { min-width: 0; }
.card__head .eyebrow { display: block; margin-bottom: 2px; }
.card__hinweis {
  margin: 4px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 62ch;
}
.card__body { padding: 0 var(--sp-5) var(--sp-5); flex: 1; min-height: 0; }
.card__foot {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* Platzhalter für ein Diagramm: zeigt, wo das Bild hinkommt. */
.platzhalter {
  display: grid;
  place-items: center;
  min-height: 220px;
  height: 100%;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-sunken);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-4);
}

/* --- Kennzahl (KPI) -----------------------------------------
   Die Zahl ist der Held. Label darüber klein, Kontext darunter. */

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--lw-navy);
  border-radius: var(--radius-lg);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.kpi:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.kpi[data-tone="rot"]   { border-left-color: var(--amp-red); }
.kpi[data-tone="gelb"]  { border-left-color: var(--amp-yellow); }
.kpi[data-tone="gruen"] { border-left-color: var(--amp-green); }
.kpi[data-tone="blau"]  { border-left-color: var(--lw-blue); }

.kpi__value {
  font-size: var(--fs-kpi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tr-kpi);
  color: var(--text);
}
.kpi__value small {
  font-size: 0.45em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: 0.2em;
}
.kpi__hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Kennzahlen füllen die Zeile immer aus, egal ob zwei oder fünf. */
.kpi-zeile {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-bottom: var(--sp-4);
}

/* Die erste Kachel antwortet auf die erste Frage und darf lauter sein. */
.kpi[data-rang="primaer"] .kpi__value { font-size: var(--fs-kpi); }
.kpi:not([data-rang="primaer"]) .kpi__value { font-size: var(--fs-kpi-s); }
.kpi:not([data-rang="primaer"]):not([data-tone]) { border-left-color: transparent; }

@container (min-width: 52rem) {
  .kpi-zeile:has(.kpi[data-rang="primaer"]) { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* --- Tabelle ---------------------------------------------- */

.tabelle-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: auto;
  max-height: calc(100vh - 12rem);
}

table.liste {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
table.liste thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 2px solid var(--lw-navy);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}
table.liste tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tbody tr[data-klickbar] { cursor: pointer; }
table.liste tbody tr[data-klickbar]:hover td,
table.liste tbody tr:focus-within td { background: var(--surface-hover); }
table.liste tbody tr[data-gewaehlt="true"] td { background: var(--auswahl-bg); }

td.num, th.num { text-align: right; }
td.titel { font-weight: 600; color: var(--text); }

/* --- Ampel als Etikett -------------------------------------
   Farbe UND Punkt: Rot und Grün sind bei Farbsinnschwäche kaum zu
   unterscheiden, deshalb steht immer ein Text daneben. */

.ampel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--sp-2) 2px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}
.ampel::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ampel[data-ampel="gruen"]   { background: var(--amp-green-bg);  color: var(--amp-green-fg); }
.ampel[data-ampel="gelb"]    { background: var(--amp-yellow-bg); color: var(--amp-yellow-fg); }
.ampel[data-ampel="rot"]     { background: var(--amp-red-bg);    color: var(--amp-red); }
.ampel[data-ampel="inaktiv"] { background: var(--amp-idle-bg);   color: var(--text-muted); }
.ampel[data-ampel="gelb"]::before { background: var(--amp-yellow); }

/* --- Formular ----------------------------------------------- */

.formular { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 40rem; }
.feld { display: flex; flex-direction: column; gap: var(--sp-1); }
.feld label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
}
.feld small { font-size: var(--fs-xs); color: var(--text-muted); }
.feld input, .feld select, .feld textarea {
  height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}
.feld textarea { height: auto; min-height: 5rem; padding: var(--sp-2) var(--sp-3); resize: vertical; }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--lw-navy);
}
.formular__aktionen { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* --- Warnband über dem Inhalt -------------------------------- */

.band {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  background: var(--amp-yellow-bg);
  border-bottom: 1px solid var(--cd-warnung-linie);
  color: var(--amp-yellow-fg);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.band[data-tone="fehler"] { background: var(--amp-red-bg); border-color: var(--amp-red); color: var(--amp-red); }
.band[data-tone="info"]   { background: var(--lw-blue-pale); border-color: var(--lw-blue-light); color: var(--text); }
.band > span { flex: 1; }

/* --- Leerer Zustand -------------------------------------- */

.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 46rem;
  margin: var(--sp-8) auto;
  padding: var(--sp-7) var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.leer h1 { font-size: 1.75rem; }
.leer p { color: var(--text-muted); max-width: 34rem; }

/* --- Drawer (Seitenfenster) und Abdunklung ------------------ */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(14, 58, 93, 0.42);
}
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  width: min(560px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: drawer-in var(--dur) var(--ease);
}
@keyframes drawer-in {
  from { transform: translateX(1.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.drawer__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.drawer__head h2 { flex: 1; }
.drawer__body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-5); }

/* --- Meldungen (Toast) ------------------------------------- */

.toasts {
  position: fixed;
  left: 50%;
  bottom: var(--sp-5);
  z-index: 90;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--lw-navy);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  pointer-events: auto;
  animation: toast-in var(--dur) var(--ease);
}
.toast[data-tone="fehler"] { background: var(--lw-red); }
.toast[data-tone="erfolg"] { background: var(--amp-green); }
@keyframes toast-in {
  from { transform: translateY(0.75rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ============================================================
   5. Umbrüche: Leiste schrumpft zur Symbolleiste, dann Kopfleiste
   ============================================================ */

/* Unter 1000 px bleibt von der Leiste die Symbolspalte. Beschriftungen
   fallen weg, der Titel jedes Eintrags steht als Tooltip. */
@media (max-width: 1000px) {
  :root { --sidebar-w: var(--sidebar-w-rail); }
  .app-sidebar { padding: var(--sp-3) var(--sp-2); align-items: stretch; }
  .app-sidebar__logo { padding: var(--sp-1); }
  .app-sidebar__logo img { height: 22px; }
  .app-sidebar__produkt,
  .nav-gruppe__titel,
  .nav-item__label,
  .nav-item__count,
  .search-trigger span,
  .search-trigger kbd,
  .user-chip__meta,
  .app-sidebar__fassung { display: none; }
  .search-trigger { justify-content: center; padding: 0; }
  .nav-item { justify-content: center; padding: 0; }
  .app-sidebar__werkzeuge { flex-direction: column; align-items: center; }
  .user-chip { justify-content: center; padding: var(--sp-1); }
}

/* Unter 720 px liegt die Leiste als Kopfleiste über dem Inhalt, die
   Einträge laufen waagerecht und scrollen bei Bedarf. */
@media (max-width: 720px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar {
    position: sticky;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    overflow: visible;
  }
  .app-nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav__inner { flex-direction: row; gap: var(--sp-2); }
  .nav-gruppe { flex-direction: row; gap: 2px; }
  .nav-item { width: auto; min-height: var(--control-h-sm); padding: 0 var(--sp-2); }
  .search-trigger { width: var(--control-h); flex: none; }
  .app-sidebar__fuss { margin: 0; padding: 0; border: 0; flex-direction: row; align-items: center; }
  .app-sidebar__werkzeuge { flex-direction: row; }
  .user-chip { width: auto; }

  .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11 { grid-column: span 12; }
  /* Mit der Leiste als Kopfleiste scrollt wieder das Fenster. */
  .app-main { height: auto; }
  main { padding: var(--sp-3); overflow: visible; }
}