:root{
  --bg:#0f1417; --karte:#171e23; --feld:#1f272e; --linie:#2c363e;
  --text:#e3e9ed; --grau:#8b98a3; --blau:#3aa6d8; --gruen:#57c98a;
  --gelb:#e0a33c; --rot:#d9614f;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--sans);
  padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--blau);text-decoration:none}
main{max-width:820px;margin:0 auto;padding:12px 12px 88px}
main.mitte{display:flex;align-items:center;justify-content:center;min-height:80vh;padding-bottom:12px}
h1{font-size:20px;font-weight:600;margin:0 0 12px}
h1 .grau{font-weight:400;font-size:16px}

header{position:sticky;top:0;z-index:9;display:flex;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px;background:#0c1013;
  border-bottom:1px solid var(--linie)}
.marke{font-weight:600;flex:1;letter-spacing:.01em}
.ich{width:29px;height:29px;border-radius:50%;background:var(--feld);color:var(--text);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.sync{font-size:11px;color:var(--grau);padding:3px 8px;border-radius:20px;background:var(--feld)}
.sync.gut{color:var(--gruen)} .sync.wartet{color:var(--gelb)} .sync.offline{color:var(--rot)}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  padding:14px;margin-bottom:12px}
a.karte.block{display:block;color:inherit}
.karte h1{margin-bottom:14px}

.zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.zeile.mitteln{align-items:baseline;margin-top:2px}
.beschriftung{font-size:11px;color:var(--grau);text-transform:uppercase;letter-spacing:.09em}
.klein2{font-size:12px}
.hinweis{font-size:13px;color:var(--grau);margin:8px 0 0}
.grau{color:var(--grau)} .blau{color:var(--blau)} .gruen{color:var(--gruen)}
.gelb{color:var(--gelb)} .rot{color:var(--rot)}
.trocken-t{color:var(--gruen)} .mittel-t{color:var(--gelb)}
.nass-t{color:var(--rot)} .leer-t{color:var(--grau)}
.warn{background:rgba(224,163,60,.12);border:1px solid rgba(224,163,60,.4);color:var(--gelb);
  padding:10px 12px;border-radius:10px;font-size:14px}
.gutmeldung{background:rgba(87,201,138,.12);border:1px solid rgba(87,201,138,.4);color:var(--gruen);
  padding:10px 12px;border-radius:10px;font-size:14px}
.zurueck{margin:0 0 8px;font-size:13px}
.verborgen{display:none}

.wert{font-family:var(--mono);font-size:28px;font-variant-numeric:tabular-nums;
  line-height:1.1;letter-spacing:-.02em;display:inline-flex;align-items:baseline}
.wert .eh{font-size:11px;color:var(--grau);margin-left:5px;letter-spacing:.08em;text-transform:uppercase}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px}

/* Diagramme brauchen einen Kasten mit fester Höhe. Ohne den richtet sich
   Chart.js nach der Zeichenfläche, die sich wiederum nach dem Kasten richtet,
   und beide schaukeln sich bei jedem Neuzeichnen weiter hoch. */
.diagramm{position:relative;height:200px;margin-top:10px}
.diagramm.gross{height:260px}
.diagramm canvas{display:block}

.balken{height:5px;background:var(--feld);border-radius:3px;overflow:hidden;margin:9px 0 7px}
.balken i{display:block;height:100%;background:var(--blau)}

.stufen{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.pille{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--feld);color:var(--grau)}
.pille.trocken{color:var(--gruen)} .pille.mittel{color:var(--gelb)} .pille.nass{color:var(--rot)}

form{display:block}
form.spalte label{margin-bottom:12px}
label{display:block;font-size:11px;color:var(--grau);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:10px}
label.waag{display:flex;align-items:center;gap:8px;text-transform:none;font-size:14px;
  letter-spacing:0;color:var(--text)}
label.waag input{width:auto}
label.oben{margin-top:14px}
input,select,textarea{display:block;width:100%;margin-top:4px;background:var(--feld);
  border:1px solid var(--linie);color:var(--text);border-radius:9px;padding:11px 12px;
  font:16px var(--sans)}
