/* Schulpunkte -- warme Papierbasis.
   Die Palette folgt Faust/Gretchen: gebrochenes Weiss, weiche Linien, ein
   erdiger Akzent. Das passt zur Waldorfschule und ermuedet abends weniger als
   ein buntes Kinder-Design. Die Lebendigkeit kommt nicht aus der Grundfarbe,
   sondern aus grossen Zahlen, Balken und der eigenen Farbe je Kind. */

:root {
  --grund: #faf8f5;
  --flaeche: #ffffff;
  --erhoben: #f4f0ea;
  --schrift: #22201d;
  --leise: #7b746c;
  --linie: #e4ded6;
  --akzent: #8c6a45;
  --gut: #3f6b47;
  --warn: #8a6d2f;
  --schlecht: #9c3b32;
  /* Wird pro Kind ueberschrieben (Kind.farbe), damit Laurin und Luise ihren
     Bereich sofort erkennen. */
  --kind: #8c6a45;
  --rund: 10px;

  --bs-body-bg: var(--grund);
  --bs-body-color: var(--schrift);
  --bs-border-color: var(--linie);
  --bs-primary: var(--akzent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1c1a18;
    --flaeche: #24211e;
    --erhoben: #2c2825;
    --schrift: #ece7e0;
    --leise: #a49c92;
    --linie: #3a352f;
    --akzent: #c69a69;
  }
}

body {
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, sans-serif;
  /* Platz fuer die feste Tab-Leiste auf dem Handy. */
  padding-bottom: 76px;
}

@media (min-width: 768px) {
  body { padding-bottom: 24px; }
}

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 28px 0 12px; }
a { color: var(--akzent); }

.sp-huelle { max-width: 900px; margin: 0 auto; padding: 16px 16px 24px; }

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

.sp-kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.sp-marke {
  font: 500 19px/1 Georgia, serif; color: var(--schrift); text-decoration: none;
}
.sp-marke span { color: var(--leise); font-style: italic; }
.sp-menue { display: none; gap: 16px; margin-left: 20px; }
.sp-menue a { color: var(--leise); text-decoration: none; font-size: 15px; }
.sp-menue a:hover, .sp-menue a.aktiv { color: var(--akzent); }
@media (min-width: 768px) { .sp-menue { display: flex; } }

/* --- Tab-Leiste (Handy) ----------------------------------------------- */

.sp-tableiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.sp-tableiste a {
  flex: 1; text-align: center; padding: 9px 2px 7px;
  color: var(--leise); text-decoration: none; font-size: 11px;
  /* Grosse Trefferflaeche -- die Seite wird im Gehen bedient. */
  min-height: 56px;
}
.sp-tableiste a i { display: block; font-size: 20px; margin-bottom: 2px; }
.sp-tableiste a.aktiv { color: var(--akzent); }
@media (min-width: 768px) { .sp-tableiste { display: none; } }

/* --- Karten ----------------------------------------------------------- */

.sp-karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 16px; margin-bottom: 14px;
}
.sp-karte h2:first-child, .sp-karte h3:first-child { margin-top: 0; }

/* --- Kontostand ------------------------------------------------------- */

.sp-stand {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 5px solid var(--kind);
  border-radius: var(--rund); padding: 18px 20px; margin-bottom: 14px;
}
.sp-stand .name { color: var(--leise); font-size: 14px; }
.sp-zahl {
  font: 400 46px/1 Georgia, serif; color: var(--kind);
  font-variant-numeric: tabular-nums;
}
.sp-zahl .einheit { font-size: 17px; color: var(--leise); margin-left: 6px; }

/* --- Sparbalken ------------------------------------------------------- */

.sp-balken {
  height: 10px; background: var(--erhoben); border-radius: 5px;
  overflow: hidden; margin: 8px 0 6px;
}
.sp-balken > div { height: 100%; background: var(--kind); border-radius: 5px; }

/* --- Listen ----------------------------------------------------------- */

.sp-zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--linie);
}
.sp-zeile:last-child { border-bottom: 0; }
.sp-zeile .wachsen { flex: 1; min-width: 0; }
.sp-zeile .titel { display: block; }
.sp-zeile .leise { color: var(--leise); font-size: 13px; }

.sp-betrag {
  font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap;
}
.sp-betrag.plus { color: var(--gut); }
.sp-betrag.minus { color: var(--schlecht); }

.sp-marke-offen {
  font-size: 11px; padding: 2px 8px; border-radius: 9px;
  background: var(--erhoben); color: var(--warn); white-space: nowrap;
}

/* --- Wochenraster fuer Aufgaben --------------------------------------- */

.sp-woche { width: 100%; border-collapse: collapse; }
.sp-woche th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--leise); font-weight: 500; padding: 4px 2px; text-align: center;
}
.sp-woche td { padding: 6px 2px; border-top: 1px solid var(--linie); }
.sp-woche td.aufgabe { text-align: left; }
.sp-woche td.tag { text-align: center; }
.sp-haken {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--flaeche);
  color: var(--leise); font-size: 16px; line-height: 1; cursor: pointer;
}
.sp-haken.erledigt { background: var(--kind); border-color: var(--kind); color: #fff; }
.sp-haken.wartet {
  background: var(--erhoben); border-style: dashed; color: var(--warn);
}
.sp-haken:disabled { opacity: .35; cursor: default; }
.sp-heute { box-shadow: 0 0 0 2px var(--erhoben); }

/* --- Katalog ---------------------------------------------------------- */

.sp-preis {
  font: 400 22px/1 Georgia, serif; color: var(--kind);
  font-variant-numeric: tabular-nums;
}
.sp-nicht-erreichbar { opacity: .55; }

/* --- Formulare -------------------------------------------------------- */

label { font-size: 13px; color: var(--leise); }
.form-control, .form-select {
  background: var(--flaeche); color: var(--schrift);
  border-color: var(--linie);
}
.form-control:focus, .form-select:focus {
  border-color: var(--akzent); box-shadow: 0 0 0 .2rem rgba(140, 106, 69, .15);
}
.btn-akzent { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.btn-akzent:hover { filter: brightness(.94); color: #fff; }
.btn-rand { background: transparent; border: 1px solid var(--linie); color: var(--schrift); }

/* Vorschau der Gutschrift im Erfassungsformular */
.sp-vorschau {
  background: var(--erhoben); border-radius: var(--rund);
  padding: 12px 16px; margin: 12px 0;
}
.sp-vorschau .ergebnis {
  font: 400 30px/1 Georgia, serif; color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.sp-hinweis { color: var(--leise); font-size: 13px; }
.sp-leer { color: var(--leise); padding: 14px 0; }