/* del_pipeline — gemeinsames Stylesheet.
   ------------------------------------------------------------------
   Gestaltet fuer EINE Taetigkeit: einen Stapel Lieferantenmails am Stueck
   durchgehen. Daraus folgen die Entscheidungen hier:

   - Dicht statt luftig. Wer 30 Mails prueft, will nicht scrollen.
   - Ein Blickanker je Karte (die Artikelnummer), alles andere ordnet sich
     unter. Ein Formular aus gleich grossen Feldern zwingt zum Lesen jedes
     einzelnen -- das kostet bei der 20. Mail spuerbar.
   - Farbe nur mit Bedeutung. Gruen/gelb/rot heissen etwas; alles andere
     bleibt grau, damit die Ampel nicht im Rauschen untergeht.
   - Tastatur sichtbar. Kuerzel, die niemand kennt, existieren nicht.

   Palette in Anlehnung an BuHa Review (shadcn/slate), damit die beiden
   internen Werkzeuge nicht wie Fremdkoerper nebeneinander stehen. */

:root {
  --text: #0f172a;
  --text-schwach: #64748b;
  --text-zart: #94a3b8;
  --linie: #e2e8f0;
  --linie-stark: #cbd5e1;
  --flaeche: #ffffff;
  --flaeche-2: #f8fafc;
  --grund: #f1f5f9;
  --akzent: #2563eb;
  --akzent-dunkel: #1d4ed8;
  --akzent-zart: #eff6ff;

  --gruen: #15803d;
  --gruen-bg: #f0fdf4;
  --gruen-linie: #bbf7d0;
  --gelb: #a16207;
  --gelb-bg: #fefce8;
  --gelb-linie: #fde68a;
  --rot: #b91c1c;
  --rot-bg: #fef2f2;
  --rot-linie: #fecaca;
  --orange: #c2410c;
  --orange-bg: #fff7ed;

  --radius: 10px;
  --radius-klein: 6px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .06);
  --schatten-hoch: 0 4px 12px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", -apple-system, system-ui, sans-serif;
  margin: 0;
  background: var(--grund);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Kopfzeile ---- */
header.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
header.kopf .marke {
  font-weight: 700; padding: 0.85rem 0; letter-spacing: -0.02em;
  display: flex; align-items: center; gap: 0.5rem;
}
header.kopf .marke .punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--akzent);
}
header.kopf nav { display: flex; gap: 0.15rem; margin-left: auto; }
header.kopf nav a {
  padding: 0.85rem 0.8rem;
  color: var(--text-schwach);
  border-bottom: 2px solid transparent;
  font-size: 0.9rem; font-weight: 500;
}
header.kopf nav a.aktiv { color: var(--text); border-bottom-color: var(--akzent); }
header.kopf nav a:hover { color: var(--text); text-decoration: none; }

main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; }
main.breit { max-width: 1500px; }

h1 { font-size: 1.35rem; margin: 0 0 0.3rem; letter-spacing: -0.02em; font-weight: 650; }
h2 { font-size: 1rem; margin: 2rem 0 0.7rem; letter-spacing: -0.01em; font-weight: 650; }
h3 { font-size: 0.75rem; margin: 0 0 0.5rem; color: var(--text-schwach);
     text-transform: uppercase; letter-spacing: 0.06em; font-weight: 650; }
p.unter { color: var(--text-schwach); margin: 0 0 1.25rem; font-size: 0.9rem; }

/* ---- Karten ---- */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 0.7rem;
  box-shadow: var(--schatten);
}
.karte.gruen { border-color: var(--gruen-linie); background: var(--gruen-bg); }
.karte.gelb  { border-color: var(--gelb-linie);  background: var(--gelb-bg); }
.karte.rot   { border-color: var(--rot-linie);   background: var(--rot-bg); }
.karte.blass { opacity: 0.5; }

/* Linke Farbkante statt Vollflaeche: Der Status bleibt erkennbar, ohne dass
   der Karteninhalt auf farbigem Grund schlechter lesbar wird. */
.karte.kante { border-left-width: 3px; }
.karte.kante-gruen  { border-left: 3px solid var(--gruen); }
.karte.kante-gelb   { border-left: 3px solid var(--gelb); }
.karte.kante-rot    { border-left: 3px solid var(--rot); }
.karte.kante-blau   { border-left: 3px solid var(--akzent); }

