/* GSV Panel – Optik. Nur Werte aus tokens.css (var(--a-…)). Dunkel ist Vorgabe (tokens.css). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--a-grund);
  color: var(--a-text);
  font-family: var(--a-schrift);
  font-size: var(--a-groesse-3);
  line-height: var(--a-zeile);
}
a { color: var(--a-akzent); }
:focus-visible { outline: var(--a-fokus-dicke) solid var(--a-akzent); outline-offset: var(--a-fokus-dicke); }

.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-3);
  min-height: var(--a-kopf-hoehe);
  padding: 0 max(var(--a-abstand-4), env(safe-area-inset-right, 0px)) 0 max(var(--a-abstand-4), env(safe-area-inset-left, 0px));
  border-bottom: var(--a-linie-dicke) solid var(--a-linie);
  background: var(--a-flaeche);
}
.marke { font-family: var(--a-schrift-anzeige); font-weight: var(--a-gewicht-fett); font-size: var(--a-groesse-4); color: var(--a-text); text-decoration: none; }
.kopf nav { display: flex; align-items: center; gap: var(--a-abstand-3); flex-wrap: wrap; justify-content: flex-end; }
.kopf nav a { text-decoration: none; color: var(--a-text-leise); font-size: var(--a-groesse-2); }
.kopf nav a[aria-current="page"] { color: var(--a-text); }
.wer { font-size: var(--a-groesse-2); color: var(--a-text); font-weight: var(--a-gewicht-mittel); }

main {
  max-width: var(--a-inhalt-breite); margin: 0 auto;
  padding: var(--a-abstand-6) max(var(--a-abstand-4), env(safe-area-inset-right, 0px)) var(--a-abstand-7) max(var(--a-abstand-4), env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: var(--a-abstand-5);
}
main.breit { max-width: calc(var(--a-inhalt-breite) + var(--a-leiste-breite)); }
h1 { font-family: var(--a-schrift-anzeige); font-size: var(--a-groesse-6); font-weight: var(--a-gewicht-fett); margin: 0; text-wrap: balance; }
h2 { font-size: var(--a-groesse-4); font-weight: var(--a-gewicht-fett); margin: 0; }
p { margin: 0; }
.leise { color: var(--a-text-leise); font-size: var(--a-groesse-2); }

.karte {
  background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l);
  padding: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-4);
}
.anmelde-karte { width: 100%; max-width: var(--a-karte-breite); margin: var(--a-abstand-7) auto 0; }

form, .feldgruppe { display: flex; flex-direction: column; gap: var(--a-abstand-3); }
label { display: flex; flex-direction: column; gap: var(--a-abstand-1); font-size: var(--a-groesse-2); color: var(--a-text-leise); }
input, select {
  font: inherit; color: var(--a-text); background: var(--a-flaeche-2);
  border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-rund);
  min-height: var(--a-feld-hoehe); padding: 0 var(--a-abstand-4); width: 100%;
}
.reihe { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; align-items: center; }
.reihe > input, .reihe > select { flex: 1 1 var(--a-eintrag-min); width: auto; }
.reihe > input[type=file] { min-width: 0; max-width: 100%; }

button, .knopf {
  font: inherit; font-size: var(--a-groesse-2); font-weight: var(--a-gewicht-mittel);
  min-height: var(--a-feld-hoehe); padding: 0 var(--a-abstand-4); border-radius: var(--a-radius-rund);
  border: var(--a-linie-dicke) solid var(--a-linie); background: var(--a-flaeche-2); color: var(--a-text); cursor: pointer;
  transition: background var(--a-dauer-kurz) var(--a-kurve);
}
button:hover:not(:disabled) { background: var(--a-flaeche-3); }
button.haupt { background: var(--a-akzent); color: var(--a-text-auf-akzent); border-color: var(--a-akzent); }
button.haupt:hover:not(:disabled) { background: var(--a-akzent); }
button.gefahr { color: var(--a-fehler); }
button:disabled { opacity: 0.5; cursor: default; }

.meldung { font-size: var(--a-groesse-2); border-radius: var(--a-radius-m); padding: var(--a-abstand-2) var(--a-abstand-3); }
.meldung:empty { display: none; }
.meldung.gut { background: var(--a-gut-weich); color: var(--a-gut); }
.meldung.fehler { background: var(--a-fehler-weich); color: var(--a-fehler); }

.pille { display: inline-flex; align-items: center; font-size: var(--a-groesse-1); padding: 0 var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); color: var(--a-text-leise); line-height: var(--a-zeile); }
.pille.gut { background: var(--a-gut-weich); color: var(--a-gut); }
.pille.fehler { background: var(--a-fehler-weich); color: var(--a-fehler); }
.pille.akzent { background: var(--a-akzent-weich); color: var(--a-akzent); }

.konten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--a-karte-breite)), 1fr)); gap: var(--a-abstand-4); }
.konto { background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l); padding: var(--a-abstand-4); display: flex; flex-direction: column; gap: var(--a-abstand-3); min-width: 0; }
.konto.gesperrt { border-color: var(--a-fehler); }
.konto-kopf { display: flex; flex-direction: column; gap: var(--a-abstand-1); min-width: 0; }
.konto-name { font-weight: var(--a-gewicht-fett); overflow-wrap: anywhere; }
.konto-mail { color: var(--a-text-leise); font-size: var(--a-groesse-2); overflow-wrap: anywhere; }
.link-feld { display: flex; gap: var(--a-abstand-2); flex-wrap: wrap; }
.link-feld input { flex: 1 1 var(--a-feld-min); width: auto; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); }
.leer { color: var(--a-text-leise); text-align: center; padding: var(--a-abstand-6); border: var(--a-linie-dicke) dashed var(--a-linie); border-radius: var(--a-radius-l); }
.mail { border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-3); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.mail pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); color: var(--a-text-leise); }
code, .mono { font-family: var(--a-schrift-mono); font-size: var(--a-groesse-2); overflow-wrap: anywhere; }
[hidden] { display: none !important; /* hidden muss jede display-Regel oben schlagen */ }
a.knopf { display: inline-flex; align-items: center; text-decoration: none; }
.karte > button, .feldgruppe > button, .karte > a.knopf { align-self: flex-start; }
.konten { align-items: start; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--a-eintrag-min)), 1fr)); gap: var(--a-abstand-3); }
.kachel { display: flex; flex-direction: column; gap: var(--a-abstand-1); padding: var(--a-abstand-4); border-radius: var(--a-radius-l);
  background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); color: var(--a-text); text-decoration: none; min-width: 0;
  transition: border-color var(--a-dauer-kurz) var(--a-kurve); }
