/* Mobil zuerst. Grosse Flaechen, wenig Tippen, hoher Kontrast -
   die App wird mit Arbeitshandschuhen und bei Sonne bedient. */
:root {
  --gruen: #2f5d3a;
  --gruen-hell: #3f7a4d;
  --grund: #ffffff;
  --text: #161d18;
  --rand: #d3dbd5;
  --grau: #5d6b62;
}
@media (prefers-color-scheme: dark) {
  :root { --grund: #12160f; --text: #eef2ec; --rand: #2c3830; --grau: #9fb0a4; }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--rand);
}
.marke { font-weight: 650; color: var(--text); text-decoration: none; }
main { padding: 16px; max-width: 1100px; margin: 0 auto; }

.kacheln { display: grid; gap: 14px; }
@media (min-width: 720px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }

.kachel {
  display: flex; flex-direction: column; gap: 4px;
  min-height: 112px; justify-content: center;
  padding: 20px; border-radius: 14px; border: 1px solid var(--rand);
  background: var(--gruen); color: #fff; text-decoration: none;
}
.kachel:active { background: var(--gruen-hell); }
.kachel-titel { font-size: 21px; font-weight: 650; }
.kachel-sub { font-size: 15px; opacity: .85; }

.knopf, .knopf-klein, button, input {
  font: inherit; border-radius: 10px;
}
.knopf {
  display: inline-block; padding: 16px 22px; min-height: 52px;
  background: var(--gruen); color: #fff; border: 0; text-decoration: none;
}
.knopf-klein {
  padding: 8px 12px; background: transparent; color: var(--text);
  border: 1px solid var(--rand);
}
.formular { display: grid; gap: 12px; max-width: 420px; }
.formular input { padding: 14px; border: 1px solid var(--rand); background: var(--grund); color: var(--text); }
.meldungen { margin: 12px 16px; padding: 12px; border-left: 4px solid var(--gruen); background: rgba(47,93,58,.08); }
.hinweis { color: var(--grau); }
h1 { font-size: 24px; }

/* Belegliste */
.liste { list-style: none; padding: 0; display: grid; gap: 10px; }
.zeile {
  display: grid; gap: 3px; padding: 14px;
  border: 1px solid var(--rand); border-radius: 12px;
}
.zeile a { display: flex; justify-content: space-between; gap: 12px;
           color: var(--text); text-decoration: none; }
.zeile.unvollstaendig { border-left: 4px solid #c8801f; }
.betrag { font-variant-numeric: tabular-nums; white-space: nowrap; }
.warnung { font-size: 14px; color: #a8621a; white-space: pre-line; }
label.knopf { text-align: center; cursor: pointer; }

/* Abgleich und Import */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center;
              justify-content: space-between; gap: 10px; }
.seitenkopf h1 { margin: 0; }
select { font: inherit; padding: 10px 12px; border-radius: 10px; min-height: 44px;
         border: 1px solid var(--rand); background: var(--grund); color: var(--text);
         max-width: 100%; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.aktionen form { margin: 0; }
.knopf-zweit { font: inherit; padding: 14px 18px; min-height: 52px; border-radius: 10px;
               background: transparent; color: var(--gruen); border: 2px solid var(--gruen); }
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.zahl { display: flex; flex-direction: column; padding: 14px; border-radius: 12px;
        border: 1px solid var(--rand); color: var(--text); text-decoration: none; }
.zahl strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.zahl span { font-size: 14px; color: var(--grau); }
.zahl.offen { border-color: #c8801f; border-width: 2px; }
.abschnitt { margin: 22px 0; }
.abschnitt h2 { font-size: 19px; margin: 0 0 8px; }
.abschnitt h3 { font-size: 16px; margin: 18px 0 8px; }
details.abschnitt > summary { cursor: pointer; list-style: none; }
details.abschnitt > summary h2 { display: inline; }
.zeile-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.zeile-kopf a { color: var(--text); }
.betrag.minus { color: #a83a1a; }
.betrag.plus  { color: var(--gruen); }
.zeile form { margin-top: 6px; }
form.zuordnen { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 720px) {
  .kennzahlen { grid-template-columns: repeat(4, 1fr); }
  form.zuordnen { grid-template-columns: 1fr auto; }
}
@media (min-width: 1000px) {
  .zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
}
@media (prefers-color-scheme: dark) {
  .betrag.minus { color: #e8836a; }
  .betrag.plus  { color: #7fc48e; }
}

/* Steuerberater-Paket */
.ampel { margin: 18px 0; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--rand); }
.ampel h2 { margin: 0 0 6px; font-size: 18px; }
.ampel.gruen { border-color: var(--gruen); }
.ampel.gelb  { border-color: #c8801f; }
.ampel.rot   { border-color: #a83a1a; background: rgba(168, 58, 26, .06); }
.ampel-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ampel-liste li { padding-left: 26px; position: relative; }
.ampel-liste li::before { position: absolute; left: 0; font-weight: 700; }
.ampel-liste li.ok::before    { content: "✓"; color: var(--gruen); }
.ampel-liste li.offen::before { content: "!"; color: #c8801f; }
.ampel-liste li.fehlt         { font-weight: 650; color: #a83a1a; }
.ampel-liste li.fehlt::before { content: "✗"; color: #a83a1a; }
.ampel-liste li.info::before  { content: "i"; color: var(--grau); }
.ampel-liste a { color: inherit; }
.bestaetigung { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.bestaetigung input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
form.frei, form.uebergeben { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 8px; }
form.frei label, .raster label { display: grid; gap: 4px; font-size: 15px; }
input[type=date], .raster input:not([type=checkbox]) { font: inherit; padding: 10px; min-height: 44px;
  border-radius: 10px; border: 1px solid var(--rand); background: var(--grund); color: var(--text); }
.raster { max-width: 640px; }
@media (min-width: 720px) { .raster { grid-template-columns: 1fr 1fr; } .raster .bestaetigung,
  .raster .knopf, .raster label:first-child { grid-column: 1 / -1; } }
@media (prefers-color-scheme: dark) { .ampel.rot { background: rgba(232, 131, 106, .08); } }