:root{
  --papier:#f6f5f2; --text:#1c1c1a; --leise:#6b6b66; --linie:#dcd9d2;
  --karte:#fff; --akzent:#1f6b3a; --akzent-text:#fff;
  --unter:#b4420f; --ueber:#8a6d1f; --passt:#1f6b3a;
}
@media (prefers-color-scheme: dark){
  :root{ --papier:#17181a; --text:#e9e8e4; --leise:#9a9a94; --linie:#32343a;
         --karte:#1f2125; --akzent:#3f9c62; --akzent-text:#08140c; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--text);
  font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--linie)}
.marke{font-weight:700;text-decoration:none;color:var(--text);letter-spacing:.2px}
main{max-width:640px;margin:0 auto;padding:16px 16px 64px}
h1{font-size:24px;margin:8px 0 4px}
h2{font-size:18px;margin:28px 0 8px;color:var(--leise);text-transform:uppercase;letter-spacing:.06em}
a{color:var(--akzent)}
.untertitel{color:var(--leise);margin:0 0 16px}
.hinweis{color:var(--leise);font-size:15px}
.zurueck{margin:0 0 8px;font-size:15px}
.meldung{background:var(--karte);border-left:4px solid var(--akzent);
  padding:10px 12px;border-radius:0 8px 8px 0;margin:0 0 16px}

ul{list-style:none;margin:0;padding:0}
.termine li a{display:grid;gap:2px;padding:14px;margin:0 0 10px;background:var(--karte);
  border:1px solid var(--linie);border-radius:12px;text-decoration:none;color:var(--text)}
.termine .datum{font-size:14px;color:var(--leise)}
.termine .titel{font-weight:600;font-size:18px}
.termine .zahlen{font-size:14px;color:var(--leise)}
.termine .drin{color:var(--akzent);margin-left:6px}
.termine li.vorbei a{opacity:.5}

.aufgaben li{background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  padding:14px;margin:0 0 12px}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.punkte{font-size:13px;color:var(--leise);white-space:nowrap}
.zeit{font-size:14px;color:var(--leise);margin:2px 0 8px}
.helfer{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--papier);
  border:1px solid var(--linie);font-size:14px}
.chip.ich{border-color:var(--akzent);color:var(--akzent);font-weight:600}
.chip.inaktiv{opacity:.45;text-decoration:line-through}
.chip.loeschen{cursor:pointer;color:var(--text)}
.leer{color:var(--leise);font-size:14px;font-style:italic}

.knopf{display:inline-block;padding:12px 18px;border-radius:10px;border:0;
  background:var(--akzent);color:var(--akzent-text);font-size:16px;font-weight:600;
  cursor:pointer;text-decoration:none;min-height:44px}
.knopf.leise{background:transparent;color:var(--akzent);border:1px solid var(--akzent)}
.knopf.raus{background:transparent;color:var(--leise);border:1px solid var(--linie)}
.gesperrt{display:block;color:var(--leise);font-size:14px;font-style:italic}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0 4px 4px 0}

.formular{display:grid;gap:10px;margin:12px 0}
.formular label{display:grid;gap:4px;font-size:14px;color:var(--leise)}
input,select{font:inherit;padding:10px;border:1px solid var(--linie);border-radius:8px;
  background:var(--karte);color:var(--text);min-height:44px;width:100%}
details{margin:12px 0;border:1px solid var(--linie);border-radius:12px;
  padding:10px 14px;background:var(--karte)}
summary{cursor:pointer;font-weight:600}

.konto{display:grid;gap:2px;padding:14px;border-radius:12px;margin:12px 0 20px;
  background:var(--karte);border-left:5px solid var(--passt)}
.konto.unter{border-left-color:var(--unter)}
.konto.ueber{border-left-color:var(--ueber)}
.konto span{font-size:14px;color:var(--leise)}

.namen{display:grid;gap:8px}
.namen button{width:100%;text-align:left;padding:14px;min-height:52px;font:inherit;
  background:var(--karte);border:1px solid var(--linie);border-radius:12px;color:var(--text);cursor:pointer}

table.stand{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px}
table.stand th{text-align:left;font-size:13px;color:var(--leise);font-weight:600;
  padding:6px 8px;border-bottom:1px solid var(--linie)}
table.stand td{padding:8px;border-bottom:1px solid var(--linie)}
table.stand tr.unter td:last-child{color:var(--unter);font-weight:600}
table.stand tr.ueber td:last-child{color:var(--ueber)}
table.stand tr.ich td{font-weight:700}
.verlauf li{font-size:14px;color:var(--leise);padding:4px 0;border-bottom:1px solid var(--linie)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

textarea{font:inherit;padding:10px;border:1px solid var(--linie);border-radius:8px;
  background:var(--karte);color:var(--text);width:100%;resize:vertical}
.bearbeiten{margin:8px 0 0;padding:8px 12px}
.bearbeiten summary{font-weight:400;font-size:14px;color:var(--leise)}