.kachel:hover { border-color: var(--a-akzent); }
.kachel-titel { font-size: var(--a-groesse-2); color: var(--a-text-leise); font-weight: var(--a-gewicht-mittel); }
.kachel-wert { font-family: var(--a-schrift-anzeige); font-size: var(--a-groesse-6); font-weight: var(--a-gewicht-fett); font-variant-numeric: tabular-nums; line-height: var(--a-zeile); }
.liste { margin: 0; padding-left: var(--a-abstand-5); display: flex; flex-direction: column; gap: var(--a-abstand-1); font-size: var(--a-groesse-2); }
.rechte-dialog { display: flex; flex-direction: column; gap: var(--a-abstand-2); border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-3); }
.recht-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a-abstand-2); flex-wrap: wrap; }
.reihe > label { flex: 1 1 var(--a-eintrag-min); min-width: 0; }
pre.konsole { margin: 0; max-height: calc(var(--a-abstand-8) * 5); overflow: auto; padding: var(--a-abstand-3); border-radius: var(--a-radius-m);
  background: var(--a-grund); border: var(--a-linie-dicke) solid var(--a-linie); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1);
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--a-text-leise); }
button[aria-pressed="true"] { background: var(--a-akzent-weich); color: var(--a-akzent); border-color: var(--a-akzent); }
.balken { height: var(--a-abstand-2); border-radius: var(--a-radius-rund); background: var(--a-flaeche-3); overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--a-akzent); }

.balken.voll > span { background: var(--a-fehler); }
form.reihe { flex-direction: row; }
form.reihe > input { flex: 1 1 var(--a-feld-min); width: auto; }
.marke { white-space: nowrap; }
.reiter { border-bottom: var(--a-linie-dicke) solid var(--a-linie); padding-bottom: var(--a-abstand-3); }
textarea.editor { width: 100%; min-height: calc(var(--a-abstand-8) * 5); font-family: var(--a-schrift-mono); font-size: var(--a-groesse-1); color: var(--a-text);
  background: var(--a-grund); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); padding: var(--a-abstand-3); resize: vertical; }
button.dateiname { background: none; border: none; min-height: 0; padding: 0; color: var(--a-akzent); text-align: left; overflow-wrap: anywhere; }
button.dateiname:hover:not(:disabled) { background: none; text-decoration: underline; }
label.haken { flex-direction: row; align-items: center; gap: var(--a-abstand-1); color: var(--a-text); font-size: var(--a-groesse-2); }
label.haken input { width: auto; min-height: 0; }
.meldung.hinweis { background: var(--a-akzent-weich); color: var(--a-akzent); }
textarea.editor.kurz { min-height: 0; }

