:root {
  --papier:   #f4f5f7;
  --flaeche:  #ffffff;
  --tinte:    #16191d;
  --grau:     #6a7280;
  --linie:    #dfe3e8;
  --akzent:   #1e4fa3;
  --akzent-hell: #e8f1fd;
  --gruen:    #1f6b38;
  --gruen-hell: #e6f4ea;
  --rot:      #a32020;
  --rot-hell: #fdecec;
  --gelb-hell:#fdf4dd;
  --gelb:     #8a6d12;
  --pink-hell:#fdeaf3;
  --pink:     #98285f;
}

* { box-sizing: border-box; }

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

/* ---------- Kopf ---------- */

.kopf {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 0 20px;
  height: 54px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.marke {
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 15px;
}
.marke span {
  font-weight: 400;
  letter-spacing: 0;
  color: var(--grau);
  margin-left: 7px;
}
.kopf nav { display: flex; gap: 4px; margin-right: auto; }
.kopf nav a {
  color: var(--grau);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.kopf nav a:hover { background: var(--papier); color: var(--tinte); }
.kopf nav a.an { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.wer { color: var(--grau); font-size: 13px; }
.wer a { color: var(--grau); }

main { padding: 22px 20px 60px; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 26px 0 10px; }
.unter { color: var(--grau); font-size: 13px; margin: 0 0 18px; }

/* ---------- Kennzahlen ---------- */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.kachel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 12px 14px;
}
.kachel .wert { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kachel .name { font-size: 12px; color: var(--grau); margin-top: 2px; }
.kachel.warn .wert { color: var(--gelb); }

/* ---------- Filterleiste ---------- */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
input[type=text], input[type=password], input[type=date], select, textarea {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: #fff;
  color: var(--tinte);
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
.such { min-width: 240px; flex: 1; }

button, .knopf {
  font: inherit;
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid var(--akzent);
  border-radius: 6px;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .knopf:hover { filter: brightness(1.1); }
button.leise, .knopf.leise {
  background: #fff;
  color: var(--tinte);
  border-color: var(--linie);
}

/* ---------- Tabelle ---------- */

.rahmen {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  overflow-x: auto;
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--grau);
  background: #fafbfc;
  white-space: nowrap;
  border-bottom: 1px solid var(--linie);
}
th a { color: var(--grau); text-decoration: none; }
th a:hover { color: var(--akzent); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.minus { color: var(--rot); }
.plus  { color: var(--gruen); font-weight: 600; }
.zweck { color: var(--grau); font-size: 12.5px; max-width: 300px; }
.nr code {
  background: var(--akzent-hell);
  color: var(--akzent);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  margin-right: 3px;
  display: inline-block;
}
.nr .fehlt { color: var(--grau); font-size: 12px; }

/* ---------- Statuspille ---------- */

.pille {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.p-zahlung          { background: var(--akzent-hell); color: var(--akzent); }
.p-gutschrift       { background: var(--gruen-hell);  color: var(--gruen); }
.p-kundenzahlung    { background: var(--gruen-hell);  color: var(--gruen); }
.p-kundenerstattung { background: var(--gelb-hell);   color: var(--gelb); }
.p-ruecklastschrift { background: var(--pink-hell);   color: var(--pink); }
.p-kosten           { background: #eef0f2;            color: var(--grau); }
.p-kontofuehrung    { background: #eef0f2;            color: var(--grau); }
.p-eingang          { background: var(--gruen-hell);  color: var(--gruen); }
.p-ausgang          { background: var(--gelb-hell);   color: var(--gelb); }

/* ---------- Meldungen ---------- */

.meldung {
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 14px;
  border: 1px solid;
}
.meldung.info { background: var(--akzent-hell); border-color: #c5dbf7; color: var(--akzent); }
.meldung.gut  { background: var(--gruen-hell);  border-color: #bfe2c9; color: var(--gruen); }
.meldung.warn { background: var(--gelb-hell);   border-color: #ecd9a0; color: var(--gelb); }
.meldung.fehler { background: var(--rot-hell);  border-color: #f2c4c4; color: var(--rot); }

/* ---------- Login ---------- */

.tor {
  max-width: 340px;
  margin: 12vh auto;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 26px;
}
.tor h1 { margin-bottom: 18px; }
.tor label { display: block; font-size: 13px; color: var(--grau); margin: 12px 0 4px; }
.tor input { width: 100%; }
.tor button { width: 100%; margin-top: 18px; padding: 9px; }

/* ---------- Formular ---------- */

.feld { margin-bottom: 12px; }
.feld label { display: block; font-size: 12px; color: var(--grau); margin-bottom: 3px; }
.feld input, .feld select, .feld textarea { width: 100%; }
.hinweis { font-size: 12px; color: var(--grau); margin-top: 3px; }
code.regex { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }

.blaettern { margin-top: 12px; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--grau); }

@media (max-width: 700px) {
  .kopf { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 10px; }
  .zweck { max-width: 160px; }
  .gruppe > h2 { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ---------- Gruppierte Liste (Lieferantenseite) ---------- */

.gruppe { margin-bottom: 22px; }
.gruppe-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
}
.gruppe-kopf h2 { margin: 0; font-size: 14px; }
.gruppe-kopf .anzahl { color: var(--grau); font-size: 13px; }
.gruppe-kopf .erklaerung { color: var(--grau); font-size: 12.5px; margin-left: auto; }

/* Ampel links an der Zeile */
tr.ampel td:first-child { border-left: 3px solid transparent; padding-left: 9px; }
tr.a-gut td:first-child  { border-left-color: var(--gruen); }
tr.a-teil td:first-child { border-left-color: #d8a42a; }
tr.a-keine td:first-child{ border-left-color: var(--linie); }

.firma-name { font-weight: 600; }
.quote { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quote .von { color: var(--grau); }
.balken {
  display: inline-block;
  width: 54px;
  height: 5px;
  border-radius: 3px;
  background: var(--linie);
  overflow: hidden;
  vertical-align: middle;
  margin-left: 7px;
}
.balken i { display: block; height: 100%; background: var(--gruen); }
.balken.teil i { background: #d8a42a; }