/* Karla wird mitgeliefert, nicht von Google geholt: das Werkzeug laedt nichts
   von aussen nach und sieht auch auf Rechnern ohne die Schrift richtig aus.
   Zwei Schnitte zu je 46 KB, einmal geladen und danach im Zwischenspeicher. */
@font-face {
  font-family: Karla; src: url('/static/Karla-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: Karla; src: url('/static/Karla-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Hausfarben von digitalorganizing.ch: Creme, Dunkelgruen, Gelb. */
:root {
  --creme: #FBF5ED;
  --dunkel: #072125;
  --gelb: #F0D962;
  /* Matt war #6E7B7D und kam auf Creme nur auf 4.05:1 -- zu blass fuer die
     kleinste Schrift im Werkzeug (Tabellenkoepfe 10.5px). Jetzt 5.4:1. */
  --matt: #5A686A;
  --linie: #DDD5C8;
  --warn: #A33;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--dunkel);
  font: 15px/1.5 Karla, "Helvetica Neue", Arial, sans-serif;
}
header {
  display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding: 14px 28px; border-bottom: 2px solid var(--dunkel);
}
.marke { font-weight: 700; text-decoration: none; color: var(--dunkel); }
.werkzeug {
  background: var(--gelb); color: var(--dunkel); font-weight: 700;
  font-size: 12.5px; padding: 2px 9px; border-radius: 3px;
  letter-spacing: .01em;
}
/* Umbrechen, nicht abschneiden: neun Eintraege brauchen 637 px und passen auf
   dem Handy nie in eine Zeile. Ohne flex-wrap lagen "Archiv" und "Verlauf"
   ausserhalb des Bildschirms und zogen die ganze Seite in die Breite. */
nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; row-gap: 6px; }
nav a { color: var(--dunkel); text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav b {
  background: var(--gelb); border-radius: 9px; padding: 1px 7px;
  font-size: 12px; font-weight: 700;
}
.ich { color: var(--matt); font-size: 13px; }
.ich a { color: var(--matt); }
/* Auf schmalen Bildschirmen bekommt die Navigation die ganze Zeile fuer sich.
   Sonst teilt sie sie mit dem Namen rechts, wird zur schmalen Spalte und legt
   jeden Eintrag auf eine eigene Zeile. */
@media (max-width: 760px) {
  header { gap: 10px 20px; padding: 12px 18px; }
  nav { flex: 1 1 100%; }
  main { padding: 20px 18px 48px; }
}
main { padding: 24px 28px 60px; max-width: 1180px; }
h1 { font-size: 26px; margin: 4px 0 2px; }
h2 { font-size: 17px; margin: 30px 0 8px; }
p.lead { color: var(--matt); margin: 0 0 18px; max-width: 62ch; }
.meldung {
  background: var(--gelb); padding: 9px 14px; margin: 0 0 18px;
  border-radius: 3px; font-size: 14px;
}
/* Nur fuer den einen Fall, den man nicht uebersehen darf: die Daten liegen
   nicht auf einem Volume und sind beim naechsten Deploy weg. */
.alarm {
  background: #fff0f0; border: 2px solid var(--warn); color: var(--warn);
  padding: 11px 15px; margin: 0 0 18px; border-radius: 3px; font-size: 14px;
}
.alarm code { background: #ffe2e2; padding: 1px 5px; border-radius: 2px; }
/* Breite Tabellen scrollen in sich, nicht die Seite. Sonst wandert auf dem
   Handy der ganze Aufbau mit, sobald eine Spalte zu viel ist. */
.breit { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
td.nowrap, th.nowrap { white-space: nowrap; }
th {
  text-align: left; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--matt); font-weight: 700;
  border-bottom: 1px solid var(--dunkel); padding: 0 10px 5px 0;
}
td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.klein { color: var(--matt); font-size: 12px; }
.karten { display: flex; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.karte {
  border: 1px solid var(--linie); border-radius: 4px; padding: 12px 16px;
  min-width: 140px; background: #fff9f0; text-decoration: none; color: inherit;
}
.karte b { display: block; font-size: 26px; line-height: 1.1; }
.karte span { color: var(--matt); font-size: 12.5px; }
.karte.wichtig { background: var(--gelb); border-color: #d9c14e; }
input, select, textarea, button {
  font: inherit; color: var(--dunkel); background: #fff;
  border: 1px solid var(--linie); border-radius: 3px; padding: 6px 8px;
}
select { max-width: 340px; }
/* Drei Stufen, nach Folgen geordnet: gefuellt fuer die Hauptaktion einer
   Seite, umrandet fuer Werkzeug (Filtern), leise fuer Nebensaechliches. Rot
   allein fuer Storno -- das loescht eine Spese in Harvest und sah bisher
   leiser aus als "Zuruecksetzen". */
button {
  background: var(--dunkel); color: var(--creme); border: 0; cursor: pointer;
  padding: 8px 16px; font-weight: 700;
}
button.neben { background: transparent; color: var(--dunkel); font-weight: 700;
  border: 1px solid var(--dunkel); }
button.leise { background: transparent; color: var(--matt); font-weight: 400;
  border: 1px solid var(--linie); }
button.ernst { background: transparent; color: var(--warn); font-weight: 700;
  border: 1px solid var(--warn); }
button.ernst:hover { background: var(--warn); color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }
form.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bestaetigen {
  border: 2px solid var(--dunkel); border-radius: 4px; padding: 16px 18px;
  margin: 20px 0; background: #fff9f0; max-width: 640px;
}
.bestaetigen p { margin: 0 0 12px; }
.warn { color: var(--warn); }
details summary { cursor: pointer; color: var(--matt); font-size: 12.5px; }
pre { font-size: 12px; white-space: pre-wrap; word-break: break-word; margin: 4px 0; }
.anmelden { max-width: 380px; margin: 12vh auto; }
.anmelden label { display: block; margin: 14px 0 4px; font-size: 13px; color: var(--matt); }
.anmelden input, .anmelden select { width: 100%; }
.anmelden button { width: 100%; margin-top: 20px; }