:root { --c0: #2f6f9f; --c1: #d17b3f; --c2: #4f9a6b; --c3: #8a5fb0; --c4: #c2564f; --c5: #3e9aa6; --c6: #a08a2e; --c7: #7a7a7a; --grau: #b8b4aa; --text: #1d2125; --leise: #5c6670; --flaeche: #ffffff; --grund: #f3f4f6; --rand: #d6dade; --akzent: #1f5f8b; --minus: #9b2c2c; --plus: #276749; }
@media (prefers-color-scheme: dark) {
  :root { --c0: #6aa8d6; --c1: #e59a62; --c2: #76bb92; --c3: #b38cd6; --c4: #e08882; --c5: #6cc0cb; --c6: #cdb958; --c7: #a0a0a0; --grau: #5d5a53; --text: #e6e8ea; --leise: #9aa4ae; --flaeche: #1d2228; --grund: #14181c; --rand: #333b43; --akzent: #7db4dc; --minus: #f19a9a; --plus: #8fd3a6; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--grund); }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; background: var(--flaeche); border-bottom: 1px solid var(--rand); }
header .name { font-weight: 600; color: var(--text); text-decoration: none; }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; }
a { color: var(--akzent); }
.karte { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px; padding: 1rem; margin: 0 0 1rem; }
label { display: block; margin: 0 0 .75rem; }
label.wahl { display: inline-block; margin-right: 1rem; }
input:not([type=checkbox]), button { font: inherit; }
input:not([type=checkbox]):not([type=hidden]) { display: block; width: 100%; padding: .5rem; margin-top: .25rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--grund); color: var(--text); }
button, .knopf { display: inline-block; padding: .5rem 1rem; border: 0; border-radius: 6px; background: var(--akzent); color: var(--flaeche); text-decoration: none; cursor: pointer; }
button.leise { background: none; color: var(--akzent); padding: 0; }
.abmelden { display: flex; gap: .5rem; align-items: center; margin: 0; }
.leise { color: var(--leise); font-size: .9rem; }
.fehler { padding: .75rem 1rem; border-radius: 6px; background: color-mix(in srgb, var(--minus) 15%, var(--flaeche)); }
.schluessel { font-family: ui-monospace, monospace; font-size: 1.1rem; letter-spacing: .05em; word-break: break-all; }
.codes { font-family: ui-monospace, monospace; font-size: 1.1rem; }
fieldset { border: 1px solid var(--rand); border-radius: 6px; margin: 0 0 1rem; }
table { width: 100%; border-collapse: collapse; background: var(--flaeche); }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
.zahl { text-align: right; white-space: nowrap; }
.minus { color: var(--minus); }
.plus { color: var(--plus); }
@media (max-width: 36rem) { th:nth-child(4), td:nth-child(4) { display: none; } }
.qr { display: block; width: min(16rem, 100%); height: auto; margin: .5rem 0 1rem; border-radius: 4px; }
details { margin-top: .5rem; }
summary { cursor: pointer; color: var(--akzent); }
.vorschlag { display: block; margin: .25rem 0 .5rem; }
main { max-width: 64rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kachel .gross { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.karte h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.diagramm { width: 100%; height: auto; display: block; }
.diagramm .t { font-size: 13px; fill: var(--text); }
.diagramm .z { font-variant-numeric: tabular-nums; }
.diagramm .m { text-anchor: middle; font-size: 11px; fill: var(--leise); }
.f0 { fill: var(--c0); } .f1 { fill: var(--c1); } .f2 { fill: var(--c2); } .f3 { fill: var(--c3); }
.f4 { fill: var(--c4); } .f5 { fill: var(--c5); } .f6 { fill: var(--c6); } .f7 { fill: var(--c7); } .f-grau { fill: var(--grau); }
.filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
.filter label { margin: 0; }
.filter select, .filter input:not([type=checkbox]) { display: block; margin-top: .25rem; padding: .4rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--grund); color: var(--text); font: inherit; }
.filter .leise { flex-basis: 100%; margin: 0; }
.tabelle { max-height: 32rem; overflow: auto; }
.zeile { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: center; margin: 0; }
.zeile select { padding: .2rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--grund); color: var(--text); font: inherit; font-size: .9rem; }
button.klein { padding: .2rem .6rem; font-size: .9rem; }
.marke { font-size: .75rem; padding: 0 .35rem; border-radius: 4px; background: var(--grund); border: 1px solid var(--rand); color: var(--leise); }
th { position: sticky; top: 0; background: var(--flaeche); }
.zeile input.neu { padding: .2rem; border: 1px solid var(--rand); border-radius: 4px; background: var(--grund); color: var(--text); font: inherit; font-size: .9rem; width: 11rem; }