/* ============================================================================
   ACQUA MORELLI Dosen — Gestaltung nach dem MBG UI-Kit.

   Die Farb-, Radius- und Abstandswerte sind aus dem Design-Kit der
   Schwester-Apps übernommen (shadcn/ui, Stil radix-nova — siehe
   klyro-budget/app/globals.css und mbg-ami/src/app/globals.css),
   damit diese Anwendung im MBG Workspace gleich aussieht.

   Übernommen, nicht nachempfunden:
   - Grund grau (#F5F5F7), Karten weiß
   - MBG-Rot als --primary, im dunklen Modus leicht aufgehellt
   - Eingabefelder liegen immer auf Kartenweiß, auch auf grauem Grund
   - Tabellenkopf dezent abgesetzt (--table-head)
   ========================================================================== */

/* --- Tokens aus dem Kit --------------------------------------------------- */
:root {
  --background: oklch(0.971 0.003 286);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary: oklch(0.552 0.222 20.2);          /* MBG-Rot #D50036 */
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.637 0.237 25.331);
  --border: oklch(0.935 0.004 286);
  --input: oklch(0.935 0.004 286);
  --ring: oklch(0.708 0 0);

  --plan: oklch(0.556 0 0);
  --committed: oklch(0.769 0.188 70.08);
  --ist: oklch(0.685 0.169 237.323);
  --forecast: oklch(0.606 0.25 292.717);
  --positiv: oklch(0.696 0.17 162.48);
  --negativ: oklch(0.637 0.237 25.331);

  --chart-1: var(--plan);
  --chart-2: var(--committed);
  --chart-3: var(--ist);
  --chart-4: var(--forecast);
  --chart-5: var(--positiv);

  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);

  --table-head: color-mix(in oklab, var(--muted) 60%, var(--card));

  --font-sans: 'Geist', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Consolas', monospace;

  --schatten-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
  --schatten: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --primary: oklch(0.62 0.21 20.2);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
  }
}

:root[data-theme='dark'] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --primary: oklch(0.62 0.21 20.2);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

/* --- Grundgerüst ---------------------------------------------------------- */
* { box-sizing: border-box; }

html { font-family: var(--font-sans); }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

.leise { color: var(--muted-foreground); }
.zahl  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Kopfbereich ---------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.kopf-innen {
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.kopf-logo { height: 30px; width: auto; display: block; }

.kopf-titel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kopf-titel h1 { font-size: 15px; }
.kopf-titel p  { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* --- Reiter (tabs im Kit-Stil) -------------------------------------------- */
.reiterleiste {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 12px;
}

.reiter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--muted);
  border-radius: var(--radius-lg);
  padding: 3px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }

.reiter button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.reiter button:hover { color: var(--foreground); }
.reiter button[aria-selected='true'] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--schatten-sm);
}
.reiter button .punkt {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--muted-foreground);
  opacity: .5;
  margin-left: 7px;
  vertical-align: 1px;
}

/* --- Inhaltsbereich ------------------------------------------------------- */
.inhalt {
  max-width: 1600px;
  margin: 0 auto;
  padding: 4px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tafel[hidden] { display: none; }
.tafel { display: flex; flex-direction: column; gap: 16px; }

/* --- Karte ---------------------------------------------------------------- */
.karte {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--schatten-sm);
  overflow: hidden;
}

