:root {
  --grund: #f6f4fb;
  --flaeche: #ffffff;
  --text: #221d2e;
  --leise: #6d6680;
  --linie: #e4dff0;
  --haupt: #5b3f9e;
  --kopf: #5b3f9e;
  --haupt-text: #ffffff;
  --gold: #f6e3a1;
  --gold-text: #6b4e00;
  --lila: #e3d6fb;
  --lila-text: #4b2a8f;
  --achtung: #fff2a8;
  --achtung-text: #5a4a00;
  --fehler: #b3261e;
  --gut: #1e7a3c;
  --schatten: 0 1px 3px rgba(40, 20, 80, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #16131d; --flaeche: #211d2b; --text: #ece8f5; --leise: #a49db6; --linie: #353046;
    --haupt: #8d6ee0; --kopf: #3a2870; --gold: #4a3d12; --gold-text: #f3d77a; --lila: #3a2a63; --lila-text: #d9c9ff;
    --achtung: #4d4410; --achtung-text: #fff0a0; --fehler: #ff8a80; --gut: #7ad69a;
    --schatten: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --grund: #16131d; --flaeche: #211d2b; --text: #ece8f5; --leise: #a49db6; --linie: #353046;
  --haupt: #8d6ee0; --kopf: #3a2870; --gold: #4a3d12; --gold-text: #f3d77a; --lila: #3a2a63; --lila-text: #d9c9ff;
  --achtung: #4d4410; --achtung-text: #fff0a0; --fehler: #ff8a80; --gut: #7ad69a;
  --schatten: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { font: inherit; color: inherit; }
.laedt { padding: 40px 16px; text-align: center; color: var(--leise); }

/* Kopf und Reiter */
.kopf {
  position: sticky; top: 0; z-index: 5; background: var(--kopf); color: var(--haupt-text);
  padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
}
.kopf-zeile { display: flex; align-items: center; gap: 8px; }
.kopf h1 { font-size: 18px; margin: 0; flex: 1; }
.sync { font-size: 12px; opacity: .85; display: flex; align-items: center; gap: 6px; }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7dff9f; }
.sync.weg::before { background: #ffb74d; }
.wochen { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.wochen span { flex: 1; text-align: center; font-weight: 600; font-size: 15px; }
.wochen button {
  background: rgba(255,255,255,.16); border: 0; color: inherit; border-radius: 8px;
  min-width: 44px; height: 36px; font-size: 18px;
}
.wochen button.heute { font-size: 13px; padding: 0 10px; }

.reiter {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 5; display: flex;
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.reiter button {
  flex: 1; border: 0; background: none; padding: 10px 4px 8px; font-size: 12px; color: var(--leise);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.reiter button b { font-size: 20px; line-height: 1; font-weight: 400; }
.reiter button.an { color: var(--haupt); font-weight: 600; }

.inhalt { padding: 12px 16px calc(84px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; }

/* Karten */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
  padding: 12px; margin-bottom: 8px; box-shadow: var(--schatten);
}
button.karte { display: block; width: 100%; text-align: left; cursor: pointer; }
.zeile { display: flex; align-items: baseline; gap: 8px; }
.zeile .name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wertung { font-weight: 700; font-variant-numeric: tabular-nums; }
.klein { font-size: 13px; color: var(--leise); }
.hinweis { font-size: 13px; margin-top: 6px; color: var(--leise); }
.hinweis.achtung { background: var(--achtung); color: var(--achtung-text); border-radius: 6px; padding: 4px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 8px; }
.chip.Gold { background: var(--gold); color: var(--gold-text); }
.chip.Lila { background: var(--lila); color: var(--lila-text); }
.chip.unsicher { background: var(--achtung); color: var(--achtung-text); }
.summe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.summe .chip { font-size: 13px; padding: 4px 10px; }
.leer { text-align: center; color: var(--leise); padding: 32px 8px; }
.grau { opacity: .55; }
h2 { font-size: 15px; margin: 18px 0 8px; color: var(--leise); font-weight: 600; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td, th { padding: 6px 4px; border-bottom: 1px solid var(--linie); text-align: left; }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; }

/* Formulare */
label { display: block; font-size: 13px; color: var(--leise); margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px;
  background: var(--flaeche); font-size: 16px;
}
.knopf {
  display: inline-block; border: 0; border-radius: 10px; padding: 11px 16px; margin-top: 12px;
  background: var(--haupt); color: var(--haupt-text); font-weight: 600; cursor: pointer;
}
.knopf.zweit { background: var(--linie); color: var(--text); }
.knopf.breit { width: 100%; }
.knopf:disabled { opacity: .5; }
.fehlertext { color: var(--fehler); font-size: 14px; margin-top: 8px; min-height: 1em; }
.guttext { color: var(--gut); font-size: 14px; margin-top: 8px; }

.anmelden { max-width: 360px; margin: 0 auto; padding: 48px 16px; }
.anmelden img { width: 72px; height: 72px; display: block; margin: 0 auto 8px; }
.anmelden h1 { text-align: center; margin: 0 0 16px; }

/* Blatt (Details von unten) */
.blatt {
  position: fixed; inset: 0; z-index: 10; background: rgba(20, 10, 40, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.blatt[hidden] { display: none; }
.blatt-innen {
  background: var(--grund); width: 100%; max-width: 720px; max-height: 88vh; overflow: auto;
  border-radius: 16px 16px 0 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
}
.blatt-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.blatt-kopf h2 { flex: 1; margin: 0; font-size: 18px; color: var(--text); }
.zu { border: 0; background: var(--linie); border-radius: 50%; width: 36px; height: 36px; font-size: 18px; }

.meldung {
  position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 20;
  background: #2b2438; color: #fff; padding: 10px 14px; border-radius: 10px; text-align: center; font-size: 14px;
}
.meldung[hidden] { display: none; }
.chip.zweit { background: var(--linie); color: var(--text); }