:root {
  color-scheme: light;
  --page: #f9f9f7; --surface-1: #fcfcfb; --text-primary: #0b0b0b; --text-secondary: #52514e; --text-muted: #898781;
  --grid: #e1e0d9; --axis: #c3c2b7; --border: rgba(11,11,11,.10); --wash: rgba(11,11,11,.04);
  --series-1: #2a78d6; --series-2: #eb6834; --div-neg: #2a78d6; --div-pos: #e34948; --focus: #2a78d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d; --surface-1: #1a1a19; --text-primary: #fff; --text-secondary: #c3c2b7; --text-muted: #898781;
    --grid: #2c2c2a; --axis: #383835; --border: rgba(255,255,255,.10); --wash: rgba(255,255,255,.05);
    --series-1: #3987e5; --series-2: #d95926; --div-neg: #3987e5; --div-pos: #e66767; --focus: #3987e5;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text-primary); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-underline-offset: 2px; }
header.kopf { display: flex; gap: 24px; align-items: baseline; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--surface-1); flex-wrap: wrap; }
header.kopf strong { font-size: 16px; }
header.kopf nav { display: flex; gap: 16px; }
header.kopf nav a { text-decoration: none; color: var(--text-secondary); padding-bottom: 2px; }
header.kopf nav a.aktiv { color: var(--text-primary); border-bottom: 2px solid var(--text-primary); }
header.kopf nav span { color: var(--text-muted); }
.quelle { margin: 0; padding: 8px 24px; font-size: 12.5px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
main { padding: 20px 24px 60px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 14px; }
h2 { font-size: 15px; margin: 0 0 2px; }
.unter { color: var(--text-secondary); font-size: 12.5px; margin: 0 0 12px; }

form.filter { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: end; padding: 14px 16px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 18px; }
form.filter label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
form.filter label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); padding-bottom: 6px; }
select, input[type=text], input[type=password] { font: inherit; color: inherit; background: var(--page); border: 1px solid var(--axis); border-radius: 6px; padding: 5px 8px; min-height: 32px; }
select:focus, input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
input[type=text] { width: 170px; }
details.mehrfach { position: relative; }
details.mehrfach summary { list-style: none; cursor: pointer; border: 1px solid var(--axis); border-radius: 6px; padding: 5px 8px; min-height: 32px; min-width: 170px; background: var(--page); color: var(--text-primary); font-size: 14px; }
details.mehrfach summary::-webkit-details-marker { display: none; }
details.mehrfach .liste { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 240px; max-height: 340px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.15); }
details.mehrfach .liste label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); padding: 3px 0; }
.link { background: none; border: 0; padding: 0 0 8px; color: var(--text-secondary); text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; }

#ergebnis.htmx-request { opacity: .55; transition: opacity .15s .1s; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kachel { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.kachel .titel { font-size: 12px; color: var(--text-secondary); }
.kachel .wert { font-size: 26px; font-weight: 600; margin-top: 2px; }
.kachel .wert small { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.kachel .neben { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

.karte { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 18px; overflow-x: auto; }
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 18px; }
.zwei .karte { margin-bottom: 0; }
.zwei { margin-bottom: 18px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; white-space: normal; }
thead th { font-size: 12px; font-weight: 500; color: var(--text-secondary); border-bottom: 1px solid var(--axis); vertical-align: bottom; }
thead tr.gruppen th { text-align: center; border-bottom: 0; padding-bottom: 0; color: var(--text-primary); font-weight: 600; }
tr.gruppe td { font-weight: 600; font-size: 12px; color: var(--text-secondary); padding-top: 14px; border-bottom: 1px solid var(--axis); }
tbody tr.aktiv td { background: var(--wash); }
tbody tr.aktiv td:first-child { box-shadow: inset 3px 0 0 var(--series-1); }
td.trenner, th.trenner { border-left: 1px solid var(--grid); }
td a.kz { text-decoration: none; }
td a.kz:hover { text-decoration: underline; }
.hinweis { color: var(--text-muted); font-size: 12px; }
.chart { width: 100%; height: 470px; }
details.tabelle summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; margin-top: 8px; }
.stamm { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.stamm dt { color: var(--text-secondary); }
.stamm dd { margin: 0; }
.export { float: right; margin: 0; font-size: 12.5px; color: var(--text-secondary); }
form.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.regel { display: inline-flex; gap: 2px; align-items: baseline; margin-right: 10px; }
form.regel .link, td .link { padding: 0; }
button:not(.link) { font: inherit; color: var(--text-primary); background: var(--page); border: 1px solid var(--axis); border-radius: 6px; padding: 5px 12px; min-height: 32px; cursor: pointer; }
button:not(.link):hover { background: var(--wash); }
.meldung { border-left: 3px solid var(--series-1); }
.betreiber-seite td { vertical-align: top; }