:root {
  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --rand: #dcdfe4;
  --text: #1c2024;
  --gedaempft: #5b6570;
  --akzent: #2c5f8a;
  --ok: #1f7a44;
  --warnung: #9a6300;
  --fehler: #b3261e;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16181c;
    --flaeche: #1f2229;
    --rand: #343943;
    --text: #e6e8eb;
    --gedaempft: #9aa3ad;
    --akzent: #6aa9dd;
    --ok: #59c98a;
    --warnung: #e0aa4a;
    --fehler: #ef6b62;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--grund);
  color: var(--text);
}

.kopf {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marke { font-weight: 600; letter-spacing: 0.01em; }

.kopf nav { display: flex; gap: 0.25rem; flex: 1; }

.kopf nav a {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  color: var(--gedaempft);
  text-decoration: none;
}
.kopf nav a:hover { background: var(--grund); color: var(--text); }
.kopf nav a.aktiv { background: var(--akzent); color: #fff; }

main { max-width: 900px; margin: 1.5rem auto; padding: 0 1.25rem; }

h1 { font-size: 1.35rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 0.6rem; }
.untertitel { color: var(--gedaempft); margin: 0 0 1.25rem; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 0.75rem;
}

.karte-kopf { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.karte-titel { font-weight: 600; }
.karte p { margin: 0.35rem 0 0; color: var(--gedaempft); font-size: 0.92rem; }

.plakette {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  color: var(--gedaempft);
  white-space: nowrap;
}
.plakette.ok      { color: var(--ok);      border-color: var(--ok); }
.plakette.warnung { color: var(--warnung); border-color: var(--warnung); }
.plakette.fehler  { color: var(--fehler);  border-color: var(--fehler); }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.75rem 0.9rem; }
.kennzahl .wert { font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kennzahl .bezeichnung { font-size: 0.8rem; color: var(--gedaempft); }

button {
  font: inherit;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--flaeche);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
button:disabled { opacity: 0.5; cursor: default; }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
button.haupt:hover:not(:disabled) { color: #fff; filter: brightness(1.1); }
button.gefahr:hover:not(:disabled) { border-color: var(--fehler); color: var(--fehler); }

input[type=password], input[type=text] {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  min-width: 260px;
  flex: 1;
}

.zeile { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.7rem; }

.maske { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88rem; }

.meldung { margin-top: 0.6rem; font-size: 0.9rem; padding: 0.45rem 0.7rem; border-radius: var(--radius); border: 1px solid var(--rand); }
.meldung.ok     { color: var(--ok);      border-color: var(--ok); }
.meldung.fehler { color: var(--fehler);  border-color: var(--fehler); }
.meldung.warnung { color: var(--warnung); border-color: var(--warnung); }
.knopfreihe { display: flex; gap: 0.4rem; margin-top: 0.5rem; flex-wrap: wrap; }
.meldung .details { display: block; color: var(--gedaempft); font-size: 0.83rem; margin-top: 0.25rem; word-break: break-word; }

.warnkasten { border-left: 3px solid var(--warnung); padding-left: 0.7rem; color: var(--warnung); font-size: 0.88rem; margin-top: 0.6rem; }

ul.befunde { list-style: none; padding: 0; margin: 0.4rem 0 0; }
ul.befunde li { font-size: 0.88rem; color: var(--gedaempft); padding-left: 0.9rem; text-indent: -0.9rem; }

.fuss {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--gedaempft);
  font-size: 0.8rem;
}

.hinweis { color: var(--gedaempft); }
.umschalter { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; }

/* --- Zahlen und Tabellen ------------------------------------------------- */

.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechts { text-align: right; }
.gedaempft { color: var(--gedaempft); }
.klein { font-size: 0.82rem; }
.positiv { color: var(--ok); }
.negativ { color: var(--fehler); }
.notiz { color: var(--gedaempft); font-size: 0.88rem; border-left: 3px solid var(--rand); padding-left: 0.7rem; }
.fussnote { color: var(--warnung); cursor: help; }
.kennzahl .zusatz { font-size: 0.75rem; color: var(--gedaempft); margin-top: 0.15rem; }

.tabellenrahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { padding: 0.45rem 0.7rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-weight: 600; color: var(--gedaempft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--grund); }
.summenzeile td { font-weight: 600; border-top: 2px solid var(--rand); }

.balkenzelle { width: 130px; min-width: 130px; }
.balken { position: relative; height: 8px; background: var(--grund); border-radius: 4px; overflow: visible; margin-top: 0.35rem; }
.balken-ist { position: absolute; inset: 0 auto 0 0; background: var(--akzent); border-radius: 4px; }
.balken-ziel { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--gedaempft); }

/* --- Chat ---------------------------------------------------------------- */

.presets { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; }

/* Offene Laeufe. Sichtbar, weil ein Lauf mit wartender Freigabe sonst
   unbemerkt einen der nur zwei Plaetze belegt. */
.laufleiste {
  display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 0.9rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche);
}
.laufleiste button { display: inline-flex; align-items: center; gap: 0.35rem; }

.verlauf {
  border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche);
  padding: 0.9rem; height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;
}

