:root {
  --grund: #0A1420; --flaeche: #0F1D2C; --linie: #215767; --akzent: #FF8A3D; --etikett: #7FE0EE; --text: #F2F8FA; --leise: #B9CBD2; --fehler: #FFB4A8;
  --schrift: Roboto, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --zahlen: "Roboto Mono", "Droid Sans Mono", ui-monospace, Consolas, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 500 17px/1.45 var(--schrift); }
a { color: var(--etikett); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
[hidden] { display: none !important; }
h1 { font-size: 1.75rem; font-weight: 800; line-height: 1.15; margin: 1rem 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 800; margin: 1.75rem 0 .6rem; }
h2:focus { outline: none; }
main { padding: 0 16px 56px; margin: 0 auto; }
main.schmal { max-width: 560px; }
main.breit { max-width: 1320px; }

.testband { margin: 0; padding: 4px 16px; background: var(--etikett); color: var(--grund); font-weight: 700; font-size: .9rem; }
.kopf { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; text-decoration: none; }
.marke img { display: block; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: center; }
.kopf nav a, .linkknopf { color: var(--etikett); padding: 8px 0; font: inherit; font-size: .95rem; background: none; border: 0; cursor: pointer; text-decoration: none; }
.kopf nav a:hover, .linkknopf:hover { text-decoration: underline; }
.kopf nav form { margin: 0; }

.knopf { display: inline-block; min-height: 56px; padding: 14px 22px; border: 2px solid var(--akzent); border-radius: 6px; background: var(--akzent); color: var(--grund); font: 800 1.05rem/1.2 var(--schrift); text-align: center; text-decoration: none; cursor: pointer; }
.knopf:disabled { opacity: .6; }
.knopf.neben { background: transparent; color: var(--text); border-color: var(--etikett); font-weight: 700; }
.knopf.voll { display: block; width: 100%; margin-top: 1rem; }
.knopfreihe { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-top: 1.25rem; }

label, .feldname, legend { display: block; color: var(--etikett); font-weight: 700; font-size: .95rem; margin: 1rem 0 .3rem; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
input:not([type=radio]):not([type=checkbox]), textarea, select { width: 100%; min-height: 52px; padding: 10px 12px; border: 1.5px solid var(--etikett); border-radius: 6px; background: var(--flaeche); color: var(--text); font: 600 1.05rem var(--schrift); color-scheme: dark; }
textarea { min-height: 80px; }
.festwert { margin: 0; font-weight: 700; font-size: 1.1rem; }
.ag-name { margin: 0; color: var(--text); font-weight: 800; font-size: 1.2rem; }
.anleitung { color: var(--leise); font-size: .95rem; margin-top: 0; }

.wahl { display: flex; align-items: center; gap: 14px; min-height: 56px; margin: 8px 0 0; padding: 10px 14px; border: 1.5px solid var(--linie); border-radius: 6px; background: var(--flaeche); color: var(--text); font-weight: 600; font-size: 1.02rem; cursor: pointer; }
.wahl input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--akzent); }
.wahl:has(input:checked) { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }

/* Zahlenfelder sehen aus wie das Zählwerk am Stromzähler. */
.zahlzeile { display: grid; grid-template-columns: 1fr 112px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linie); }
.zahlzeile label { margin: 0; color: var(--text); font-weight: 600; font-size: 1rem; }
.zahlzeile small { display: block; margin-top: 3px; color: var(--leise); font-weight: 500; font-size: .85rem; }
input.zaehlwerk:not([type=radio]):not([type=checkbox]) { min-height: 60px; padding: 6px 10px; border: 2px solid var(--etikett); border-radius: 3px; background: #050B12; color: var(--etikett); font: 700 1.7rem/1 var(--zahlen); text-align: right; letter-spacing: .04em; box-shadow: inset 0 0 0 3px #050B12, inset 0 0 0 4px var(--linie); }
input.zaehlwerk:not([type=radio]):not([type=checkbox]):focus { border-color: var(--akzent); outline: none; }

.fehler { margin: .5rem 0; padding: 8px 12px; border-left: 4px solid var(--fehler); color: var(--fehler); font-weight: 700; font-size: .95rem; }
.hinweis { margin: .75rem 0; padding: 10px 12px; border-left: 4px solid var(--etikett); }
.hinweis.warning { white-space: pre-wrap; }
.hinweis.error { border-color: var(--fehler); color: var(--fehler); }
.probe { margin: .75rem 0; padding: 12px 14px; border: 2px solid var(--akzent); color: var(--akzent); font: 800 1.05rem var(--schrift); }
.login-logo { display: block; width: 200px; height: auto; margin: 2rem auto 1.5rem; }
.danke { color: var(--etikett); margin: 2rem 0; }
.legende { color: var(--leise); font-size: .95rem; margin: 0 0 .75rem; }

.zeitwahl { display: flex; align-items: center; gap: 12px; margin: .5rem 0 1rem; }
.zeitwahl a { display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--linie); border-radius: 6px; color: var(--text); font-size: 1.5rem; text-decoration: none; }
.zeitwahl strong { font-weight: 700; }

