:root {
  color-scheme: light;
  --flaeche: #f4f3ef;
  --karte: #fcfcfb;
  --linie: #e3e1da;
  --text: #0b0b0b;
  --text-2: #52514e;
  --text-3: #7a7974;
  --akzent: #2a78d6;
  --s1: #2a78d6; /* blau */
  --s2: #eb6834; /* orange */
  --s3: #1baf7a; /* aqua */
  --s4: #eda100; /* gelb */
  --fehler: #c3372f;
  --gitter: rgba(0, 0, 0, .07);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --flaeche: #111110;
    --karte: #1a1a19;
    --linie: #2e2d2a;
    --text: #f0efec;
    --text-2: #c3c2b7;
    --text-3: #8f8e86;
    --akzent: #3987e5;
    --s1: #3987e5;
    --s2: #d95926;
    --s3: #199e70;
    --s4: #c98500;
    --fehler: #e66767;
    --gitter: rgba(255, 255, 255, .08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --flaeche: #111110; --karte: #1a1a19; --linie: #2e2d2a; --text: #f0efec; --text-2: #c3c2b7;
  --text-3: #8f8e86; --akzent: #3987e5; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --fehler: #e66767; --gitter: rgba(255, 255, 255, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 .15rem; }
.leise { color: var(--text-2); margin: 0 0 .6rem; font-size: .88rem; }
button { font: inherit; cursor: pointer; }

.kopf {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  padding: 1rem 16px; max-width: 1280px; margin: 0 auto;
}
.kopf .leise { margin: 0; }
.zeitraum { display: flex; gap: 2px; background: var(--linie); padding: 2px; border-radius: 8px; }
.zeitraum button {
  border: 0; background: transparent; color: var(--text-2); padding: .35rem .75rem; border-radius: 6px;
}
.zeitraum button[aria-pressed="true"] { background: var(--karte); color: var(--text); font-weight: 600; }
.dezent { border: 1px solid var(--linie); background: var(--karte); color: var(--text-2); padding: .35rem .75rem; border-radius: 6px; }
.abmelden { margin: 0; }

main { max-width: 1280px; margin: 0 auto; padding: 0 16px 2rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: .75rem .9rem; }
.kachel .name { color: var(--text-2); font-size: .82rem; }
.kachel .wert { font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kachel .einheit { font-size: .95rem; font-weight: 500; color: var(--text-2); margin-left: .15rem; }
.kachel .unter { color: var(--text-3); font-size: .78rem; }

.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 1rem; min-width: 0; }
.karte.breit { grid-column: 1 / -1; }
.diagramm { position: relative; height: 260px; }
.karte.breit .diagramm { height: 300px; }
.leer { color: var(--text-3); font-size: .9rem; padding: 2rem 0; text-align: center; }

.tabelle-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .86rem; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: .35rem .6rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--text-2); font-weight: 600; }
td.text { text-align: left; white-space: normal; }
.markiert { color: var(--fehler); font-weight: 600; }
.leise-fehler { color: var(--text-3); }

@media (max-width: 760px) {
  .raster { grid-template-columns: 1fr; }
  .diagramm, .karte.breit .diagramm { height: 230px; }
}

/* Login */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 1.5rem;
  width: 100%; max-width: 360px; display: grid; gap: .85rem;
}
.login-karte label { display: grid; gap: .3rem; color: var(--text-2); font-size: .9rem; }
.login-karte input {
  font: inherit; padding: .55rem .65rem; border: 1px solid var(--linie); border-radius: 8px;
  background: var(--flaeche); color: var(--text);
}
.login-karte button { background: var(--akzent); color: #fff; border: 0; padding: .6rem; border-radius: 8px; font-weight: 600; }
.fehler { color: var(--fehler); margin: 0; }