/* Graphen (Panel.linien) – Farben nur aus Tokens */
.graph { display: flex; flex-direction: column; gap: var(--a-abstand-2); }
.graph-flaeche { position: relative; }
.graph svg { width: 100%; height: var(--a-abstand-8); display: block; background: var(--a-grund); border-radius: var(--a-radius-m); touch-action: pan-y; }
.graph-klein svg { height: var(--a-abstand-7); }
.graph .linie { fill: none; stroke-width: var(--a-fokus-dicke); vector-effect: non-scaling-stroke; }
.graph .serie-1 { stroke: var(--a-akzent); color: var(--a-akzent); }
.graph .serie-2 { stroke: var(--a-warn); color: var(--a-warn); }
.graph .serie-3 { stroke: var(--a-gut); color: var(--a-gut); }
.graph .serie-4 { stroke: var(--a-text-leise); color: var(--a-text-leise); }
.graph .grenze { stroke: var(--a-linie); stroke-dasharray: var(--a-abstand-1) var(--a-abstand-1); vector-effect: non-scaling-stroke; }
.graph .grenze.grenze-warn { stroke: var(--a-warn); } .graph .grenze.grenze-fehler { stroke: var(--a-fehler); }
.legende .grenze-warn { color: var(--a-warn); } .legende .grenze-fehler { color: var(--a-fehler); }
.graph .zeiger { stroke: var(--a-text-leise); vector-effect: non-scaling-stroke; }
.graph .legende { display: flex; flex-wrap: wrap; gap: var(--a-abstand-3); font-size: var(--a-groesse-1); color: var(--a-text-leise); }
.graph-tipp { position: absolute; top: var(--a-abstand-2); display: flex; flex-direction: column; gap: var(--a-abstand-1); background: var(--a-flaeche-2);
  border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); padding: var(--a-abstand-2) var(--a-abstand-3); font-size: var(--a-groesse-1);
  box-shadow: var(--a-schatten-2); pointer-events: none; white-space: nowrap; }
.ampel { display: inline-block; width: var(--a-abstand-3); height: var(--a-abstand-3); border-radius: var(--a-radius-rund); background: var(--a-text-leise); flex: none; }
.ampel.gruen { background: var(--a-gut); } .ampel.gelb { background: var(--a-warn); } .ampel.rot { background: var(--a-fehler); }
.dienst { display: flex; align-items: center; gap: var(--a-abstand-2); font-size: var(--a-groesse-2); }
.tabelle-rahmen { overflow-x: auto; }
table.liste-tabelle { border-collapse: collapse; width: 100%; font-size: var(--a-groesse-2); }
table.liste-tabelle th, table.liste-tabelle td { text-align: left; padding: var(--a-abstand-2) var(--a-abstand-3); border-bottom: var(--a-linie-dicke) solid var(--a-linie); vertical-align: top; }
table.liste-tabelle th { color: var(--a-text-leise); font-weight: var(--a-gewicht-mittel); font-size: var(--a-groesse-1); }
.antwort { border-left: var(--a-fokus-dicke) solid var(--a-linie); padding-left: var(--a-abstand-3); display: flex; flex-direction: column; gap: var(--a-abstand-1); }
.antwort.staff { border-left-color: var(--a-akzent); }
.raster-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--a-karte-breite)), 1fr)); gap: var(--a-abstand-3); }

/* Kopf mit Konto-Menü, Strg+K-Palette, Handy-Menü (panel-21/22/23) */
.kopf-links { gap: var(--a-abstand-2); flex-wrap: nowrap; }
.kopf-rechts { position: relative; display: flex; align-items: center; gap: var(--a-abstand-2); }
.burger { display: none; min-height: var(--a-feld-hoehe); }
.suche-knopf { color: var(--a-text-leise); }
button.wer { background: none; border-color: transparent; }
.konto-menue { position: absolute; right: 0; top: 100%; margin-top: var(--a-abstand-2); z-index: 20; display: flex; flex-direction: column; gap: var(--a-abstand-1);
  min-width: var(--a-eintrag-min); padding: var(--a-abstand-2); background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); box-shadow: var(--a-schatten-2); }
.konto-menue > * { text-align: left; justify-content: flex-start; }
.konto-menue a { padding: var(--a-abstand-2) var(--a-abstand-4); color: var(--a-text); text-decoration: none; font-size: var(--a-groesse-2); }
.ikon { display: inline-flex; width: 1.1em; height: 1.1em; }
.ikon svg { width: 100%; height: 100%; }
.melden-knopf { display: inline-flex; align-items: center; gap: var(--a-abstand-1); }
.glocke { position: relative; }
.glocke-zahl { position: absolute; top: 0; right: 0; transform: translate(35%, -35%); min-width: var(--a-abstand-5); padding: 0 var(--a-abstand-1); border-radius: var(--a-radius-rund);
  background: var(--a-fehler); color: var(--a-text-auf-akzent); font-size: var(--a-groesse-1); line-height: var(--a-zeile); text-align: center; }