.ziffern, dd, td.z { font-family: var(--zahlen); }
.kennzahl { margin: 0 0 1rem; color: var(--leise); }
.kennzahl .ziffern { color: var(--text); font-weight: 700; font-size: 1.3rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 1rem 0; border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.kacheln > div { padding: 12px 14px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.kacheln dt { color: var(--etikett); font-size: .88rem; font-weight: 700; }
.kacheln dd { margin: 4px 0 0; font-size: 1.45rem; font-weight: 700; }
.kacheln.zwei { grid-template-columns: 1fr 1fr; }

.zweispaltig { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .zweispaltig { grid-template-columns: 280px 1fr; } }
.namen { list-style: none; margin: 0; padding: 0; }
.namen li { padding: 8px 0; border-bottom: 1px solid var(--linie); }

.tabelle { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
thead th { color: var(--etikett); font-family: var(--schrift); font-weight: 700; font-size: .85rem; vertical-align: bottom; }
tbody th { font-weight: 700; white-space: nowrap; }
td.z, th.z { text-align: right; white-space: nowrap; }
thead th.z { white-space: normal; }
td.stark { font-weight: 700; color: var(--text); }
table.dicht th, table.dicht td { padding: 6px 6px; font-size: .84rem; }
tr.storniert td { color: var(--leise); text-decoration: line-through; }
.marke-spaet { display: inline-block; padding: 1px 6px; border: 1px solid var(--akzent); border-radius: 3px; color: var(--akzent); font-size: .82rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.position { display: block; }
.k-unter { margin: 3px 0 0; color: var(--leise); font-size: .8rem; }
.b-rueck { fill: var(--akzent); }
.punkt { display: inline-block; width: 11px; height: 11px; margin: 0 3px 0 8px; border-radius: 2px; }
.punkt:first-child { margin-left: 0; }
.p-erledigt { background: var(--etikett); }
.p-rueck { background: var(--akzent); }
.tagesbalken { display: flex; align-items: flex-end; gap: 2px; height: 170px; padding-bottom: 2px; border-bottom: 1px solid var(--linie); max-width: 1100px; }
.tagbalken { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; text-decoration: none; }
.tagbalken svg { flex: 1; width: 100%; min-height: 0; display: block; }
.tagbalken:hover svg, .tagbalken:focus-visible svg { background: rgba(127, 224, 238, .12); }
.tagbalken span { height: 18px; color: var(--leise); font: 500 .75rem/18px var(--zahlen); text-align: center; white-space: nowrap; }
.dreier { display: grid; gap: 0 32px; }
@media (min-width: 1000px) { .dreier { grid-template-columns: repeat(3, 1fr); } }
.b-zeile.eng { grid-template-columns: minmax(0, 170px) 1fr 60px; }
.b-zeile.eng .b-name { white-space: normal; overflow: visible; }
table.vergleich thead th a { color: var(--etikett); }
table.vergleich .b-spalte { width: 14%; min-width: 70px; }
.stand-gross { margin: 1rem 0; padding: 16px 18px; border: 2px solid var(--etikett); border-radius: 6px; background: var(--flaeche); }
.stand-gross p { margin: 0; }
.stand-titel { color: var(--etikett); font-weight: 700; }
.stand-betrag { margin: 2px 0 !important; font: 800 2.6rem/1.15 var(--zahlen); letter-spacing: -.02em; }
.stand-unter { color: var(--leise); font-size: .95rem; }
.erklaerung { margin: 1rem 0; border: 1.5px solid var(--linie); border-radius: 6px; padding: 0 14px; }
.erklaerung summary { min-height: 52px; display: flex; align-items: center; color: var(--akzent); font-weight: 800; cursor: pointer; }
.erklaerung summary::after { content: "anzeigen"; margin-left: auto; color: var(--etikett); font-weight: 600; font-size: .9rem; }
.erklaerung[open] summary::after { content: "schließen"; }
.erklaerung summary::-webkit-details-marker { display: none; }
.erklaerung ol, .erklaerung ul, .einfach ul { margin: .4rem 0 .8rem; padding-left: 1.3rem; }
.erklaerung li, .einfach li { margin-bottom: .35rem; }
.erklaerung .tabelle { margin-bottom: .8rem; }
.beispiel { padding: 10px 12px; border-left: 4px solid var(--etikett); background: var(--flaeche); }
.einfach { padding: 0 0 8px 22px; }
.einfach p { margin: .5rem 0; }
.b-spalte { width: 30%; min-width: 70px; vertical-align: middle; }
.b-spalte svg { display: block; width: 100%; height: 12px; }
.marke-misch { display: inline-block; padding: 1px 6px; border: 1px solid var(--etikett); border-radius: 3px; color: var(--etikett); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.rechenweg { border-bottom: 1px solid var(--linie); padding: 2px 0; }
.rechenweg summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 48px; padding: 8px 0; cursor: pointer; font-weight: 700; }
.rechenweg summary::before { content: "›"; color: var(--etikett); font-size: 1.3rem; line-height: 1; }
.rechenweg[open] summary::before { transform: rotate(90deg); }
.rechenweg summary::-webkit-details-marker { display: none; }
.r-tag { min-width: 7rem; }
.r-womit { flex-basis: 100%; padding-left: 22px; color: var(--leise); font-weight: 600; font-size: .92rem; }
.r-womit .ziffern { color: var(--text); }
.r-formel, .r-ergebnis, .r-regel { margin: .5rem 0; }
.r-ergebnis { font-weight: 800; }
.r-regel { color: var(--leise); font-size: .85rem; margin-bottom: 1rem; }
.r-posten { display: inline-block; margin-right: 12px; }
tr.summe td { font-weight: 800; }
.filter { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: end; max-width: 460px; margin-bottom: 1rem; }
.filter label { grid-column: 1 / -1; }
.tabelle input { min-width: 90px; }

.balken { max-width: 900px; }
.b-zeile { display: grid; grid-template-columns: 190px 1fr 96px; gap: 10px; align-items: center; margin-bottom: 6px; }
.b-zeile svg { display: block; width: 100%; height: 16px; }
.b-name { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) {
  .b-zeile, .b-zeile.eng { grid-template-columns: 1fr 96px; gap: 2px 10px; margin-bottom: 10px; }
  .b-zeile svg { grid-column: 1 / -1; grid-row: 2; }
}
.b-zahl { font: 600 .88rem var(--zahlen); text-align: right; }
.b-wert { fill: var(--etikett); }
.b-deckel { fill: var(--akzent); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Zwei-Faktor-Anmeldung */
.qr { background: #fff; padding: 12px; width: min(260px, 100%); border-radius: 8px; margin: 12px 0; box-sizing: border-box; }
.qr svg { display: block; width: 100%; height: auto; }
.schluessel { font-family: monospace; word-break: break-all; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-family: monospace; }
.codes li { word-break: break-all; }

/* Firmenportal */
.kopf nav { margin-left: auto; }
.menue-schalter { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menue-knopf { color: var(--etikett); padding: 8px 12px; border: 1px solid var(--linie); border-radius: 6px; cursor: pointer; font-size: .95rem; }
.menue-schalter:focus-visible ~ .kopf .menue-knopf { outline: 2px solid var(--etikett); }
.rahmen { display: block; }
.seitenleiste { display: none; padding: 12px 16px; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.menue-schalter:checked ~ .rahmen .seitenleiste { display: block; }
.seitenleiste a { display: block; color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: 6px; }
.seitenleiste a:hover { background: var(--grund); }
.seitenleiste a.aktiv { color: var(--etikett); font-weight: 800; }
.leiste-bereich { margin: 16px 0 2px; padding: 0 10px; color: var(--leise); font-size: .82rem; }
.seitenleiste a.leiste-unterpunkt { padding: 6px 10px 6px 24px; font-size: .95rem; color: var(--leise); }
.seitenleiste a.leiste-unterpunkt.aktiv { color: var(--akzent); }
.rubriken { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.rubrik { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--text); text-decoration: none; }
.rubrik:hover { border-color: var(--etikett); }
.rubrik-name { font-weight: 800; font-size: 1.1rem; }
.rubrik-zahl { display: flex; flex-direction: column; }
.rubrik-zahl strong { font-family: var(--zahlen); font-size: 1.35rem; }
.rubrik-etikett { color: var(--leise); font-size: .85rem; }
@media (min-width: 900px) {
  .menue-knopf { display: none; }
  .rahmen { display: flex; align-items: flex-start; }
  .seitenleiste { display: block; flex: 0 0 220px; min-height: calc(100vh - 60px); box-sizing: border-box; border-bottom: 0; border-right: 1px solid var(--linie); }
  .rahmen main { flex: 1 1 auto; min-width: 0; }
}

/* Offline-Speicher */
.offline-stand { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--etikett); border-radius: 6px; }
.offline-stand p { margin: 4px 0; }
.offline-gespeichert { margin: 16px 0; padding: 16px; border: 2px solid var(--etikett); border-radius: 8px; }
.offline-gespeichert h2 { margin-top: 0; }
.freigabe { display: flex; gap: 8px; align-items: center; min-width: 240px; }
.freigabe input { min-width: 0; flex: 1; }
.freigabe .knopf { min-height: 40px; padding: 6px 12px; }
.sr-nur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }