/* ============================================================================
   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);
}
/* Kanal in dieser Mappe ausgeschaltet (Kanalverteilung, nach Etappe 3). */
.reiter button.nicht-geplant { opacity: .6; }
.reiter button .aus {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10.5px;
  line-height: 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  vertical-align: 1px;
}
.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; }

/* --- Planungsmappen (Etappe 2) --------------------------------------------
   Im Kopf das Auswahlfeld, darunter der Reiter mit der Liste. Das Feld sitzt
   rechts neben dem Titel, abgesetzt durch eine feine Linie: Es gehört zum
   „Worum geht es hier", nicht zu den Werkzeugen rechts.
   ------------------------------------------------------------------------- */
.mappen-wahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.mappen-wahl[hidden] { display: none; }
.mappen-wahl label { font-size: 11.5px; color: var(--muted-foreground); }

/* Eigener Pfeil statt des Browserpfeils: Der sähe im dunklen Modus in
   jedem Browser anders aus. Gezeichnet über den Rahmen, damit er die
   Textfarbe übernimmt. */
.mappen-wahl-feld { position: relative; }
.mappen-wahl-feld::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -5px;
  border-right: 1.5px solid var(--muted-foreground);
  border-bottom: 1.5px solid var(--muted-foreground);
  transform: rotate(45deg);
  pointer-events: none;
}
.mappen-wahl select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  height: 30px;
  padding: 0 30px 0 10px;
  min-width: 180px;
  max-width: 300px;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.mappen-wahl select:hover { border-color: var(--ring); }
.mappen-wahl select:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
}
.mappen-wahl option { color: var(--foreground); background: var(--card); font-weight: 400; }

/* Unter 1180 px passen Titel, Auswahl und Werkzeuge nicht mehr in eine
   Zeile — gemessen am 30.09.2026: Bei 1024 px wurde der Titel auf vier
   Zeilen zusammengedrückt. Genau diese Breite hat man, wenn man zwei
   Fenster zum Vergleichen nebeneinanderstellt. Dann bekommt die Auswahl
   eine eigene Zeile. */
@media (max-width: 1180px) {
  .kopf-innen { flex-wrap: wrap; row-gap: 10px; }
  .mappen-wahl {
    order: 10;
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    border-left: 0;
  }
  .mappen-wahl select { max-width: 360px; }
}

/* Die Liste im Reiter */
table.mappen-tabelle tbody td { padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
table.mappen-tabelle tbody td:first-child { min-width: 240px; }
table.mappen-tabelle tr.mappe-offen td { background: color-mix(in oklab, var(--primary) 5%, transparent); }
table.mappen-tabelle tr.mappe-offen td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
table.mappen-tabelle tr.mappe-bearbeiten td { background: color-mix(in oklab, var(--muted) 45%, var(--card)); }

.mappe-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.mappe-zusatz {
  font-size: 11.5px;
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  white-space: normal;
  margin-top: 2px;
}
/* Zeitpunkte in der Zahlenschrift wie im Reiter „Saved Plans", die Knöpfe
   aber in der Textschrift — sie erben sonst die der Zelle. */
table.mappen-tabelle td.mappe-zeit { font-size: 12.5px; }
table.mappen-tabelle td.mappe-knoepfe { text-align: right; font-family: var(--font-sans); }
table.mappen-tabelle td.mappe-knoepfe .knopf { margin-left: 4px; }

.mappen-meldung.ok {
  border-color: color-mix(in oklab, var(--positiv) 35%, transparent);
  background: color-mix(in oklab, var(--positiv) 9%, var(--card));
}
.mappen-meldung.fehler {
  border-color: color-mix(in oklab, var(--committed) 45%, transparent);
  background: color-mix(in oklab, var(--committed) 11%, var(--card));
}

.mappen-formular { display: flex; flex-direction: column; gap: 10px; }
.mappen-formular:not(.eingebettet) { border-top: 1px solid var(--border); padding-top: 16px; }
.mappen-formular h3 { font-size: 14px; }
.mappen-formular > p { margin: 0; font-size: 12.5px; max-width: 80ch; }
.mappen-felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 360px));
  gap: 12px;
}
.feld.mappen-feld { text-align: left; font-family: var(--font-sans); }

/* --- Aufteilung je Kanal (nach Etappe 3) --------------------------------- */
h3.unterkopf { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
table.kanal-aufteilung thead tr.schalter th { padding-top: 4px; padding-bottom: 4px; background: var(--card); }
table.kanal-aufteilung td { min-width: 110px; }
.kanal-schalter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 400;
  color: var(--foreground);
  cursor: pointer;
}
.kanal-schalter input { accent-color: var(--primary); }
.kanal-schalter:has(input:disabled) { color: var(--muted-foreground); cursor: default; }

/* --- Artikelstamm (Etappe 3) ----------------------------------------------
   Herkunft der Werte als Abzeichen: geprüft (grün), angepasst (bernstein),
   sonst neutral. Die Farben tragen keine Wertung „gut/schlecht" — sie sagen,
   woran man ist. */
