/* Zentrale – ruhiges, helles/dunkles Design. Keine Inline-Styles (CSP). */
:root {
  --bg: #f4f5f7; --flaeche: #ffffff; --flaeche2: #f0f1f4; --text: #16181d; --leise: #5e6472;
  --linie: #e1e3e8; --akzent: #2f5bea; --akzent-text: #ffffff; --gut: #1f8a4c; --warn: #b7791f;
  --schlecht: #c53030; --blase-ich: #2f5bea; --blase-ich-text: #fff; --blase: #eef0f4;
  --schatten: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115; --flaeche: #171a20; --flaeche2: #1d2129; --text: #e8eaef; --leise: #9aa1ae;
    --linie: #2a2f39; --akzent: #6b8cff; --akzent-text: #0b1020; --gut: #4cc38a; --warn: #e3a54a;
    --schlecht: #f07171; --blase-ich: #3b5bdb; --blase-ich-text: #fff; --blase: #232833;
    --schatten: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.laden { padding: 40px; color: var(--leise); }
.fehler { color: var(--schlecht); margin: 8px 0 0; min-height: 1.5em; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.zahl { font-variant-numeric: tabular-nums; }

/* ---------- Knöpfe & Felder */
.knopf {
  border: 1px solid var(--linie); background: var(--flaeche); border-radius: 10px;
  padding: 9px 14px; font-weight: 600;
}
.knopf:hover { border-color: var(--akzent); }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.klein { padding: 5px 10px; font-size: 13px; }
.knopf.gefahr { color: var(--schlecht); }
.knopf:disabled { opacity: .5; cursor: default; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.feld label { font-size: 13px; font-weight: 600; color: var(--leise); }
input[type=text], input[type=password], input[type=month], input:not([type]) {
  border: 1px solid var(--linie); background: var(--flaeche); border-radius: 10px;
  padding: 10px 12px; width: 100%;
}
input:focus, button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
input.code { font-size: 26px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Anmeldung */
.anmelden { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: var(--schatten); padding: 22px;
}
.anmelden .karte { width: 100%; max-width: 380px; }
.anmelden h1 { margin: 0 0 4px; font-size: 22px; }
.anmelden p { margin: 0 0 18px; }
.qr { background: #fff; border-radius: 12px; padding: 10px; width: 220px; margin: 0 auto 12px; }
.qr svg { display: block; width: 100%; height: auto; }
.geheimnis { font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all;
  background: var(--flaeche2); border-radius: 8px; padding: 8px; text-align: center; margin-bottom: 14px; }

/* ---------- Rahmen: Seitenleiste (breit) / Leiste unten (Handy) */
.rahmen { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.navi {
  background: var(--flaeche); border-right: 1px solid var(--linie); padding: 18px 12px;
  display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh;
}
.marke { font-weight: 800; font-size: 18px; padding: 4px 10px 16px; }
.navi a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 600;
}
.navi a:hover { background: var(--flaeche2); }
.navi a.aktiv { background: var(--akzent); color: var(--akzent-text); }
.navi .abstand { flex: 1; }
.navi .ich { padding: 8px 10px; font-size: 13px; color: var(--leise); }
.symbol { width: 20px; text-align: center; }
.marke-zahl { margin-left: auto; background: var(--schlecht); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 1px 7px; font-weight: 700; }
main { padding: 24px; max-width: 1180px; width: 100%; }
.kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kopf h2 { margin: 0; font-size: 22px; flex: 1; }
@media (max-width: 760px) {
  .rahmen { grid-template-columns: 1fr; }
  .navi {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; z-index: 5;
    flex-direction: row; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--linie);
  }
  .navi .marke, .navi .abstand, .navi .ich, .navi .nur-breit { display: none; }
  .navi a { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 8px; position: relative; }
  .navi a .symbol { font-size: 18px; }
  .marke-zahl { position: absolute; top: 0; right: 2px; margin: 0; }
  main { padding: 16px 16px 90px; }
}

/* ---------- Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; padding: 14px 16px; box-shadow: var(--schatten); }
.kachel .titel { font-size: 13px; color: var(--leise); font-weight: 600; }
.kachel .wert { font-size: 26px; font-weight: 750; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kachel .unter { font-size: 13px; color: var(--leise); margin-top: 2px; }
.plus { color: var(--gut); font-weight: 700; }
.minus { color: var(--schlecht); font-weight: 700; }

/* ---------- Diagramm */
.diagramm { padding: 14px 16px 8px; margin-bottom: 16px; }
.diagramm h3 { margin: 0 0 8px; font-size: 15px; }
.diagramm svg { width: 100%; height: 190px; display: block; }
.balken { fill: var(--akzent); }
.balken.heute { fill: var(--gut); }
.achse { stroke: var(--linie); }
.beschriftung { fill: var(--leise); font-size: 10px; }

/* ---------- Tabellen */
.tabelle-huelle { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
th { font-size: 12px; color: var(--leise); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
td.re, th.re { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.summe td { font-weight: 750; background: var(--flaeche2); }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--flaeche2); }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--leise); }
.punkt.gut { background: var(--gut); } .punkt.warn { background: var(--warn); } .punkt.schlecht { background: var(--schlecht); }
.etikett { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700; }
.etikett.gut { background: color-mix(in srgb, var(--gut) 15%, transparent); color: var(--gut); }
.etikett.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.etikett.schlecht { background: color-mix(in srgb, var(--schlecht) 15%, transparent); color: var(--schlecht); }
.abschnitt { margin-top: 22px; }
.abschnitt h3 { margin: 0 0 10px; font-size: 16px; }

/* ---------- Chat (wie WhatsApp) */
.chat { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 110px); min-height: 420px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; box-shadow: var(--schatten); }
.chat-liste { border-right: 1px solid var(--linie); overflow-y: auto; }
.chat-eintrag { display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--linie); padding: 12px 14px; }
.chat-eintrag:hover, .chat-eintrag.aktiv { background: var(--flaeche2); }
.chat-eintrag .oben { display: flex; gap: 8px; align-items: baseline; }
.chat-eintrag .name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-eintrag .vorschau { color: var(--leise); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-verlauf { display: flex; flex-direction: column; min-width: 0; }
.chat-kopf { padding: 12px 16px; border-bottom: 1px solid var(--linie); font-weight: 700; display: flex; gap: 10px; align-items: center; }
.chat-zurueck { display: none; }
.nachrichten { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.blase { max-width: 75%; background: var(--blase); padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  white-space: pre-wrap; word-wrap: break-word; align-self: flex-start; }
.blase.ich { background: var(--blase-ich); color: var(--blase-ich-text); border-radius: 14px 14px 4px 14px; align-self: flex-end; }
.blase time { display: block; font-size: 11px; opacity: .7; margin-top: 3px; text-align: right; }
.eingabe { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--linie); }
.eingabe input { flex: 1; }
.leer { display: grid; place-items: center; height: 100%; color: var(--leise); padding: 20px; text-align: center; }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .chat.offen .chat-liste { display: none; }
  .chat:not(.offen) .chat-verlauf { display: none; }
  .chat-zurueck { display: inline-block; }
}

/* ---------- Status */
.ampel { display: flex; gap: 14px; align-items: center; padding: 16px; margin-bottom: 16px; }
.ampel .gross { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.ampel .gross.gut { background: var(--gut); } .ampel .gross.schlecht { background: var(--schlecht); } .ampel .gross.warn { background: var(--warn); }
.ampel h3 { margin: 0; font-size: 17px; }
.probleme { margin: 6px 0 0; padding-left: 18px; color: var(--schlecht); }
.balken-anzeige { height: 8px; border-radius: 99px; background: var(--flaeche2); overflow: hidden; margin-top: 8px; }
.balken-anzeige svg { display: block; width: 100%; height: 8px; }
.fuell { fill: var(--gut); } .fuell.warn { fill: var(--warn); } .fuell.schlecht { fill: var(--schlecht); }

/* ---------- Hinweis-Kasten (Einmal-Passwort) */
.hinweis { background: color-mix(in srgb, var(--warn) 12%, var(--flaeche)); border: 1px solid var(--warn);
  border-radius: 12px; padding: 12px 14px; margin: 12px 0; }
.hinweis code { font-size: 18px; font-weight: 700; }
.zeile { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.zeile .feld { flex: 1; min-width: 160px; margin-bottom: 0; }
.formular { max-width: 520px; }

/* ---------- Drucken (Abrechnung) */
.nur-druck { display: none; }
@media print {
  body { background: #fff; color: #000; }
  .navi, .kein-druck, .knopf { display: none !important; }
  .rahmen { display: block; }
  main { padding: 0; max-width: none; }
  .nur-druck { display: block; }
  .tabelle-huelle { border: 0; box-shadow: none; }
  th, td { border-bottom: 1px solid #ccc; }
}