.karte-kopf {
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.karte-kopf h2 { font-size: 15px; }
.karte-kopf p  { margin: 2px 0 0; font-size: 12.5px; color: var(--muted-foreground); }
.karte-kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.karte-rumpf { padding: 0 20px 20px; }
.karte-rumpf.ohne-rand { padding: 0; }

/* --- Schaltflächen -------------------------------------------------------- */
.knopf {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.knopf:hover { background: var(--accent); }
.knopf:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.knopf.haupt {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.knopf.haupt:hover { background: color-mix(in oklab, var(--primary) 90%, black); }

.knopf.leise { border-color: transparent; background: transparent; color: var(--muted-foreground); }
.knopf.leise:hover { background: var(--accent); color: var(--foreground); }

/* Umschaltgruppe (toggle-group) */
.gruppe {
  display: inline-flex;
  background: var(--muted);
  border-radius: var(--radius-md);
  padding: 2px;
  gap: 2px;
}
.gruppe button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.gruppe button:hover { color: var(--foreground); }
.gruppe button[aria-pressed='true'] {
  background: var(--card);
  color: var(--foreground);
  box-shadow: var(--schatten-sm);
}

/* --- Eingabefelder -------------------------------------------------------- */
/* Kit-Regel: Felder liegen immer auf Kartenweiß, auch auf grauem Grund. */
.feld {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font: inherit;
  font-size: 13.5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}
.feld:hover { border-color: var(--ring); }
.feld:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
}

.feld-zeile { display: flex; flex-direction: column; gap: 6px; }
.feld-zeile label { font-size: 12.5px; font-weight: 500; }
.feld-zeile .hinweis { font-size: 11.5px; color: var(--muted-foreground); }

/* Im Raster müssen Beschriftung, Feld und Hinweis über ALLE Spalten hinweg
   auf einer Linie liegen. Ohne das rutscht ein Feld nach unten, sobald seine
   Beschriftung zweizeilig umbricht — nachgemessen am 29.09.2026: 19 px
   Versatz zwischen „Anzahl Gebiete" und „Neue Distributionspunkte je Gebiet
   und Monat".

   `subgrid` übernimmt dafür die Zeilen des Rasters. Jedes Feld belegt drei
   Zeilen: Beschriftung, Eingabe, Hinweis. Fehlt der Hinweis, bleibt die
   dritte Zeile leer — die Ausrichtung stimmt trotzdem. */
.raster > .feld-zeile {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 6px;
  align-content: start;
}

/* Rückfall für Browser ohne subgrid: Die Beschriftung bekommt die Höhe von
   zwei Zeilen, damit einzeilige und zweizeilige Beschriftungen gleich hoch
   sind. Das deckt den häufigen Fall ab, wenn auch nicht jeden. */
@supports not (grid-template-rows: subgrid) {
  .raster > .feld-zeile { display: flex; }
  .raster > .feld-zeile label {
    min-height: calc(2 * 1.5em);
    display: flex;
    align-items: flex-start;
  }
}

/* Feld in einer Tabellenzelle — flach, ohne eigenen Rahmen */
.feld.flach {
  height: 30px;
  border-color: transparent;
  background: transparent;
  padding: 0 6px;
}
.feld.flach:hover { border-color: var(--input); background: var(--card); }
.feld.flach:focus { border-color: var(--primary); background: var(--card); }

/* Gesperrt (Datenbankbetrieb ohne Recht auf diesen Bereich): lesbar, aber
   erkennbar nicht änderbar. */
.feld:disabled,
.feld.flach:disabled {
  color: var(--muted-foreground);
  background: var(--muted);
  border-color: transparent;
  cursor: not-allowed;
}

.kopf-rechts .benutzer { font-size: 12.5px; white-space: nowrap; }

/* --- Tabellen ------------------------------------------------------------- */
.tabelle-huelle { width: 100%; overflow-x: auto; }

table.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.tabelle thead th {
  background: var(--table-head);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted-foreground);
  text-align: right;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.tabelle thead th:first-child { text-align: left; padding-left: 20px; }
table.tabelle thead th:last-child  { padding-right: 20px; }

table.tabelle tbody td {
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.tabelle tbody td:first-child {
  text-align: left;
  padding-left: 20px;
  font-family: var(--font-sans);
  white-space: normal;
}
table.tabelle tbody td:last-child { padding-right: 20px; }
table.tabelle tbody tr:last-child td { border-bottom: 0; }
table.tabelle tbody tr:hover td { background: color-mix(in oklab, var(--muted) 45%, transparent); }

/* --- Kalkulationstabelle --------------------------------------------------
   Wert und Prozentsatz einer Sorte gehören zusammen: feste Spaltenbreiten,
   damit sie bei breitem Fenster nicht auseinanderlaufen, und eine dezente
   Linie vor jeder Sortengruppe.
   ------------------------------------------------------------------------- */
table.kalkulation .spalte-wert { width: 13%; }
table.kalkulation .spalte-pct  { width: 8%; }

table.kalkulation .gruppenanfang { border-left: 1px solid var(--border); }

/* Nur-Lese-Wert und Eingabefeld haben dieselbe Box — sonst fluchten die
   Zahlen einer Spalte nicht und die Zeilen werden unterschiedlich hoch.
   Beide: 6px Zellenabstand + 1px Rahmen + 6px Innenabstand = 13px. */
table.tabelle tbody td.wert { padding: 4px 6px; }

table.tabelle tbody td.wert > .zahl-fest {
  display: block;
  height: 30px;
  line-height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
}

/* Zeilenarten der Kalkulation */
tr.zwischensumme td { font-weight: 600; background: color-mix(in oklab, var(--muted) 35%, transparent); }
tr.ergebnis td {
  font-weight: 700;
  background: color-mix(in oklab, var(--primary) 7%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
}
tr.abgeleitet td:first-child { color: var(--muted-foreground); }

td.prozent { color: var(--muted-foreground); font-size: 12px; }

.zeilen-label { display: inline-flex; align-items: center; gap: 6px; }

/* Kleiner Hinweis am Zeilenkopf */
.merk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  flex: none;
}

/* --- Kennzahlenfeld ------------------------------------------------------- */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.kennzahl {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.kennzahl .titel { font-size: 12px; color: var(--muted-foreground); }
.kennzahl .wert {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.kennzahl .zusatz { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }

/* --- Abzeichen ------------------------------------------------------------ */
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  white-space: nowrap;
}
.abzeichen.offen {
  border-color: color-mix(in oklab, var(--committed) 40%, transparent);
  background: color-mix(in oklab, var(--committed) 12%, transparent);
  color: color-mix(in oklab, var(--committed) 70%, var(--foreground));
}

/* --- Hinweiskasten -------------------------------------------------------- */
.hinweiskasten {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 45%, var(--card));
  font-size: 13px;
}
.hinweiskasten .zeichen { font-size: 15px; line-height: 1.2; flex: none; }
.hinweiskasten p { margin: 0 0 6px; }
.hinweiskasten p:last-child { margin-bottom: 0; }
.hinweiskasten code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--muted);
  padding: 1px 5px;
  border-radius: 4px;
}

/* --- Eingaberaster --------------------------------------------------------
   Feste Spaltenbreite statt 1fr: Sonst zöge ein einzelnes Feld (etwa die
   Zahl der Vertriebsmitarbeiter) über die ganze Kartenbreite.
   ------------------------------------------------------------------------- */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 230px));
  justify-content: start;
  gap: 14px;
}

