:root {
  --hg: #f5f7fa; --karte: #fff; --text: #1d2939; --grau: #667085; --linie: #e4e7ec;
  --blau: #2f5597; --hellblau: #9dc3e6; --orange: #e46c0a; --rot: #c00000; --gelb: #b54708; --gruen: #2e7d32;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hg); color: var(--text); font-size: 15px; line-height: 1.45; }
a { color: var(--blau); }
main { max-width: 1280px; margin: 0 auto; padding: 20px 20px 40px; }

.kopf { display: flex; align-items: center; gap: 24px; padding: 12px 20px; background: #fff;
  border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.marke { font-weight: 700; color: var(--blau); font-size: 18px; }
.marke span, .login h1 span { font-weight: 400; color: var(--grau); }
.kopf nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.kopf nav a { text-decoration: none; color: var(--text); padding: 6px 12px; border-radius: 8px; }
.kopf nav a.aktiv, .kopf nav a:hover { background: #eef3fb; color: var(--blau); }
.nutzer { color: var(--grau); font-size: 14px; }

.titelzeile { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
h1 { margin: 4px 0 16px; font-size: 24px; }
h2 { margin: 0 0 12px; font-size: 16px; }
.stand { color: var(--grau); margin: 0; font-size: 14px; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 16px; }
.kachel .wert { font-size: 28px; font-weight: 700; color: var(--blau); }
.kachel.warn .wert { color: var(--rot); }
.kachel .label { font-weight: 600; margin-top: 2px; }
.kachel .neben { color: var(--grau); font-size: 13px; margin-top: 2px; }

.warnungen { display: grid; gap: 8px; margin-bottom: 16px; }
.hinweis { border-radius: 10px; padding: 10px 14px; border-left: 4px solid; background: #fff; }
.hinweis.rot { border-color: var(--rot); background: #fef3f2; }
.hinweis.gelb { border-color: #f79009; background: #fffaeb; }
.hinweis.gruen { border-color: var(--gruen); background: #ecfdf3; }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .raster2 { grid-template-columns: 1fr; } }

.diagramm { width: 100%; height: 280px; }
.diagramm.klein { height: 230px; }
.diagramm svg { width: 100%; height: 100%; display: block; }
.gitter { stroke: var(--linie); stroke-width: 1; }
.jahr { stroke: #eaecf0; stroke-dasharray: 2 3; }
.achse { fill: var(--grau); font-size: 11px; }
.reihe { fill: none; stroke-width: 2.2; stroke-linejoin: round; }
.reihe.a { stroke: var(--blau); }
.reihe.g { stroke: var(--hellblau); stroke-width: 1.4; }
.markierung { stroke: var(--orange); stroke-dasharray: 4 3; stroke-width: 1.2; }
.wertlabel { fill: var(--blau); font-size: 12px; font-weight: 700; }
.tip { fill: transparent; }
.tip:hover { fill: rgba(47, 85, 151, .06); }
.legende { color: var(--grau); font-size: 13px; margin: 6px 0 0; }
.lg { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin: 0 5px 0 10px; }
.lg.a { background: var(--blau); } .lg.g { background: var(--hellblau); } .lg.ber { background: var(--orange); }

.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; color: var(--grau); font-weight: 600; border-bottom: 1px solid var(--linie); padding: 6px 8px; }
.tabelle td { border-bottom: 1px solid #f2f4f7; padding: 6px 8px; }
.tabelle td:not(:first-child), .tabelle th:not(:first-child) { text-align: right; }
.rot { color: var(--rot); font-weight: 600; }
.klein { color: var(--grau); font-size: 12px; }

.login { max-width: 360px; margin: 10vh auto; background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 28px; }
.login h1 { font-size: 22px; color: var(--blau); }
.login label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.login input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 15px; }
button { background: var(--blau); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-size: 15px; cursor: pointer; }
.login button { width: 100%; }
.fehler { color: var(--rot); font-size: 14px; }

.fuss { display: flex; justify-content: space-between; max-width: 1280px; margin: 0 auto; padding: 12px 20px 24px; color: var(--grau); font-size: 12px; }

/* Handy */
.karte { overflow-x: auto; }
@media (max-width: 640px) {
  main { padding: 12px 10px 30px; }
  .kopf { gap: 8px 16px; padding: 10px 12px; }
  .kopf nav { order: 3; flex-basis: 100%; }
  .kopf nav a { padding: 5px 9px; font-size: 14px; }
  .nutzer { margin-left: auto; font-size: 13px; }
  h1 { font-size: 20px; margin-bottom: 8px; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kachel { padding: 10px 12px; }
  .kachel .wert { font-size: 22px; }
  .kachel .label { font-size: 13px; }
  .kachel .neben { font-size: 12px; }
  .hinweis { font-size: 14px; }
  .karte { padding: 12px; }
  .diagramm { height: 220px; } .diagramm.klein { height: 200px; }
  .tabelle { font-size: 12.5px; } .tabelle th, .tabelle td { padding: 5px 4px; }
}

/* Anmeldung, 2FA */
button.link { background: none; color: var(--blau); padding: 0; font-size: inherit; text-decoration: underline; }
form.nutzer { margin: 0; }
.login p { color: var(--grau); font-size: 14px; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr img { width: 264px; height: 264px; image-rendering: pixelated; }
.geheim { font-family: ui-monospace, Menlo, monospace; background: #f2f4f7; padding: 8px 10px; border-radius: 8px;
  text-align: center; letter-spacing: .5px; word-break: break-all; font-size: 14px; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-family: ui-monospace, Menlo, monospace;
  background: #f2f4f7; padding: 12px; border-radius: 8px; margin: 12px 0; text-align: center; }
.login.breit { max-width: 440px; }
.login input.code { font-size: 22px; letter-spacing: 6px; text-align: center; }
.login a.knopf { display: block; text-align: center; background: var(--blau); color: #fff; padding: 10px; border-radius: 8px;
  text-decoration: none; }

/* Fälle */
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter input[type=search], .filter select { padding: 7px 10px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 14px; background: #fff; }
.filter input[type=search] { min-width: 200px; flex: 1; }
.schalter { font-size: 14px; display: flex; gap: 6px; align-items: center; }
.fortschritt { flex-basis: 100%; height: 6px; background: #eef1f6; border-radius: 3px; overflow: hidden; }
#balken { height: 100%; width: 0; background: var(--gruen); transition: width .3s; }
.faelle td { vertical-align: middle; }
.faelle td:nth-child(2), .faelle td.tarif, .faelle td.marken, .faelle td:nth-child(9), .faelle td:nth-child(10),
.faelle th:nth-child(2), .faelle th:nth-child(5), .faelle th:nth-child(8), .faelle th:nth-child(9), .faelle th:nth-child(10) { text-align: left; }
.faelle td.nr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.faelle td.tarif { max-width: 180px; font-size: 13px; color: var(--grau); }
.faelle select.st, .faelle input.notiz { padding: 5px 6px; border: 1px solid #d0d5dd; border-radius: 6px; font-size: 13px; background: #fff; }
.faelle input.notiz { width: 100%; min-width: 140px; }
.marken span { display: inline-block; font-size: 11.5px; padding: 1px 6px; border-radius: 10px; margin: 1px 2px 1px 0; white-space: nowrap; }
.marke-i { background: #eef3fb; color: var(--blau); }
.marke-g { background: #ecfdf3; color: var(--gruen); }
.marke-u { background: #fef3f2; color: var(--rot); }
.marke-m { background: #fffaeb; color: var(--gelb); }
.marke-c { background: #fef3f2; color: var(--rot); font-weight: 600; }
tr.speichert { opacity: .6; }
tr.gespeichert td { background: #ecfdf3; transition: background .3s; }
tr.fehler-zeile td { background: #fef3f2; }
.formular { display: grid; gap: 10px; }
.formular label { font-size: 14px; font-weight: 600; display: grid; gap: 4px; }
.kachel .wert.aus { color: var(--grau); }
.faelle td:nth-child(3), .faelle td:nth-child(4), .faelle td:nth-child(6), .faelle td:nth-child(7) { white-space: nowrap; }
.abruf { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
button:disabled { background: #98a2b3; cursor: not-allowed; }
.formular input { padding: 8px 10px; border: 1px solid #d0d5dd; border-radius: 8px; font-size: 15px; font-weight: 400; }
.nutzer a { color: var(--grau); }
.login a.knopf.hell { background: #eef3fb; color: var(--blau); margin: 4px 0 6px; }
.vorschau-band { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0;
  background: #fff4e5; color: #93370d; border-bottom: 1px solid #fedf89; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.vorschau-band button { background: #b54708; padding: 6px 12px; font-size: 13px; }
form.ansicht { margin: 0; }
.klein-knopf { background: #eef3fb; color: var(--blau); padding: 6px 12px; font-size: 13px; border-radius: 8px; }

/* verständliche Übersicht */
.kurz { border-left: 5px solid var(--blau); }
.kurz.ampel-rot { border-left-color: var(--rot); } .kurz.ampel-gelb { border-left-color: #f79009; } .kurz.ampel-gruen { border-left-color: var(--gruen); }
.kurz p { margin: 6px 0; }
.kurz .gross { font-size: 18px; line-height: 1.4; }
.aufgaben { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.aufgaben li { padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--linie); background: #f9fafb; }
.aufgaben li.ampel-rot { border-left-color: var(--rot); background: #fef3f2; }
.aufgaben li.ampel-gelb { border-left-color: #f79009; background: #fffaeb; }
.aufgaben li.ampel-gruen { border-left-color: var(--gruen); background: #ecfdf3; }
.aufgaben li.ampel-grau { color: var(--grau); }
.aufgaben a { font-weight: 600; white-space: nowrap; margin-left: 4px; }
.erklaerung { color: var(--grau); font-size: 14px; margin: -4px 0 8px; }
.begriffe summary { cursor: pointer; font-weight: 600; }
.begriffe dt { font-weight: 600; margin-top: 10px; }
.begriffe dd { margin: 2px 0 0; color: var(--grau); }
.anleitung ol { margin: 6px 0 0; padding-left: 20px; }
.anleitung li { margin: 3px 0; }

/* Erklärungen (Mouseover / Antippen) */
.karte { overflow-x: visible; }
.karte:has(> .tabelle), .karte:has(> table) { overflow-x: auto; }
.hilfe { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  margin-left: 5px; border-radius: 50%; background: #e4e9f2; color: var(--blau); font-size: 11.5px; font-weight: 700;
  cursor: help; vertical-align: middle; line-height: 1; outline: none; text-transform: none; }
.hilfe:hover, .hilfe:focus { background: var(--blau); color: #fff; }
.hilfe-text { display: none; position: absolute; z-index: 20; top: calc(100% + 8px); left: -10px; width: 270px;
  max-width: calc(100vw - 32px); padding: 10px 12px; border-radius: 10px; background: #1d2939; color: #fff;
  font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; letter-spacing: 0;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .18); }
.hilfe.rechts .hilfe-text { left: auto; right: -10px; }
.hilfe:hover .hilfe-text, .hilfe:focus .hilfe-text, .hilfe:focus-within .hilfe-text { display: block; }
th .hilfe-text { font-weight: 400; }

.reihe.o { stroke: var(--gruen); stroke-width: 2.2; stroke-dasharray: 6 4; }
.wertlabel.o { fill: var(--gruen); }
.lg.o { background: repeating-linear-gradient(90deg, var(--gruen) 0 6px, transparent 6px 9px); }