.abzeichen.geprueft {
  border-color: color-mix(in oklab, var(--positiv) 40%, transparent);
  background: color-mix(in oklab, var(--positiv) 10%, transparent);
  color: color-mix(in oklab, var(--positiv) 65%, var(--foreground));
}
.abzeichen.angepasst {
  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));
  white-space: normal;
}

table.artikel-tabelle thead th { text-align: left; }
table.artikel-tabelle tbody td { padding-top: 10px; padding-bottom: 10px; vertical-align: top; }
table.artikel-tabelle tbody td.text {
  text-align: left;
  font-family: var(--font-sans);
  white-space: normal;
  font-size: 12.5px;
}
table.artikel-tabelle tbody td.text .abzeichen { margin-top: 4px; }
table.artikel-tabelle td.mappe-knoepfe { text-align: right; font-family: var(--font-sans); white-space: nowrap; }
table.artikel-tabelle td.mappe-knoepfe .knopf { margin-left: 4px; }

.artikel-aufnehmen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 14px; }
.artikel-aufnehmen select { max-width: 420px; height: 32px; }
.artikel-aufnehmen .leise { font-size: 12.5px; }

.artikel-wahl-titel { font-size: 12.5px; font-weight: 500; }
.artikel-wahl { display: flex; flex-direction: column; gap: 10px; }
.artikel-wahl-gruppe { display: flex; flex-direction: column; gap: 4px; }
.artikel-wahl-marke { font-size: 11.5px; font-weight: 600; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .03em; }
.artikel-wahl-eintrag { display: flex; align-items: baseline; gap: 8px; font-size: 13px; cursor: pointer; }
.artikel-wahl-eintrag input { accent-color: var(--primary); }

.stamm-formular h4 { font-size: 13px; font-weight: 600; margin: 8px 0 0; }
.stamm-formular > p { margin: 0; font-size: 12.5px; max-width: 90ch; }
.stamm-vorschau {
  font-size: 12.5px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--muted) 35%, var(--card));
}
.stamm-haken { display: flex; align-items: center; gap: 8px; height: 34px; font-size: 13px; }
.stamm-haken input { accent-color: var(--primary); }

/* Kalkulationsbasis in Gruppen wie im Controlling-Blatt (Etappe 4). */
.stamm-formular h5.stamm-gruppe {
  font-size: 11.5px; font-weight: 600; margin: 14px 0 6px;
  color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .03em;
}
.stamm-formular p.stamm-gruppe-text { margin: -2px 0 8px; font-size: 12px; max-width: 90ch; }

/* Geprüfte Vorlagen im Admin-Bereich (Etappe 4). */
.vorlagen { border-top: 1px solid var(--border); }
.vorlagen > p { margin: 0 0 12px; font-size: 12.5px; max-width: 90ch; }
table.artikel-tabelle tr.vorlagen-blatt td {
  background: var(--table-head); font-family: var(--font-sans); text-align: left; font-size: 12.5px;
}
table.artikel-tabelle tr.vorlagen-blatt td .mappe-zusatz { display: inline; }

/* „Weitere Position" in der Kalkulation (Etappe 4). */
.karte-kopf .rechts select.position-wahl { height: 32px; max-width: 220px; }

/* Dashboard über alle Mappen (Etappe 5). */
table.dashboard-tabelle thead th { white-space: nowrap; }
table.dashboard-tabelle thead th.text { text-align: left; }
table.dashboard-tabelle .dashboard-haken { margin-top: 6px; }
table.dashboard-tabelle tbody td { vertical-align: top; padding-top: 10px; padding-bottom: 10px; }
table.dashboard-tabelle tbody td.text {
  text-align: left; font-family: var(--font-sans); white-space: normal; min-width: 180px;
}
table.dashboard-tabelle td.mappe-knoepfe { text-align: right; font-family: var(--font-sans); white-space: nowrap; }
table.dashboard-tabelle tr.szenario td { color: var(--muted-foreground); }
table.dashboard-tabelle .mappe-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 500; }
.dashboard-haken { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.dashboard-haken input { accent-color: var(--primary); }
.balken-spur {
  height: 6px; margin-top: 5px; min-width: 80px;
  border-radius: 999px; background: color-mix(in oklab, var(--muted) 70%, transparent);
  overflow: hidden;
}
.balken-fuellung { height: 100%; border-radius: 999px; background: var(--primary); }
table.dashboard-jahre td:last-child { width: 30%; }
.mappen-fehler:empty { display: none; }
.mappen-fehler { font-size: 12.5px; color: var(--destructive); }
.mappen-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- 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; }

  /* Schmal: Die Mappenauswahl (eigene Zeile, siehe oben) nimmt die volle
     Breite. Ohne eigene Zeile wäre sie hier auf wenige Pixel geschrumpft und
     hätte den Titel überdeckt — am 30.09.2026 so gesehen. */
  .kopf-titel { flex: 1 1 0; }            /* Titel neben dem Logo, nicht darunter */
  .mappen-wahl-feld { flex: 1; min-width: 0; }
  .mappen-wahl select { width: 100%; min-width: 0; max-width: none; }

  /* Einheit, FREEZE & PRINT, Feedback und Hell/Dunkel sind zusammen rund
     490 px breit. Ohne Umbruch ragten sie auf dem Handy über den Rand und
     die ganze Seite ließ sich seitlich verschieben (30.09.2026 gemessen:
     504 px bei 375 px Breite). */
  .kopf-rechts { flex-wrap: wrap; row-gap: 8px; margin-left: 0; }
}

/* ===========================================================================
   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; }

/* Texttabelle (seit Etappe 3: Herkunft der Kalkulation). Die übrigen
   Tabellen sind für Zahlen gebaut — rechtsbündig, ohne Umbruch. Eine
   Quellenangabe liefe so über den Seitenrand. */
.bericht table.text th,
.bericht table.text td {
  text-align: left;
  font-family: var(--font-sans);
  white-space: normal;
}

/* 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; }

  /* --- Das Handbuch als PDF ----------------------------------------------
     Andreas am 30.09.2026: „wenn man es auch als PDF Downloaden kann."
     Derselbe Weg wie beim Bericht — der Browser erzeugt das PDF aus dem
     Druckdialog, ohne dass die Anwendung eine Bibliothek braucht.

     Das Handbuch ist ein Dokument, kein Bildschirmelement: Es druckt immer
     auf Weiß, auch wenn die Anwendung im dunklen Modus läuft. Sonst käme
     grauer Grund mit aufs Papier — dieselbe Regel wie beim Bericht.
     ---------------------------------------------------------------------- */
  body.druckt-handbuch {
    background: #FFFFFF !important;
    color: #16161A !important;
  }
  body.druckt-handbuch .kopf,
  body.druckt-handbuch .reiterleiste,
  body.druckt-handbuch .knopf,
  body.druckt-handbuch .feedback-fenster,
  body.druckt-handbuch .bericht-huelle { display: none !important; }

  body.druckt-handbuch .karte {
    break-inside: auto;          /* das Handbuch ist lang, es MUSS umbrechen */
    box-shadow: none;
    border-color: #DFDFE4;
    background: #FFFFFF !important;
  }
  body.druckt-handbuch .karte-kopf h2 { break-after: avoid; }

  /* Ein Bildschirmfoto nie über den Seitenrand hinaus und nie über einen
     Umbruch hinweg — ein halbes Bild am Seitenende ist unbrauchbar. */
  body.druckt-handbuch .handbuch-bild {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 10px 0 14px;
  }
  body.druckt-handbuch .handbuch-bild img {
    max-width: 100%;
    max-height: 105mm;           /* passt neben Text auf eine A4-Seite */
    width: auto;
    object-fit: contain;
  }

  /* Tabellen und Hinweiskästen zusammenhalten. */
  body.druckt-handbuch table,
  body.druckt-handbuch .hinweiskasten { break-inside: avoid; }

  /* Das Inhaltsverzeichnis mit den Sprungmarken ist auf Papier nutzlos —
     man kann nicht daraufklicken. Die Abschnitte stehen ohnehin in Folge. */
  body.druckt-handbuch .handbuch-verzeichnis { display: none !important; }
}

/* ===========================================================================
   Melde-Fenster (Feedback)

   Nach dem Muster von MBG AMI. Der wichtigste Punkt: Es ist KEIN modaler
   Dialog. Es legt sich als Karte an den Rand, ohne die Seite zu sperren —
   man soll dahinter weiterklicken und nachsehen können, worüber man gerade
   schreibt.
   =========================================================================== */

.feedback-knopf {
  border-color: color-mix(in oklab, var(--primary) 35%, transparent);
  color: var(--primary);
}
.feedback-knopf:hover {
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}

.feedback-fenster {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: min(420px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px oklch(0 0 0 / .22);
}
.feedback-fenster[hidden] { display: none; }

.feedback-kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.feedback-kopf > div:first-child { flex: 1; min-width: 0; }
.feedback-kopf strong { font-size: 14px; }
.feedback-kopf .knopf { flex: none; width: 30px; padding: 0; }

.feedback-rumpf {
  padding: 14px 16px 16px;
  overflow-y: auto;
}

.feedback-ort {
  font-size: 12.5px;
  padding: 7px 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--muted) 55%, transparent);
}

/* Das Textfeld ist das einzige Feld — es darf Platz haben. */
textarea.feedback-text {
  width: 100%;
  height: auto;
  min-height: 120px;
  padding: 9px 10px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
}

@media (max-width: 720px) {
  .feedback-fenster { right: 12px; left: 12px; bottom: 12px; width: auto; }
}

/* Auf dem Papier hat das Melde-Fenster nichts verloren. */
@media print {
  .feedback-fenster, .feedback-knopf { display: none !important; }
}