/* --- Diagramm ------------------------------------------------------------- */
.diagramm { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm .achse      { stroke: var(--border); stroke-width: 1; }
.diagramm .raster-linie { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.diagramm .beschriftung {
  fill: var(--muted-foreground);
  font-size: 11px;
  font-family: var(--font-sans);
}
.diagramm .wert-text {
  fill: var(--foreground);
  font-size: 10.5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.diagramm .balken { transition: opacity .15s; }
.diagramm .balken:hover { opacity: .8; }

.legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted-foreground); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- Leerzustand ---------------------------------------------------------- */
.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--muted-foreground);
}
.leerzustand .zeichen {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--muted);
  font-size: 18px;
}
.leerzustand h3 { font-size: 14px; color: var(--foreground); }
.leerzustand p { margin: 0; max-width: 46ch; font-size: 13px; }

/* --- Fußzeile ------------------------------------------------------------- */
.fusszeile {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Schmale Fenster ------------------------------------------------------ */
@media (max-width: 720px) {
  .kopf-innen, .reiterleiste, .inhalt, .fusszeile { padding-left: 14px; padding-right: 14px; }
  table.tabelle thead th:first-child,
  table.tabelle tbody td:first-child { padding-left: 14px; }
  .kopf-titel p { display: none; }
}

/* ===========================================================================
   Bericht zu einem eingefrorenen Stand

   Am Bildschirm liegt er als Blatt über der Anwendung. Im Druck ist er das
   Einzige, was auf dem Papier landet — so entsteht das PDF, ohne dass die
   Anwendung eine zusätzliche Bibliothek bräuchte.
   =========================================================================== */
.bericht-huelle {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow-y: auto;
  background: color-mix(in oklab, var(--foreground) 55%, transparent);
  padding: 24px 16px 64px;
}
.bericht-huelle[hidden] { display: none; }

.bericht-leiste {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto 14px;
}

/* Das Blatt selbst: feste Breite wie DIN A4 hochkant. */
.bericht {
  max-width: 820px;
  margin: 0 auto;
  background: #FFFFFF;
  color: #16161A;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px oklch(0 0 0 / .3);
  padding: 40px 44px 48px;
  font-size: 12.5px;
  line-height: 1.5;
}

/* Der Bericht ist ein Dokument, kein Bildschirmelement: Er bleibt hell,
   auch wenn die Anwendung im dunklen Modus läuft. Sonst käme grauer Grund
   mit auf das Papier. */
.bericht, .bericht * { color-scheme: light; }

.bericht-kopf {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #CE0538;
  margin-bottom: 22px;
}
.bericht-kopf img { height: 34px; width: auto; }
.bericht-kopf h1 { font-size: 17px; margin: 0; color: #0B0B0B; }
.bericht-kopf p { margin: 3px 0 0; font-size: 12px; color: #6A6A75; }
.bericht-kopf .rechts { margin-left: auto; text-align: right; font-size: 11.5px; color: #6A6A75; }

.bericht h2 {
  font-size: 13.5px;
  margin: 26px 0 10px;
  color: #0B0B0B;
  padding-bottom: 5px;
  border-bottom: 1px solid #DFDFE4;
}
.bericht h2:first-of-type { margin-top: 0; }

.bericht table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 4px;
}
.bericht th {
  text-align: right;
  font-weight: 600;
  font-size: 11px;
  color: #6A6A75;
  padding: 6px 8px;
  border-bottom: 1px solid #DFDFE4;
  white-space: nowrap;
}
.bericht th:first-child { text-align: left; }
.bericht td {
  text-align: right;
  padding: 5px 8px;
  border-bottom: 1px solid #EDEDEF;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bericht td:first-child { text-align: left; font-family: var(--font-sans); }
.bericht tr.summe td {
  font-weight: 700;
  border-top: 1.5px solid #B9B9C2;
  border-bottom: 1.5px solid #B9B9C2;
  background: #F6F6F7;
}
.bericht tr.offen td { color: #6A6A75; }

/* Kennzahlenblock */
.bericht-kennzahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.bericht-kennzahl {
  border: 1px solid #DFDFE4;
  border-radius: 8px;
  padding: 10px 12px;
}
.bericht-kennzahl .titel { font-size: 10.5px; color: #6A6A75; }
.bericht-kennzahl .wert {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 700;
  color: #0B0B0B;
  margin-top: 2px;
}
.bericht-kennzahl .zusatz { font-size: 10px; color: #6A6A75; }

.bericht-fuss {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid #DFDFE4;
  font-size: 10.5px;
  color: #6A6A75;
}

@media print {
  @page { size: A4 portrait; margin: 14mm; }

  /* Läuft der Bericht, kommt nur er aufs Papier. */
  body.druckt > *:not(.bericht-huelle) { display: none !important; }
  body.druckt .bericht-huelle {
    position: static;
    inset: auto;
    padding: 0;
    background: none;
    overflow: visible;
  }
  body.druckt .bericht-leiste { display: none !important; }
  body.druckt .bericht {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10.5pt;
  }
  body.druckt .bericht h2 { break-after: avoid; }
  body.druckt .bericht table { break-inside: avoid; }
  body.druckt .bericht-kennzahlen { break-inside: avoid; }

  /* Der gewöhnliche Ausdruck der Anwendung, ohne Bericht. */
  body:not(.druckt) .kopf,
  body:not(.druckt) .reiterleiste,
  body:not(.druckt) .knopf,
  body:not(.druckt) .gruppe { display: none !important; }
  body:not(.druckt) .karte { break-inside: avoid; box-shadow: none; }
  .tafel[hidden] { display: none !important; }
}