input[type=number],input[type=datetime-local]{font-family:var(--mono);font-variant-numeric:tabular-nums}
input[readonly]{color:var(--grau)}
input:focus,select:focus{outline:2px solid var(--blau);outline-offset:1px}
input[type=range]{padding:0;background:none;border:0;accent-color:var(--blau);margin-top:8px}
input[type=checkbox]{width:auto;margin:0}
.gitter2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.mit-einheit{position:relative}
.mit-einheit span{position:absolute;right:12px;bottom:12px;font-size:13px;color:var(--grau)}

.btn{display:block;width:100%;text-align:center;background:var(--blau);color:#08131a;border:0;
  border-radius:9px;padding:12px 16px;font:600 15px var(--sans);cursor:pointer;margin-top:4px}
.btn.gross{padding:15px;font-size:16px;margin-top:14px}
.btn.klein{width:auto;padding:7px 13px;font-size:13px;margin:0}
.btn.voll{width:100%}
.loeschen{background:none;border:0;color:#6b7a86;font-size:13px;cursor:pointer;padding:0}
.loeschen:hover{color:var(--rot)}
.aendern:hover{color:var(--blau)}

dialog.dlg{background:var(--karte);color:var(--text);border:1px solid var(--linie);
  border-radius:12px;padding:16px;width:min(420px,92vw);max-width:none}
dialog.dlg::backdrop{background:rgba(0,0,0,.6)}
.dlg-zu{display:block;margin:12px auto 0}

/* Auswahlleiste klebt über der Navigation, damit sie bei langen Listen erreichbar bleibt */
.massen{position:sticky;bottom:calc(62px + env(safe-area-inset-bottom));z-index:8;
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--karte);border:1px solid var(--blau);border-radius:12px;
  padding:12px 14px;margin-bottom:12px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.massen.verborgen{display:none}
.massen .beschriftung{flex:1;min-width:110px;color:var(--text)}
.btn.gefahr{background:var(--rot);color:#1c0c09}

.liste{margin-top:10px}
.liste .zeile{gap:12px}
.liste-zeile{padding:9px 0;border-bottom:1px solid #212a31}
.liste-zeile:first-child{padding-top:0}
.liste-zeile:last-child{padding-bottom:0;border-bottom:0}
.liste-zeile .zeit{font-size:13px}
.menge{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.leerung{display:flex;align-items:center;gap:14px}
.leerung-info{flex:1;min-width:0}
.leerung form{flex:none}

/* Messreihen: erste Spalten bleiben beim Querscrollen stehen */
.matrix{overflow-x:auto;margin-top:10px}
.matrix table{border-collapse:separate;border-spacing:0;font-size:13px;width:auto;min-width:100%}
.matrix th,.matrix td{padding:7px 10px;white-space:nowrap;border-bottom:1px solid #212a31}
.matrix th{font-size:10px;color:var(--grau);text-transform:uppercase;letter-spacing:.08em;
  border-bottom:1px solid var(--linie)}
.matrix .fest{position:sticky;left:0;background:var(--karte);z-index:1;padding-right:4px}
.matrix .fest2{position:sticky;left:44px;background:var(--karte);z-index:1;
  box-shadow:6px 0 8px -6px rgba(0,0,0,.7);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.matrix .zelle{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.matrix .neu{background:#1b242b}
.matrix tfoot td{border-bottom:0}

.abschnitt{margin:18px 2px 8px}
.pkt-kopf{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pkt-kopf a{color:var(--text);font-weight:600;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pkt-kopf .nr{font-family:var(--mono);color:var(--grau);margin-right:3px}
.pkt-tasten{display:flex;gap:16px;align-items:center;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--linie)}
.pkt-tasten form{display:inline}
.balken i.trocken{background:var(--gruen)} .balken i.mittel{background:var(--gelb)}
.balken i.nass{background:var(--rot)}      .balken i.leer{background:var(--linie)}

.schalter{display:flex;gap:8px;margin-bottom:14px}
.schalter-teil{flex:1;margin:0}
.schalter-teil input{position:absolute;opacity:0;pointer-events:none}
.schalter-teil span{display:block;text-align:center;padding:10px 6px;border-radius:9px;
  background:var(--feld);border:1px solid var(--linie);font-size:13px;color:var(--grau);
  text-transform:none;letter-spacing:0}
.schalter-teil input:checked+span{border-color:var(--blau);color:var(--text);background:#1c2b34}

.behaelter{display:flex;gap:16px;align-items:flex-start}
.behaelter-werte{flex:1;min-width:0}
.ergebnis{margin-top:12px;padding-top:12px;border-top:1px solid var(--linie);
  font-size:14px;color:var(--grau)}
.ergebnis strong{color:var(--blau);font-family:var(--mono)}
details{margin-top:10px}
summary{font-size:13px;color:var(--grau);cursor:pointer;padding:6px 0}

.reiter{display:flex;gap:8px;margin-bottom:12px}
.reiter a{flex:1;text-align:center;padding:9px 6px;border-radius:9px;background:var(--karte);
  border:1px solid var(--linie);font-size:13px;color:var(--grau)}
.reiter a.an{border-color:var(--blau);color:var(--text)}

.planbox{position:relative;line-height:0;border:1px solid var(--linie);border-radius:10px;
  overflow:hidden;background:#fff;margin-top:8px}
.planbox img{width:100%;display:block}
.planbox.setzen{cursor:crosshair}
.pin{position:absolute;transform:translate(-50%,-50%);min-width:25px;height:25px;padding:0 5px;
  border-radius:13px;border:2px solid #0c1013;display:flex;align-items:center;justify-content:center;
  font:600 12px var(--sans);color:#0c1013;line-height:1}
.pin.nass{background:#e58274} .pin.mittel{background:#e0a33c}
.pin.trocken{background:#7fd6a5} .pin.leer{background:#c7d0d8}
.legende{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:11px;color:var(--grau)}
.legende i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.legende .trocken{background:#7fd6a5} .legende .mittel{background:#e0a33c}
.legende .nass{background:#e58274} .legende .leer{background:#c7d0d8}

.rundgang{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0 10px}
.rundgang label{text-transform:none;letter-spacing:0;font-size:12px;color:var(--grau)}
.rundgang em{font-style:normal;color:#5f6c77}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10px;color:var(--grau);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;padding:6px 7px;border-bottom:1px solid var(--linie);white-space:nowrap}
td{padding:8px 7px;border-bottom:1px solid #212a31;font-variant-numeric:tabular-nums}
td.zahl,th.zahl{text-align:right;font-family:var(--mono)}
table.eingabe input{margin:0}
.scroll{overflow-x:auto}
.waag-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.waag-form select,.waag-form input[type=password]{width:auto;margin:0;padding:7px 10px;font-size:14px}

nav.unten{position:fixed;left:0;right:0;bottom:0;display:flex;background:#0c1013;
  border-top:1px solid var(--linie);padding-bottom:env(safe-area-inset-bottom);z-index:9}
nav.unten a{flex:1;text-align:center;padding:8px 0 9px;font-size:11px;color:var(--grau)}
nav.unten a.an{color:var(--blau)}
nav.unten svg{display:block;margin:0 auto 2px;fill:currentColor}

.toast{position:fixed;left:12px;right:12px;bottom:70px;background:#243039;color:var(--text);
  border:1px solid var(--linie);border-radius:10px;padding:12px 14px;font-size:14px;
  opacity:0;transform:translateY(8px);transition:.2s;pointer-events:none;z-index:10}
.toast.an{opacity:1;transform:none}
.toast.gut{border-color:rgba(87,201,138,.5)}
.toast.warn{border-color:rgba(224,163,60,.5)}

@media(min-width:700px){
  main{padding:18px 16px 88px}
  .behaelter{gap:24px}
  .diagramm{height:260px}
  .diagramm.gross{height:330px}
}