/* Zentrale der Empfänger – schlicht, Tokens aus /brand/tokens.css (Ampel immer mit Symbol und Text). */
* { box-sizing: border-box; }
body { margin: 0; background: var(--sunken); color: var(--text); font: var(--fs-text)/var(--lh-text) var(--f-body); }
h1, h2, h3 { font-family: var(--f-display); color: var(--ink); line-height: var(--lh-titel); margin: var(--s4) 0 var(--s2); }
h1 { font-size: var(--fs-h2); } h2 { font-size: var(--fs-h3); } h3 { font-size: var(--fs-lead); }
code { font-family: var(--f-mono); font-size: var(--fs-klein); word-break: break-all; }
.kopf { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--rand); background: var(--brand-ink); color: var(--on-ink); }
.kopf strong { font-family: var(--f-display); font-size: var(--fs-lead); }
.kopf__version { font-size: var(--fs-klein); opacity: .8; }
.reiter { display: flex; gap: var(--s2); margin-left: auto; flex-wrap: wrap; }
.reiter a { color: var(--on-ink); text-decoration: none; padding: var(--s2) var(--s3); border-radius: var(--radius-pill); min-height: 40px; display: inline-flex; align-items: center; gap: var(--s1); }
.reiter a[aria-current] { background: color-mix(in srgb, #fff 18%, transparent); }
.zahl { font-variant-numeric: tabular-nums; }
.reiter .zahl:empty { display: none; }
.reiter .zahl { background: var(--bad); border-radius: var(--radius-pill); padding: 0 .45em; font-size: var(--fs-klein); }
main { max-width: 1280px; margin: 0 auto; padding: var(--s4) var(--rand) var(--s7); }
.karte { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) 0; box-shadow: var(--schatten-karte); }
.schmal { max-width: 440px; margin: var(--s6) auto; }
form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; margin: var(--s3) 0; }
label { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-klein); color: var(--muted); }
input, select, button { font: inherit; min-height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); padding: 0 var(--s3); background: var(--surface); color: var(--ink); }
input[type=file] { padding: var(--s2); }
button { background: var(--brand); color: #fff; border-color: var(--brand); cursor: pointer; font-weight: 600; }
button:hover { background: var(--brand-dark); }
button.zweit, .schliessen { background: var(--surface); color: var(--brand-fg); }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.leise { color: var(--muted); font-size: var(--fs-klein); }
.status { min-height: 1.5em; }
.status.fehler { color: var(--bad); }
.leiste { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; }
.leiste h1, .leiste h2 { margin-right: auto; }
.tabelle-rahmen { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-dicht); }
.tabelle th, .tabelle td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
.tabelle th { color: var(--muted); font-weight: 600; cursor: pointer; user-select: none; }
.tabelle th[aria-sort=ascending]::after { content: " ▲"; } .tabelle th[aria-sort=descending]::after { content: " ▼"; }
.tabelle td.zahl { text-align: right; }
.tabelle tbody tr { cursor: pointer; }
.tabelle tbody tr:hover { background: var(--brand-soft); }
.ampel { display: inline-flex; gap: .3em; align-items: center; padding: 0 .5em; border-radius: var(--radius-pill); font-size: var(--fs-klein); border: 1px solid; }
.ampel--gruen { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.ampel--gelb { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.ampel--rot { color: var(--bad); background: var(--bad-bg); border-color: var(--bad-line); }
.ampel--grau { color: var(--muted); background: var(--unk-bg); border-color: var(--rule-strong); }
.marke { display: inline-block; margin-left: .4em; padding: 0 .45em; border-radius: var(--radius-pill); background: var(--unk-bg); color: var(--unk); font-size: var(--fs-klein); font-family: var(--f-body); font-weight: 400; }
.vereine { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s4); }
.vereine .karte { margin: 0; }
.detail { position: relative; }
.kv { border-collapse: collapse; } .kv th { text-align: left; color: var(--muted); font-weight: 400; padding: 2px var(--s4) 2px 0; vertical-align: top; }
.warnliste { list-style: none; padding: 0; } .warnliste li { padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.punkte { list-style: none; padding: 0; } .punkte li { padding: 2px 0; }
.kurve-rahmen { margin: var(--s3) 0; max-width: 480px; } .kurve-rahmen figcaption { font-size: var(--fs-klein); color: var(--ink); }
.kurve { width: 100%; height: 64px; display: block; }
.kurve-grund { stroke: var(--rule-strong); stroke-width: 1; }
.kurve-linie { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kurve-punkt { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.kurve-treffer { fill: transparent; } .kurve-treffer:hover { fill: var(--brand-soft); }
.release--zurueck { opacity: .7; }
.vereinwahl { border: 1px solid var(--rule); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: var(--s1); }
.vereinwahl label { flex-direction: row; align-items: center; gap: var(--s2); color: var(--text); }
.vereinwahl input { min-height: auto; }
.qr { background: #fff; padding: var(--s2); border: 1px solid var(--rule); }
.eingang { padding-left: var(--s4); } .eingang button { min-height: 36px; }
.leer { color: var(--muted); }
/* Geräteeinstellungen (zentrale-einst.js) */
.einst { flex-direction: column; align-items: stretch; }
.einst fieldset { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; border: 1px solid var(--rule); border-radius: var(--radius-sm); margin: 0; padding: var(--s3); }
.einst legend { font-weight: 600; color: var(--ink); padding: 0 var(--s1); }
.einst label small { font-size: var(--fs-klein); }
.einst input:not([type=number]) { min-width: 12em; }
.einst input[type=number] { width: 9em; }
.einst-standort { display: flex; flex-wrap: wrap; gap: var(--s3); }
.einst-standort[hidden] { display: none; }
.einst > button { align-self: flex-start; }
.einst-anwendung--ok { color: var(--ok); } .einst-anwendung--fehler { color: var(--bad); }
.einst-protokoll ul { padding-left: var(--s4); font-size: var(--fs-klein); } .einst-protokoll li { margin: var(--s1) 0; }
@media (max-width: 600px) { .reiter { margin-left: 0; } }