/* Ergänzungen zum gemeinsamen Tool-Stylesheet. Grundraster, Sidebar und
   Buttons kommen aus ../shared/style.css — hier steht nur, was der Rechner
   zusätzlich braucht: Kennzahlen, Meldungen, Tabelle und Skizzen. */

.print-only { display: none; }

/* Die Bühne zeigt hier Text statt eines Vollbild-Canvas und muss deshalb
   scrollen können. */
.stage-body {
  overflow-y: auto;
  padding: 22px;
  flex: 1;
}

.einheit {
  color: var(--text-2);
  font-size: 12px;
  padding-left: 6px;
  white-space: nowrap;
}

.einheit-select {
  min-width: 64px;
  margin-left: 6px;
}

.seg-sm button { font-size: 12px; padding: 5px 10px; }

/* ── Kennzahlen ───────────────────────────────────────────────────────── */

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.kennzahl {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.kennzahl.wichtig { border-color: rgba(240, 125, 0, .5); background: rgba(240, 125, 0, .1); }

.kennzahl dt {
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.kennzahl dd {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  margin: 0;
}

.kennzahl .neben {
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-weight: 400;
  display: block;
  margin-top: 4px;
}

/* ── Meldungen ────────────────────────────────────────────────────────── */

.meldung {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.meldung-fehler {
  background: rgba(255, 107, 107, .12);
  border: 1px solid rgba(255, 107, 107, .45);
  color: #ffb3b3;
}

.meldung-warnung {
  background: rgba(240, 125, 0, .12);
  border: 1px solid rgba(240, 125, 0, .45);
  color: #ffcb8a;
}

.meldung-hinweis {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .78);
}

/* ── Tabelle ──────────────────────────────────────────────────────────── */

.tabelle-wrap { overflow-x: auto; }

table.daten {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

table.daten th,
table.daten td {
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

table.daten th {
  color: rgba(255, 255, 255, .6);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
}

table.daten td { color: rgba(255, 255, 255, .88); }
table.daten th:first-child,
table.daten td:first-child { text-align: left; }

/* ── Skizzen ──────────────────────────────────────────────────────────── */

.skizze { margin: 0 0 26px; }

.skizze figcaption {
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.skizze svg { width: 100%; height: auto; display: block; }

/* Die Skizzen zeichnen ihre Konturen mit currentColor, damit dieselbe
   SVG-Ausgabe auf dunkler Bühne und auf weißem Papier funktioniert. */
#panel-skizze { color: #fff; }

.stage-canvas-wrap canvas { background: #000; }

@media (max-width: 900px) {
  .stage-body { padding: 16px; }
  .kennzahl dd { font-size: 19px; }
}