/* ---- Kennzahlen ---- */
.kennzahlen { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 0.75rem 1.1rem; min-width: 8.5rem;
  box-shadow: var(--schatten);
}
.kennzahl .wert { font-size: 1.6rem; font-weight: 650; letter-spacing: -0.03em;
                  font-variant-numeric: tabular-nums; line-height: 1.15; }
.kennzahl .titel { font-size: 0.72rem; color: var(--text-schwach);
                   text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.kennzahl.betont { border-color: var(--akzent); background: var(--akzent-zart); }
.kennzahl.betont .wert { color: var(--akzent-dunkel); }

/* ---- Marken ---- */
.marke-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: 0.73rem; font-weight: 600; white-space: nowrap;
  line-height: 1.5;
}
.chip-gruen { background: #dcfce7; color: var(--gruen); }
.chip-gelb  { background: #fef9c3; color: var(--gelb); }
.chip-rot   { background: #fee2e2; color: var(--rot); }
.chip-grau  { background: #f1f5f9; color: var(--text-schwach); }
.chip-orange{ background: #ffedd5; color: var(--orange); }
.chip-blau  { background: var(--akzent-zart); color: var(--akzent-dunkel); }

/* ---- Tabellen ---- */
table { width: 100%; border-collapse: collapse; background: var(--flaeche);
        border: 1px solid var(--linie); border-radius: var(--radius);
        overflow: hidden; box-shadow: var(--schatten); }
th { text-align: left; font-size: 0.72rem; text-transform: uppercase;
     letter-spacing: 0.06em; color: var(--text-schwach); font-weight: 650;
     padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--linie);
     background: var(--flaeche-2); }
td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--linie); font-size: 0.9rem;
     vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.anklickbar:hover { background: var(--flaeche-2); cursor: pointer; }

/* ---- Formulare ---- */
input[type=text], input[type=number], input[type=email], input[type=password],
select, textarea {
  padding: 0.42rem 0.6rem; border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  font: inherit; font-size: 0.9rem; background: var(--flaeche); color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .13);
}
input:disabled { background: var(--flaeche-2); color: var(--text-schwach); }
label.feld { display: block; font-size: 0.72rem; color: var(--text-schwach);
             margin-bottom: 0.22rem; font-weight: 600; letter-spacing: 0.02em; }
.feldgruppe { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: flex-end; }
.schalter { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.86rem;
            color: var(--text-schwach); cursor: pointer; user-select: none; }
.schalter:hover { color: var(--text); }
.schalter input { accent-color: var(--akzent); }

button {
  cursor: pointer; border: 1px solid transparent; border-radius: var(--radius-klein);
  padding: 0.44rem 0.9rem; font: inherit; font-size: 0.87rem; font-weight: 550;
  transition: background .12s, border-color .12s;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button.haupt { background: var(--akzent); color: #fff; }
button.haupt:hover:not(:disabled) { background: var(--akzent-dunkel); }
button.gruen { background: var(--gruen); color: #fff; }
button.gruen:hover:not(:disabled) { background: #166534; }
button.stumm { background: var(--flaeche); border-color: var(--linie-stark); color: var(--text); }
button.stumm:hover:not(:disabled) { background: var(--flaeche-2); }
button.gefahr { background: var(--flaeche); border-color: var(--rot-linie); color: var(--rot); }
button.gefahr:hover:not(:disabled) { background: var(--rot-bg); }
button.klein { padding: 0.28rem 0.6rem; font-size: 0.8rem; }

/* ---- Anmeldung ---- */
.anmeldung { max-width: 340px; margin: 12vh auto 0; }
.anmeldung h1 { font-size: 1.1rem; margin: 0 0 0.2rem; }
.anmeldung .hinweis { margin: 0 0 1.2rem; }
.anmeldung label.feld { margin-top: 0.8rem; }
.anmeldung input { width: 100%; box-sizing: border-box; }
.anmeldung button { width: 100%; margin-top: 1.1rem; }
header.kopf .benutzer { display: flex; align-items: center; gap: 0.5rem;
                        margin-left: 0.9rem; padding-left: 0.9rem;
                        border-left: 1px solid var(--linie);
                        font-size: 0.8rem; color: var(--text-schwach); }

/* ---- Prüf-Screen: zwei Spalten ---- */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
               gap: 1.15rem; align-items: start; }
@media (max-width: 1100px) { .zweispaltig { grid-template-columns: 1fr; } }

.mailtext {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1rem 1.15rem; white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem; line-height: 1.65; max-height: 74vh; overflow-y: auto;
  box-shadow: var(--schatten);
}
.mailtext .abschnitt { color: var(--akzent); font-weight: 700; }

/* Die Quellenspalte bleibt beim Scrollen stehen. `align-self: start` ist
   noetig, weil Grid-Kinder sonst auf volle Zeilenhoehe gestreckt werden --
   ein gestrecktes Element hat nichts zum Kleben. `max-height` plus
   `overflow` sorgen dafuer, dass eine lange Quelle in sich scrollt statt die
   ganze Spalte aus dem Bild zu schieben. */
/* Nur in der zweispaltigen Ansicht. Einspaltig stehen Quelle und Positionen
   untereinander -- eine klebende Quelle wuerde dort die halbe Hoehe belegen,
   waehrend man an ihr vorbeiscrollt. */
@media (min-width: 1101px) {
  .spalte-fest {
    position: sticky;
    top: 4.2rem;
    align-self: start;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
    /* Platz fuer die eigene Bildlaufleiste, damit sie nichts ueberdeckt */
    padding-right: .25rem;
  }
}

/* ---- Zitat ---- */
.zitat {
  border-left: 3px solid var(--linie-stark); padding: 0.4rem 0.7rem; margin: 0.5rem 0 0;
  color: #475569; font-size: 0.82rem; background: var(--flaeche-2);
  font-family: ui-monospace, Consolas, monospace; white-space: pre-wrap;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
}

/* ---- Ablagefläche ---- */
#dropzone {
  border: 2px dashed var(--linie-stark); border-radius: var(--radius); padding: 2.5rem 1rem;
  text-align: center; color: var(--text-schwach); cursor: pointer;
  background: var(--flaeche); transition: background .15s, border-color .15s;
}
#dropzone.hover { background: var(--akzent-zart); border-color: var(--akzent); color: var(--akzent); }
#dropzone input { display: none; }

.hinweis { font-size: 0.84rem; color: var(--text-schwach); }
.warn { color: var(--orange); }
.fehlerhinweis { color: var(--rot); }
.rechts { text-align: right; }
.zahl { font-variant-numeric: tabular-nums; }
.leer { color: var(--text-schwach); font-size: 0.9rem; padding: 1.25rem 0; }
.trenner { border: none; border-top: 1px solid var(--linie); margin: 1.5rem 0; }

/* ---- Quellen-Umschalter im Prüf-Screen ---- */
.ansicht-kopf { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
                margin-bottom:.6rem; }
.umschalter { display:inline-flex; background:var(--flaeche); border:1px solid var(--linie);
              border-radius:var(--radius-klein); padding:2px; gap:2px; flex-wrap:wrap;
              box-shadow: var(--schatten); }
.umschalter button {
  background:transparent; border:none; border-radius:4px; padding:.3rem .65rem;
  font-size:.83rem; color:var(--text-schwach); white-space:nowrap; font-weight:550;
}
.umschalter button:hover { background:var(--flaeche-2); color:var(--text); }
.umschalter button.aktiv { background:var(--akzent); color:#fff; }
.umschalter button .taste {
  font-size:.68rem; opacity:.6; margin-left:.3rem; font-variant-numeric: tabular-nums;
}
.datei-vorschau { width:100%; height:74vh; border:1px solid var(--linie);
                  border-radius:var(--radius); background:var(--flaeche); }

/* ---- Tastenkürzel sichtbar machen ---- */
kbd {
  display: inline-block; padding: 0.05rem 0.35rem; font-size: 0.72rem;
  font-family: ui-monospace, Consolas, monospace; line-height: 1.5;
  color: var(--text-schwach); background: var(--flaeche-2);
  border: 1px solid var(--linie-stark); border-bottom-width: 2px;
  border-radius: 4px; white-space: nowrap;
}

/* ---- Prüfkarte: die Artikelnummer ist der Blickanker ---- */
.pos-kopf {
  display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.pos-nummer {
  font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em;
  font-family: ui-monospace, Consolas, monospace;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
  padding: 0.3rem 0.55rem; width: 10.5rem; background: var(--flaeche);
}
.pos-nummer:focus { border-color: var(--akzent); }
.pos-name {
  font-size: 0.92rem; color: var(--text); font-weight: 550;
  align-self: center; flex: 1 1 12rem; min-width: 0;
}
.pos-name .such-status { font-size: 0.78rem; color: var(--text-zart); font-weight: 400; }
.pos-name .such-status.fehler { color: var(--rot); }
.pos-preis {
  margin-left: auto; align-self: center; text-align: right;
  font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pos-preis .waehrung { font-size: 0.8rem; color: var(--text-schwach); font-weight: 550; }
.pos-preis .eur-hinweis { display:block; font-size:0.74rem; color:var(--text-schwach);
                          font-weight: 500; }

/* Staffel-Kennzeichnung: mehrere Zeilen zu einer Position sind eine Staffel,
   kein Doppelfund. Ohne diese Marke wuerde der Pruefer sie verwerfen. */
.staffel-marke {
  background: #ede9fe; color: #6d28d9; font-variant-numeric: tabular-nums;
}
.karte.staffel-folge { margin-top: -0.35rem; border-top-left-radius: 0;
                       border-top-right-radius: 0; }

/* ---- Fortschrittsbalken beim Stapel-Import ---- */
.fortschritt {
  height: 6px; background: var(--linie); border-radius: 999px; overflow: hidden;
  margin: 0.75rem 0 0.5rem;
}
.fortschritt > span {
  display: block; height: 100%; background: var(--akzent); width: 0;
  transition: width .2s ease;
}
.import-zeile {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0;
  border-bottom: 1px solid var(--linie); font-size: 0.87rem;
}
.import-zeile:last-child { border-bottom: none; }
.import-zeile .name { flex: 1 1 auto; min-width: 0; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.import-zeile .status { flex: 0 0 auto; }
.spinner {
  width: 13px; height: 13px; border: 2px solid var(--linie);
  border-top-color: var(--akzent); border-radius: 50%;
  animation: dreh .7s linear infinite; flex: 0 0 auto;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---- Fußleiste im Prüf-Screen: Aktionen immer erreichbar ---- */
.aktionsleiste {
  position: sticky; bottom: 0; z-index: 15;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 0.7rem 1rem; margin-top: 1rem;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  box-shadow: var(--schatten-hoch);
}
.aktionsleiste .fuellung { margin-left: auto; }

/* ---- Detailzeile unter den Feldern ---- */
.detailzeile {
  display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem;
  color: var(--text-schwach); margin-top: 0.55rem;
}
.detailzeile b { color: var(--text); font-weight: 600; }

/* ---- Vergleichsmatrix ---- */
table.matrix td { vertical-align: top; }
table.matrix .zelle-beste { background: var(--gruen-bg); }
table.matrix tr.matrix-summe td {
  border-top: 2px solid var(--linie-stark); background: var(--flaeche-2);
}

/* ==================================================================
   Angebots-Cockpit (02.09.2026)
   ------------------------------------------------------------------
   Moritz: "Ich will auf einen Blick sehen, bei welchem Bauteil bei
   welchem Lieferanten am besten zu beziehen ist" -- und: es wird nach
   und nach mehr von Agenten uebernommen, Menschen sollen nur noch mit
   wenigen Clicks freigeben oder korrigieren.

   Daraus folgen drei Regeln fuer alles hier unten:
   1. Die ganze Zelle ist die Schaltflaeche. Wer 15 Positionen zuordnet,
      trifft kein 14-px-Radio.
   2. Zustand wird gezeigt, nicht erklaert. Gewaehlt/freigegeben/gerechnet
      sind drei verschiedene Dinge und muessen drei verschiedene Zeichen
      haben -- sonst wirkt "ausgewaehlt" wie "erledigt".
   3. Farbe nur mit Bedeutung (Regel des Hauses). Die Margenfarben sind
      deshalb die einzigen zusaetzlichen Farbtoene.
   ================================================================== */

/* ---- Margen-Bänder: eine Farbe je Band, an einer Stelle definiert ---- */
:root {
  --marge-stark: #0369a1;      /* über dem Faktor-Korridor */
  --marge-stark-bg: #e0f2fe;
  --marge-normal: #15803d;
  --marge-normal-bg: #f0fdf4;
  --marge-duenn: #b45309;
  --marge-duenn-bg: #fff7ed;
  --marge-kritisch: #b91c1c;
  --marge-kritisch-bg: #fef2f2;
  --marge-verlust: #7f1d1d;
  --marge-verlust-bg: #fee2e2;
  --marge-unbekannt: #94a3b8;
  --marge-unbekannt-bg: #f1f5f9;
}
.m-stark     { color: var(--marge-stark); }
.m-normal    { color: var(--marge-normal); }
.m-duenn     { color: var(--marge-duenn); }
.m-kritisch  { color: var(--marge-kritisch); }
.m-verlust   { color: var(--marge-verlust); }
.m-unbekannt { color: var(--marge-unbekannt); }
.mb-stark     { background: var(--marge-stark-bg);     color: var(--marge-stark); }
.mb-normal    { background: var(--marge-normal-bg);    color: var(--marge-normal); }
.mb-duenn     { background: var(--marge-duenn-bg);     color: var(--marge-duenn); }
.mb-kritisch  { background: var(--marge-kritisch-bg);  color: var(--marge-kritisch); }
.mb-verlust   { background: var(--marge-verlust-bg);   color: var(--marge-verlust); }
.mb-unbekannt { background: var(--marge-unbekannt-bg); color: var(--marge-unbekannt); }

/* ---- Cockpit-Kopf: Tacho links, Kennzahlen rechts ---- */
.cockpit {
  display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: .9rem;
  box-shadow: var(--schatten);
}
.tacho { flex: 0 0 auto; text-align: center; }
.tacho svg { display: block; }
.tacho .ablesung {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; margin-top: -1.5rem;
}
.tacho .band { font-size: .74rem; font-weight: 650; text-transform: uppercase;
               letter-spacing: .06em; margin-top: .15rem; }
.cockpit-zahlen { display: flex; gap: 1.6rem; flex-wrap: wrap; flex: 1 1 18rem; }
.cockpit-zahlen .posten .titel {
  font-size: .69rem; color: var(--text-schwach); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 650;
}
.cockpit-zahlen .posten .wert {
  font-size: 1.15rem; font-weight: 650; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cockpit-zahlen .posten .fussnote { font-size: .76rem; color: var(--text-schwach); }

/* ---- Sicht-Umschalter (Artikel / Lieferanten) ---- */
.sichtleiste { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
               margin: 1.1rem 0 .6rem; }
.sichtleiste h2 { margin: 0; }
.sicht { display: none; }
.sicht.aktiv { display: block; }

/* ---- Proben: was die Maschine belegt hat ----
   Muster aus BuHa Review ("Der Vorgangsplan in Farbe"): je Zeile eine Handvoll
   Chips, und die Zeile traegt die Farbe der schlechtesten Probe. Die Regel von
   dort gilt hier genauso — GRUEN HEISST: die Probe hat es belegt, nicht: jemand
   hat hingesehen. Deshalb gibt es kein "vermutlich in Ordnung". */
.proben { display: inline-flex; gap: .2rem; align-items: center; }
.probe {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  background: var(--linie-stark);
}
.probe.gut     { background: var(--gruen); }
.probe.warnung { background: #eab308; }
.probe.fehler  { background: var(--rot); }
.urteil {
  font-size: .74rem; font-weight: 650; letter-spacing: .01em; margin-left: .35rem;
  text-transform: uppercase;
}
.urteil.gut     { color: var(--gruen); }
.urteil.warnung { color: var(--gelb); }
.urteil.fehler  { color: var(--rot); }
.urteil.leer    { color: var(--text-zart); }

/* Die Zeile traegt die Farbe ihres massgeblichen Angebots — als schmale Kante,
   nicht als Vollflaeche: Der Inhalt bleibt so gleich gut lesbar wie in den
   unauffaelligen Zeilen (dieselbe Entscheidung wie in der Pruef-Tabelle). */
table.matrix tr.zustand-warnung td.pos-spalte { box-shadow: inset 3px 0 0 #eab308; }
table.matrix tr.zustand-fehler  td.pos-spalte { box-shadow: inset 3px 0 0 var(--rot); }
table.matrix tr.zustand-gut     td.pos-spalte { box-shadow: inset 3px 0 0 var(--gruen); }

/* ---- Matrix mit Auswahl ---- */
table.matrix.waehlbar td.wahlzelle { padding: 0; vertical-align: stretch; }
table.matrix.waehlbar td { padding: .25rem .3rem; }
table.matrix.waehlbar th { padding: .5rem .6rem; }
.wahl {
  display: block; padding: .4rem .55rem; cursor: pointer; height: 100%;
  border: 2px solid transparent; border-radius: var(--radius-klein);
  transition: background .1s, border-color .1s;
}
.wahl input { position: absolute; opacity: 0; pointer-events: none; }
.wahl:hover { background: var(--akzent-zart); }
.wahl.leer { cursor: default; }
.wahl.leer:hover { background: transparent; }
/* Gewaehlt: kraeftiger Rahmen statt Vollflaeche -- die Warnzeichen in der
   Zelle muessen lesbar bleiben. */
.wahl.gewaehlt { border-color: var(--akzent); background: var(--akzent-zart); }
.wahl.gewaehlt .wahlmarke { opacity: 1; transform: scale(1); }
.wahlmarke {
  float: right; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--akzent); color: #fff; font-size: .72rem; line-height: 1.1rem;
  text-align: center; opacity: 0; transform: scale(.6); transition: .12s;
  margin-left: .3rem;
}
/* Zwei Zeilen je Zelle, mehr nicht. Vorher standen dort bis zu sechs (Preis,
   Lieferzeit, Freigabe-Chip, Staffelliste, bis zu drei Warntexte) — bei 5
   Lieferanten war das eine Textwand statt eines Vergleichs. Was wegfaellt, ist
   nicht verschwunden: Die Staffeln stehen im Titel, die Warnungen in den
   Proben der Zeile, der Freigabestand in der Aktionsleiste. */
.zellpreis { font-weight: 600; font-variant-numeric: tabular-nums; font-size: .92rem;
             display: flex; align-items: baseline; gap: .25rem; }
.zellpreis .einheit { font-weight: 500; font-size: .74rem; color: var(--text-zart); }
.zellzeile { display: flex; gap: .3rem; align-items: center;
             font-size: .74rem; color: var(--text-schwach); margin-top: .1rem;
             white-space: nowrap; }
.bestmarke { font-size: .7rem; font-weight: 700; line-height: 1.4;
             padding: 0 .25rem; border-radius: 3px; }
.bestmarke.preis { background: #dcfce7; color: var(--gruen); }
.bestmarke.zeit  { background: var(--akzent-zart); color: var(--akzent-dunkel); }
/* Warnzeichen statt Warntext in der Zelle — der Text steht im Titel und in
   den Proben der Zeile. */
.zellwarnung { color: #ca8a04; cursor: help; font-size: .8rem; }

/* Positionsspalte: der Blickanker der Zeile, klebt beim Querscrollen. */
table.matrix th.pos-spalte, table.matrix td.pos-spalte {
  position: sticky; left: 0; z-index: 2; background: var(--flaeche);
  border-right: 1px solid var(--linie);
}
table.matrix th.pos-spalte { background: var(--flaeche-2); z-index: 3; }
table.matrix tr.matrix-summe td.pos-spalte { background: var(--flaeche-2); }

/* ---- Lieferantensicht ---- */
.lieferant-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: .8rem;
  overflow: hidden;
}
.lieferant-karte.unvollstaendig { border-style: dashed; }
.lieferant-kopf {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--linie);
  background: var(--flaeche-2);
}
.lieferant-kopf .name { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.lieferant-kopf .kennwert { text-align: right; }
.lieferant-kopf .kennwert .titel {
  font-size: .66rem; color: var(--text-schwach); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 650;
}
.lieferant-kopf .kennwert .wert {
  font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.lieferant-posten { padding: .2rem 0; }
.lieferant-posten .zeile {
  display: flex; gap: .7rem; align-items: baseline; padding: .3rem 1.1rem;
  font-size: .87rem; border-bottom: 1px solid var(--flaeche-2);
}
.lieferant-posten .zeile:last-child { border-bottom: none; }
.lieferant-posten .zeile .artikel {
  font-family: ui-monospace, Consolas, monospace; font-size: .82rem;
  flex: 0 0 7rem; color: var(--text-schwach);
}
.lieferant-posten .zeile .bez { flex: 1 1 8rem; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.lieferant-posten .zeile .preis { font-variant-numeric: tabular-nums; font-weight: 600;
  flex: 0 0 auto; }
.lieferant-posten .zeile .delta { font-size: .78rem; flex: 0 0 6.5rem; text-align: right; }
.lieferant-posten .zeile.ist-gewaehlt { background: var(--akzent-zart); }

/* Fortschrittsbalken "x von y Positionen angeboten" */
.abdeckung { height: 4px; background: var(--linie); border-radius: 999px;
             overflow: hidden; width: 100%; margin-top: .25rem; }
.abdeckung > span { display: block; height: 100%; background: var(--akzent); }
.abdeckung.voll > span { background: var(--gruen); }

/* ---- Sterne-Bewertung ---- */
.sterne { display: inline-flex; gap: .05rem; }
.sterne button {
  background: none; border: none; padding: 0 .05rem; font-size: .95rem;
  line-height: 1; color: var(--linie-stark); cursor: pointer;
}
.sterne button.an { color: #f59e0b; }
.sterne button:hover { color: #f59e0b; }

/* ---- Aktionsleiste der Auswahl ---- */
.auswahlleiste .stand { font-variant-numeric: tabular-nums; }
.auswahlleiste .stand b { font-size: 1rem; }

/* ---- Margen-Balken an der Kalkulation ---- */
.margenbalken {
  position: relative; height: 6px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(to right,
    var(--marge-kritisch) 0%, var(--marge-kritisch) 41.6%,
    var(--marge-duenn) 41.6%, var(--marge-duenn) 58.3%,
    var(--marge-normal) 58.3%, var(--marge-normal) 75%,
    var(--marge-stark) 75%, var(--marge-stark) 100%);
  opacity: .35; min-width: 7rem;
}
.margenbalken .zeiger {
  position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px;
  background: var(--text); transform: translateX(-50%);
}
.margenzelle { display: flex; flex-direction: column; gap: .25rem; min-width: 8rem; }

/* ---- Baugruppen-Schalter ----
   Sitzt im Cockpit, nicht in den Einstellungen: Ob Teile verheiratet werden,
   entscheidet, wie die ganze Seite zu lesen ist. */
.baugruppe {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .4rem .7rem; border-radius: var(--radius-klein);
  border: 1px solid var(--linie); background: var(--flaeche-2);
  font-size: .84rem; user-select: none;
}
.baugruppe:hover { border-color: var(--linie-stark); }
.baugruppe input { accent-color: var(--akzent); width: 15px; height: 15px; }
.baugruppe.an { border-color: var(--akzent); background: var(--akzent-zart);
                color: var(--akzent-dunkel); font-weight: 600; }
.baugruppe .erklaerung { font-weight: 400; color: var(--text-schwach); }
.baugruppe.an .erklaerung { color: var(--akzent-dunkel); opacity: .8; }

/* Warnung, wenn die Auswahl eine Baugruppe auf mehrere Lieferanten verteilt.
   Sie erscheint in der Aktionsleiste, dort wo entschieden wird — nicht oben,
   wo sie beim Scrollen aus dem Blick geraet. */
.paketwarnung {
  display: none; align-items: center; gap: .4rem; font-size: .82rem;
  color: var(--rot); font-weight: 600;
}
.paketwarnung.sichtbar { display: inline-flex; }

/* ---- Legende ---- */
.legende {
  display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center;
  font-size: .76rem; color: var(--text-schwach); margin-top: .5rem;
  padding: .45rem .7rem; background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--radius-klein);
}
.legende b { color: var(--text-schwach); font-weight: 650; }

/* ---- Detailebene: standardmaessig zu ----
   Bei 15 Positionen ist die Detailebene laenger als der Rest der Seite
   zusammen. Wer im Takt freigibt, braucht sie nicht — wer korrigiert, klappt
   sie auf. */
details.detailebene > summary {
  cursor: pointer; font-size: .9rem; font-weight: 600; padding: .6rem 0;
  color: var(--text-schwach); list-style-position: outside;
}
details.detailebene > summary:hover { color: var(--text); }
details.detailebene[open] > summary { color: var(--text); }

/* ==================================================================
   Kommandozentrale (04.09.2026)
   ------------------------------------------------------------------
   Moritz: "eine Art Kommandozentrale, über die der User direkt sehen
   kann, welche Angebote noch erarbeitet werden müssen."

   Eine Zeile je Vorgang, und die Zeile beantwortet drei Fragen in
   dieser Reihenfolge: Wie weit ist er? Was ist als Nächstes zu tun?
   Wie viel steht auf dem Spiel? Alles andere ist einen Klick entfernt.
   ================================================================== */

/* ---- Lage-Streifen ---- */
.lage { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
.lage .feld {
  flex: 1 1 8rem; background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-stark);
  border-radius: var(--radius); padding: .6rem .85rem; box-shadow: var(--schatten);
}
.lage .feld.klaeren { border-left-color: var(--rot); }
.lage .feld.handeln { border-left-color: var(--akzent); }
.lage .feld.warten  { border-left-color: var(--gelb); }
.lage .feld.wert    { border-left-color: var(--gruen); }
.lage .zahl-gross {
  font-size: 1.5rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.lage .beschriftung {
  font-size: .69rem; color: var(--text-schwach); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 650;
}
.lage .feld.klaeren .zahl-gross { color: var(--rot); }
.lage .feld.handeln .zahl-gross { color: var(--akzent-dunkel); }

/* ---- Arbeitsliste ---- */
table.arbeit td { vertical-align: middle; padding: .5rem .8rem; }
table.arbeit tr.rang-klaeren td:first-child { box-shadow: inset 3px 0 0 var(--rot); }
table.arbeit tr.rang-handeln td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
table.arbeit tr.rang-warten  td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }
table.arbeit tr.rang-fertig  td:first-child { box-shadow: inset 3px 0 0 var(--gruen); }
table.arbeit tr.rang-fertig  { color: var(--text-schwach); }
table.arbeit .vorgang { font-weight: 650; letter-spacing: -.01em; }

/* Vier Stufen als Balken: Antworten -> Freigabe -> Kalkulation -> ERP.
   Muster wie bei den Proben — wer 20 Vorgänge überfliegt, liest keine
   Zahlen, sondern Formen. */
.stufen { display: inline-flex; gap: 3px; align-items: center; }
.stufe {
  width: 26px; height: 5px; border-radius: 2px; background: var(--linie);
  display: inline-block;
}
.stufe.begonnen { background: var(--gelb-linie); }
.stufe.fertig   { background: var(--gruen); }
/* Beschriftung unter die Balken, nicht daneben: Nebeneinander bricht die
   Spalte bei "Kalkulation 0/12" um, und eine umbrechende Zeile in einer
   Liste, die man überfliegt, kostet mehr als der gesparte Platz. */
.stufen-text { display: block; font-size: .72rem; color: var(--text-zart);
               margin-top: .2rem; white-space: nowrap;
               font-variant-numeric: tabular-nums; }

/* Der nächste Schritt: Verb + Sache. Das Verb trägt die Farbe des Rangs. */
.schritt { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.schritt .verb {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .1rem .4rem; border-radius: 3px;
  white-space: nowrap;
}
.verb-klaeren    { background: #fee2e2; color: var(--rot); }
.verb-handeln    { background: var(--akzent-zart); color: var(--akzent-dunkel); }
.verb-warten     { background: #fef9c3; color: var(--gelb); }
.verb-fertig     { background: #dcfce7; color: var(--gruen); }
.schritt .sache { font-size: .87rem; }

/* ---- Import: schmal, aber immer erreichbar ---- */
.eingang { display: flex; gap: .6rem; align-items: stretch; flex-wrap: wrap;
           margin-bottom: 1rem; }
.eingang #dropzone { flex: 1 1 20rem; padding: 1.1rem 1rem; }
.eingang .einfuegen { flex: 1 1 16rem; }

/* Auf schmalen Fenstern bleibt die Matrix scrollbar, die Karten stapeln. */
@media (max-width: 780px) {
  .cockpit-zahlen { gap: 1rem; }
  .lieferant-kopf { gap: .6rem; }
  .lage .feld { flex: 1 1 6rem; }
}

/* ---- Prüf-Tabelle: eine Zeile je Position ----
   Ab vier Positionen ist die Kartenliste nicht mehr überblickbar. Die Tabelle
   ist bewusst eng gesetzt: Zwölf Positionen sollen ohne Scrollen lesbar sein,
   und die Eingabefelder liegen direkt in den Zellen statt in Formularblöcken
   darunter. */
table.pruef-tabelle { font-size: .85rem; }
table.pruef-tabelle th { padding: .45rem .5rem; font-size: .68rem; }
table.pruef-tabelle td { padding: .35rem .5rem; border-bottom: none; }
table.pruef-tabelle input[type=text] { padding: .28rem .4rem; font-size: .85rem; }
table.pruef-tabelle input.rechts { text-align: right; }

/* Die Kommentarzeile gehört optisch zur Zeile darüber, nicht zur nächsten. */
table.pruef-tabelle tr.kommentarzeile td { padding-top: 0; padding-bottom: .55rem;
  border-bottom: 1px solid var(--linie); }
table.pruef-tabelle tr.zitatzeile td { padding-top: 0; padding-bottom: .5rem;
  border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }

/* Auffällige Zeilen bekommen eine Kante statt einer Vollfläche — der Inhalt
   bleibt so gleich gut lesbar wie in den unauffälligen Zeilen. */
table.pruef-tabelle tr.zeile-warn td:first-child { box-shadow: inset 3px 0 0 var(--gelb); }

table.pruef-tabelle .zitat-schalter { font-size: .72rem; margin-left: .3rem; }
table.pruef-tabelle .schalter { gap: .15rem; margin-right: .3rem; }