:root {
  --grund: #f5f6f8;
  --flaeche: #ffffff;
  --text: #1a1f2b;
  --leise: #5b6475;
  --rand: #d9dde5;
  --akzent: #0b5fd7;
  --akzent-text: #ffffff;
  --gut: #1b7f4b;
  --gut-grund: #e6f4ec;
  --schlecht: #b3261e;
  --schlecht-grund: #fbe9e7;
  --hinweis-grund: #eef3fb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12151b;
    --flaeche: #1b2029;
    --text: #e8ebf1;
    --leise: #9aa3b5;
    --rand: #2f3644;
    --akzent: #6ea8ff;
    --akzent-text: #0b1220;
    --gut: #6fd39b;
    --gut-grund: #173326;
    --schlecht: #ff8a80;
    --schlecht-grund: #3a1c1a;
    --hinweis-grund: #1c2738;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--akzent); }
main, .kopf, .fuss { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
main { padding-bottom: 2rem; }

.kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.kopf nav { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .95rem; }
.marke { font-weight: 700; color: var(--text); text-decoration: none; }
.fuss { color: var(--leise); font-size: .875rem; padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--rand); }

h1 { font-size: 1.7rem; line-height: 1.2; margin: 1rem 0 .75rem; text-wrap: balance; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.karte h2:not(:first-child) { margin-top: 1.25rem; }
ul { padding-left: 1.2rem; margin: .5rem 0; }
li + li { margin-top: .3rem; }
.klein, small { color: var(--leise); font-size: .875rem; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1rem 0;
}

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; }
.kachel .zahl { font-size: 1.8rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel .label { color: var(--leise); font-size: .875rem; }

.formel {
  font-size: 1.1rem;
  font-weight: 600;
  background: var(--hinweis-grund);
  border-radius: 8px;
  padding: .75rem 1rem;
  margin: .5rem 0;
  overflow-wrap: anywhere;
}
.schwarz { background: var(--text); color: transparent; border-radius: 3px; user-select: none; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem 1rem; margin: 1rem 0; }
.raster .breit { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .95rem; }
label small { font-weight: 400; }
input:not([type=checkbox]), select {
  font: inherit;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: .55rem .7rem;
  width: 100%;
}
input:focus-visible, select:focus-visible, .knopf:focus-visible, a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.haken { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; margin: 1rem 0; }
.haken input { margin-top: .3rem; }
.honig { position: absolute; left: -9999px; }

.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  color: var(--akzent-text);
  background: var(--akzent);
  border: 0;
  border-radius: 8px;
  padding: .7rem 1.2rem;
  text-decoration: none;
  cursor: pointer;
}

.meldung { background: var(--hinweis-grund); border-radius: 8px; padding: .75rem 1rem; margin: 1rem 0; }
.meldung.fehler { background: var(--schlecht-grund); color: var(--schlecht); }
.meldung.erfolg { background: var(--gut-grund); }
.meldung ul { margin: 0; }
code { font-size: 1.05em; font-weight: 700; padding: .1rem .35rem; border-radius: 4px; background: var(--flaeche); user-select: all; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 1rem 0 0; }
.kennzahlen dt { color: var(--leise); font-size: .875rem; }
.kennzahlen dd { margin: 0; font-weight: 600; }
.stufe { padding: .1rem .5rem; border-radius: 999px; background: var(--hinweis-grund); }
.stufe.hoch { background: var(--gut-grund); color: var(--gut); }
.stufe.niedrig { background: var(--schlecht-grund); color: var(--schlecht); }

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: .45rem .5rem; border-bottom: 1px solid var(--rand); }
th:first-child { text-align: left; }
thead th { color: var(--leise); font-size: .875rem; font-weight: 600; }