.blase { border-radius: var(--radius); padding: 0.6rem 0.8rem; max-width: 90%; }
.blase-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.blase-kopf { font-size: 0.75rem; color: var(--gedaempft); margin-bottom: 0.25rem; }
.blase.nutzer { align-self: flex-end; background: var(--akzent); color: #fff; }
.blase.claude { align-self: flex-start; background: var(--grund); }
.blase.subagent { align-self: flex-start; background: var(--grund); border-left: 3px solid var(--akzent); font-size: 0.9rem; }
.blase.laufend::after { content: "▍"; opacity: 0.6; }

.denken, .werkzeug { border: 1px solid var(--rand); border-radius: var(--radius); padding: 0.4rem 0.7rem; font-size: 0.85rem; }
.denken summary, .werkzeug summary { cursor: pointer; color: var(--gedaempft); }
.werkzeugname { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--text); }
.werkzeug pre, .freigabe pre {
  margin: 0.4rem 0 0; padding: 0.5rem; background: var(--grund); border-radius: 6px;
  overflow-x: auto; font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px;
}

.freigabe { border: 2px solid var(--warnung); border-radius: var(--radius); padding: 0.8rem; background: var(--flaeche); }
.abschluss { text-align: center; color: var(--gedaempft); font-size: 0.8rem; padding: 0.2rem; }

.eingabezeile { display: flex; gap: 0.6rem; margin-top: 0.7rem; align-items: stretch; }
.eingabezeile textarea {
  flex: 1; font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--rand);
  border-radius: var(--radius); background: var(--flaeche); color: var(--text); resize: vertical;
}
.knopfspalte { display: flex; flex-direction: column; gap: 0.35rem; justify-content: flex-start; }

/* --- Berichte ------------------------------------------------------------ */

.zweispaltig { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 1rem; align-items: start; }
@media (max-width: 720px) { .zweispaltig { grid-template-columns: 1fr; } }

.spalte-links { display: flex; flex-direction: column; gap: 0.5rem; }
.berichtsliste { max-height: 65vh; overflow-y: auto; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); }
.listeneintrag { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--rand); border-radius: 0; padding: 0.5rem 0.7rem; background: transparent; }
.listeneintrag:hover { background: var(--grund); }
.eintrag-titel { font-size: 0.9rem; }
.eintrag-zusatz { font-size: 0.75rem; color: var(--gedaempft); }
.listengruppe { padding: 0.5rem 0.7rem 0.25rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gedaempft); background: var(--grund); }

.berichtsanzeige { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); padding: 1rem 1.2rem; max-height: 75vh; overflow-y: auto; }
.pdfrahmen { width: 100%; height: 65vh; border: 1px solid var(--rand); border-radius: var(--radius); }

.markdown { line-height: 1.6; }
.markdown h1 { font-size: 1.25rem; }
.markdown h2 { font-size: 1.05rem; margin-top: 1.5rem; }
.markdown h3 { font-size: 0.95rem; }
.markdown table { margin: 0.7rem 0; display: block; overflow-x: auto; }
.markdown code { background: var(--grund); padding: 0.1rem 0.3rem; border-radius: 4px; font-size: 0.88em; }
.markdown pre { background: var(--grund); padding: 0.7rem; border-radius: var(--radius); overflow-x: auto; }
.markdown pre code { background: none; padding: 0; }
.markdown blockquote { border-left: 3px solid var(--rand); margin: 0.7rem 0; padding-left: 0.8rem; color: var(--gedaempft); }
.markdown a { color: var(--akzent); }

/* --- Erfassung (M5) ------------------------------------------------------
   Zwei Spalten: links das Formular, rechts die mitlaufende Vorschau. Auf
   schmalen Schirmen untereinander, damit die Vorschau nicht wegfaellt. */
.erfassung { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 1.2rem; }
@media (max-width: 60rem) { .erfassung { grid-template-columns: 1fr; } }

.formfeld { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.6rem; }
.formfeld > span:first-child { font-size: 0.85rem; color: var(--gedaempft); }

.cashblock { border: 1px solid var(--warnung); border-radius: var(--radius);
             padding: 0.6rem; margin-bottom: 0.8rem; }

/* Der Zeilendiff. Nur geaenderte Felder bekommen Pfeil und Zielwert -
   ungeaenderte stehen bewusst blass daneben, damit sichtbar bleibt, was
   NICHT angefasst wird. */
table.diff { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.diff td { padding: 0.15rem 0.4rem; vertical-align: top; }
table.diff .spaltenname { color: var(--gedaempft); white-space: nowrap; }
table.diff .vorher { opacity: 0.55; }
table.diff tr.geaendert .vorher { opacity: 1; text-decoration: line-through; }
table.diff tr.geaendert { background: color-mix(in srgb, var(--warnung) 12%, transparent); }
table.diff .nachher { font-weight: 600; }
table.diff .pfeil { color: var(--warnung); }

.zeilenblock { border: 1px solid var(--rand); border-radius: var(--radius);
               padding: 0.5rem 0.7rem; margin-top: 0.7rem; background: var(--flaeche); }
.zeilenblock summary { cursor: pointer; font-weight: 600; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover { background: color-mix(in srgb, var(--ok) 10%, transparent); }