.glocke-liste { min-width: var(--a-karte-breite); }
.melden-ebene { position: fixed; inset: 0; z-index: 40; background: var(--a-schleier); cursor: crosshair; }
.melden-rahmen { position: fixed; pointer-events: none; border: calc(var(--a-linie-dicke) * 3) solid var(--a-fehler); border-radius: var(--a-radius-s); background: var(--a-fehler-weich); }
.melden-hinweis { position: fixed; top: var(--a-abstand-4); left: 50%; transform: translateX(-50%); background: var(--a-flaeche); color: var(--a-text); border: var(--a-linie-dicke) solid var(--a-linie);
  border-radius: var(--a-radius-rund); padding: var(--a-abstand-2) var(--a-abstand-4); font-size: var(--a-groesse-2); box-shadow: var(--a-schatten-2); }
.meldung-bild { display: block; max-width: 100%; max-height: calc(var(--a-abstand-8) * 5); object-fit: contain; border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-m); }
.palette { position: fixed; inset: 0; z-index: 30; background: var(--a-schleier); display: flex; align-items: flex-start; justify-content: center; padding: var(--a-abstand-8) var(--a-abstand-4) var(--a-abstand-4); overflow-y: auto; }
.palette-box { width: 100%; max-width: var(--a-inhalt-breite); background: var(--a-flaeche); border: var(--a-linie-dicke) solid var(--a-linie); border-radius: var(--a-radius-l);
  box-shadow: var(--a-schatten-2); padding: var(--a-abstand-4); display: flex; flex-direction: column; gap: var(--a-abstand-3); }
.palette-liste { display: flex; flex-direction: column; gap: var(--a-abstand-1); max-height: calc(var(--a-abstand-8) * 5); overflow: auto; }
.palette-liste button { display: flex; justify-content: space-between; text-align: left; border-color: transparent; background: none; }
.palette-liste button.gewaehlt { background: var(--a-akzent-weich); color: var(--a-akzent); }
@media (max-width: 48em) {
  .burger { display: inline-flex; align-items: center; }
  .kopf { flex-wrap: wrap; }
  .kopf nav#hauptnav { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--a-abstand-3); }
  .kopf nav#hauptnav.offen { display: flex; }
  .kopf nav#hauptnav a { padding: var(--a-abstand-2) 0; font-size: var(--a-groesse-3); }
  .suche-knopf { display: none; }
  main { padding-top: var(--a-abstand-4); }
  h1 { font-size: var(--a-groesse-5); }
  table.liste-tabelle { font-size: var(--a-groesse-1); }
}

/* panel-58: Rechnungen + Druckansicht (Druck schaltet per JS auf das helle Thema der Tokens) */
td.zahl, th.zahl, table.liste-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechnung-kopf { display: flex; justify-content: space-between; gap: var(--a-abstand-5); flex-wrap: wrap; }
.rechnung-daten { display: flex; flex-direction: column; gap: var(--a-abstand-1); text-align: right; }
.rechnung-summe td { font-weight: var(--a-gewicht-fett); font-size: var(--a-groesse-4); }
table.liste-tabelle tfoot td { border-bottom: none; }
.rechnung-fuss { border-top: var(--a-linie-dicke) solid var(--a-linie); padding-top: var(--a-abstand-3); }
@media print {
  .kopf, .nicht-drucken, [data-melden-popup] { display: none; }
  main { max-width: none; padding: 0; }
  .rechnung-blatt { border: none; padding: 0; background: var(--a-grund); }
}

/* Auslastung: kompakt, Achsen mit Werten und Zeiten, Diagramme im 2x2-Raster */
.graph-rahmen { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--a-abstand-2); align-items: stretch; }
.achse-y { display: flex; flex-direction: column; justify-content: space-between; text-align: right; white-space: nowrap; font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; }
.achse-x { grid-column: 2; min-width: 0; overflow: hidden; display: flex; justify-content: space-between; white-space: nowrap; font-size: var(--a-groesse-1); color: var(--a-text-leise); font-variant-numeric: tabular-nums; }
.graf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-abstand-3); }
@media (max-width: 35rem) { .graf-raster { grid-template-columns: minmax(0, 1fr); } }
.graf-feld { display: flex; flex-direction: column; gap: var(--a-abstand-1); min-width: 0; }
.kacheln.dicht { gap: var(--a-abstand-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--a-eintrag-min) * 0.75)), 1fr)); }
.kacheln.dicht .kachel { padding: var(--a-abstand-2) var(--a-abstand-3); }