/* Ein Stylesheet, helle und dunkle Fassung ueber Variablen. */
:root {
  --grund: #f7f7f5;
  --flaeche: #ffffff;
  --flaeche-2: #f0efec;
  --rand: #dedcd6;
  --text: #1c1b18;
  --text-leise: #6d6a61;
  --akzent: #35594a;
  --akzent-text: #ffffff;
  --einnahme: #2f6b4f;
  --ausgabe: #94391f;
  --warnung: #8a6412;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16171a;
    --flaeche: #1e2024;
    --flaeche-2: #26282d;
    --rand: #34373d;
    --text: #e9e8e4;
    --text-leise: #9a978f;
    --akzent: #6fa88f;
    --akzent-text: #10130f;
    --einnahme: #7cc39c;
    --ausgabe: #e08a6c;
    --warnung: #d9b25c;
    --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  }
}

* { box-sizing: border-box; }

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

/* --- Rahmen --- */

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

.marke { font-weight: 620; letter-spacing: -.01em; white-space: nowrap; }
.marke small { display: block; font-weight: 400; font-size: 11px; color: var(--text-leise); }

nav.reiter { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
nav.reiter button {
  border: 0; background: none; color: var(--text-leise);
  padding: 7px 13px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 14px; white-space: nowrap;
}
nav.reiter button:hover { background: var(--flaeche-2); color: var(--text); }
nav.reiter button[aria-current="true"] { background: var(--akzent); color: var(--akzent-text); }

main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 80px; }

/* --- Bausteine --- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--schatten);
}

h2 { font-size: 17px; margin: 0 0 12px; font-weight: 620; letter-spacing: -.01em; }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
p.leise, .leise { color: var(--text-leise); font-size: 13px; }

button, .knopf {
  font: inherit; font-size: 14px;
  padding: 7px 13px; border-radius: 7px;
  border: 1px solid var(--rand); background: var(--flaeche-2); color: var(--text);
  cursor: pointer; white-space: nowrap;
}
button:hover:not(:disabled) { border-color: var(--text-leise); }
button:disabled { opacity: .45; cursor: default; }
.knopf.haupt, button.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 550; }
.knopf { display: inline-block; text-decoration: none; }
button.still { background: none; border-color: transparent; color: var(--text-leise); }
button.still:hover { background: var(--flaeche-2); }
button.gefahr:hover { border-color: var(--ausgabe); color: var(--ausgabe); }

input, select, textarea {
  font: inherit; font-size: 14px; width: 100%;
  padding: 7px 10px; border-radius: 7px;
  border: 1px solid var(--rand); background: var(--grund); color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
textarea { resize: vertical; min-height: 90px; line-height: 1.5; font-family: inherit; }
label { display: block; font-size: 12px; color: var(--text-leise); margin-bottom: 3px; }
.feld { margin-bottom: 10px; }
.reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.reihe > * { flex: 1 1 140px; min-width: 0; }
.reihe > .schmal { flex: 0 0 auto; }

/* --- Zahlen --- */

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.zahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: 14px 16px; }
.zahl b { display: block; font-size: 23px; font-weight: 640; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.zahl span { font-size: 12px; color: var(--text-leise); }
.zahl.ein b { color: var(--einnahme); }
.zahl.aus b { color: var(--ausgabe); }

/* --- Tabellen --- */

.tabellenrahmen { overflow-x: auto; margin: 0 -16px -16px; padding: 0 16px 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise);
  padding: 6px 9px; border-bottom: 1px solid var(--rand); white-space: nowrap;
}
td { padding: 7px 9px; border-bottom: 1px solid var(--rand); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.zahlwert { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.datum { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.anklickbar { cursor: pointer; }
tr.anklickbar:hover td { background: var(--flaeche-2); }

/* --- Mailkarten --- */

.mailkarte { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); margin-bottom: 10px; overflow: hidden; }
.mailkopf { padding: 12px 14px; }
.mailkopf .betreff { font-weight: 570; margin-bottom: 2px; }
.mailkopf .von { font-size: 12.5px; color: var(--text-leise); }
.mailvorschau { font-size: 13px; color: var(--text-leise); margin-top: 7px; white-space: pre-wrap;
  max-height: 3.2em; overflow: hidden; }
.ausgaenge { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.ausgaenge button { font-size: 13px; padding: 5px 10px; }

.marker { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 20px;
  background: var(--flaeche-2); color: var(--text-leise); border: 1px solid var(--rand); }
.marker.gelernt { border-color: var(--akzent); color: var(--akzent); }
.marker.anlage { border-color: var(--warnung); color: var(--warnung); }

.fach { border-top: 1px solid var(--rand); background: var(--flaeche-2); padding: 14px; }
.fach h3 { margin-top: 0; }
.abschnitt { margin-bottom: 12px; }
.abschnitt .inhalt { white-space: pre-wrap; font-size: 13.5px; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 7px; padding: 10px; }

.hinweis { padding: 9px 12px; border-radius: 7px; font-size: 13px; margin-bottom: 12px; }
.hinweis.warnung { background: color-mix(in srgb, var(--warnung) 13%, transparent); border: 1px solid var(--warnung); }
.hinweis.fehler { background: color-mix(in srgb, var(--ausgabe) 13%, transparent); border: 1px solid var(--ausgabe); }
.hinweis.gut { background: color-mix(in srgb, var(--einnahme) 13%, transparent); border: 1px solid var(--einnahme); }

.anmeldung { max-width: 340px; margin: 16vh auto; }

.werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.werkzeuge .luecke { flex: 1; }

details.block { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--flaeche); margin-bottom: 10px; }
details.block > summary { padding: 11px 14px; cursor: pointer; font-weight: 550; font-size: 14px; }
details.block > div { padding: 0 14px 14px; }

.lade { color: var(--text-leise); font-size: 13px; }

@media (max-width: 620px) {
  header.kopf { flex-wrap: wrap; gap: 8px; padding: 9px 14px; }
  main { padding: 16px 14px 70px; }
  .karte { padding: 14px; }
  .tabellenrahmen { margin: 0 -14px -14px; padding: 0 14px 14px; }
}