/* Visual language of the meter reading prototype (metering_template.html).
   All class names are prefixed with mtr- so they never collide with Tailwind. */
.mtr{
  --mtr-blau:#00338D;--mtr-blau2:#0B4FB5;--mtr-tuerkis:#0091DA;--mtr-violett:#483698;
  --mtr-gruen:#00A3A1;--mtr-gelb:#EAAA00;--mtr-rot:#C8102E;
  --mtr-linie:#E1E6EF;--mtr-text:#1B2233;--mtr-grau:#6B7690;
  color:var(--mtr-text);font-size:14px;
}

.mtr-kopf{
  background:linear-gradient(100deg,var(--mtr-blau),var(--mtr-blau2) 60%,var(--mtr-violett));
  color:#fff;border-radius:10px;padding:16px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.mtr-kopf h2{font-size:19px;margin:0;font-weight:600}
.mtr-kopf .mtr-u{font-size:12px;opacity:.82;margin-top:3px}
.mtr-hinweis{
  margin-left:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  padding:5px 12px;border-radius:20px;font-size:11px;
}

.mtr-karte{background:#fff;border-radius:10px;box-shadow:0 2px 14px rgba(0,51,141,.07);padding:22px 24px;margin-bottom:16px}
.mtr-karte h3{margin:0 0 18px;font-size:18px;color:var(--mtr-blau);font-weight:600}
.mtr-zwei{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
@media(max-width:860px){.mtr-zwei{grid-template-columns:1fr}}

.mtr-schritte{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.mtr-schritt{
  flex:1;min-width:170px;background:#fff;border:1px solid var(--mtr-linie);border-radius:9px;
  padding:11px 13px;cursor:pointer;display:flex;gap:10px;align-items:center;text-align:left;
}
.mtr-schritt:hover{border-color:var(--mtr-tuerkis)}
.mtr-schritt[disabled]{cursor:not-allowed;opacity:.55}
.mtr-schritt.aktiv{border-color:var(--mtr-blau);box-shadow:0 0 0 2px rgba(0,51,141,.12)}
.mtr-schritt.fertig{background:#F3FAF9;border-color:#B6E5E1}
.mtr-schritt .mtr-nr{
  width:25px;height:25px;border-radius:50%;background:#E3E8F2;color:var(--mtr-grau);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 25px;
}
.mtr-schritt.aktiv .mtr-nr{background:var(--mtr-blau);color:#fff}
.mtr-schritt.fertig .mtr-nr{background:var(--mtr-gruen);color:#fff}
.mtr-schritt .mtr-t{font-size:12.5px;font-weight:600;line-height:1.2}

.mtr-knopf{border:0;background:var(--mtr-blau);color:#fff;padding:8px 16px;border-radius:6px;cursor:pointer;font-size:12.5px;font-weight:600}
.mtr-knopf:hover{background:var(--mtr-blau2)}
.mtr-knopf.hell{background:#fff;color:var(--mtr-blau);border:1px solid var(--mtr-blau)}
.mtr-knopf.leise{background:#fff;color:var(--mtr-grau);border:1px solid var(--mtr-linie)}
.mtr-knopf:disabled{opacity:.4;cursor:not-allowed}

.mtr-werte{list-style:none;margin:0;padding:0}
.mtr-werte li{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #F0F2F7;font-size:13.5px}
.mtr-werte li:last-child{border-bottom:0}
.mtr-werte .mtr-b{color:var(--mtr-grau)}
.mtr-werte .mtr-w{font-weight:600;text-align:right;word-break:break-word}

.mtr-gross{font-size:34px;font-weight:700;line-height:1.1;margin:2px 0 4px}
.mtr-klein{font-size:12px;color:var(--mtr-grau)}

.mtr-marke{display:inline-block;padding:4px 11px;border-radius:12px;font-size:11.5px;font-weight:600}
.mtr-ok{background:#E1F5F3;color:#00726F}
.mtr-warn{background:#FDF3DC;color:#8A6500}
.mtr-stop{background:#FCE8EC;color:#9B0C23}

.mtr-zaehler{background:#2C3242;border-radius:10px;padding:18px;color:#fff}
.mtr-zaehler .mtr-k{font-size:10px;letter-spacing:1.5px;opacity:.6}
.mtr-zaehler .mtr-a{background:#0E1119;border:2px solid #4A5266;border-radius:5px;margin:12px 0 9px;padding:11px 8px;display:flex;gap:5px;justify-content:center;align-items:center;flex-wrap:wrap}
.mtr-zaehler .mtr-a span{background:#F2F4F8;color:#111;font:700 28px/1 "Courier New",monospace;padding:8px 6px;border-radius:2px;min-width:28px;text-align:center}
.mtr-zaehler .mtr-a span.mtr-d{background:#C8102E;color:#fff}
.mtr-zaehler .mtr-n{font-size:10.5px;opacity:.7;text-align:center}
.mtr-zaehler.unscharf .mtr-a span{filter:blur(2.6px)}
.mtr-zaehler .mtr-a span.mtr-unbekannt{background:#4A5266;color:#E7EAF2}
/* the OBIS code stands to the left of the digits, as it does on the meter */
.mtr-zaehler .mtr-a span.mtr-obis{
  background:none;color:#9AA3B8;font:600 13px/1 "Courier New",monospace;min-width:0;
  padding:0 10px 0 2px;align-self:center;letter-spacing:.5px;
}
.mtr-zaehler .mtr-a span.mtr-obis.falsch{color:#FF8FA3}
.mtr-zaehler .mtr-a span.mtr-d.mtr-unbekannt{background:#7A3040;color:#F5D7DD}

/* a rolling number wheel counter reads differently from an LCD, so it is drawn differently */
.mtr-zaehler.mechanisch .mtr-a{background:#1A1D26;border-color:#6B7280}
.mtr-zaehler.mechanisch .mtr-a span{
  background:linear-gradient(180deg,#8A8F9C 0%,#FFF 22%,#F2F4F8 50%,#FFF 78%,#8A8F9C 100%);
  color:#111;border-radius:3px;box-shadow:inset 0 0 2px rgba(0,0,0,.45);
}
.mtr-zaehler.mechanisch .mtr-a span.mtr-d{
  background:linear-gradient(180deg,#7E0C1E 0%,#E4394F 22%,#C8102E 50%,#E4394F 78%,#7E0C1E 100%);
  color:#fff;
}

.mtr-foto{border-radius:10px;border:1px solid var(--mtr-linie);width:100%;max-height:320px;object-fit:contain;background:#F7F9FC}

.mtr-jahre{display:flex;gap:9px;align-items:flex-end}
.mtr-jahre>div{flex:1;text-align:center}
.mtr-jahre .mtr-s{height:110px;display:flex;align-items:flex-end}
.mtr-jahre .mtr-s>i{display:block;width:100%;border-radius:4px 4px 0 0;background:#C9D6EC}
.mtr-jahre .mtr-s>i.jetzt{background:linear-gradient(180deg,var(--mtr-tuerkis),var(--mtr-blau))}
.mtr-jahre .mtr-s>i.leer{height:14px!important;background:none;border:2px dashed #C7CEDB;border-radius:4px}
.mtr-jahre .mtr-bj{font-size:11px;color:var(--mtr-grau);margin-top:6px}
.mtr-jahre .mtr-bj b{color:var(--mtr-text);display:block;font-size:12px}

.mtr-fazit{border-left:4px solid var(--mtr-tuerkis);background:#F5FAFE;padding:14px 16px;border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.6}
.mtr-fazit.gut{border-color:var(--mtr-gruen);background:#F2FAF9}
.mtr-fazit.warn{border-color:var(--mtr-gelb);background:#FEFAF1}
.mtr-fazit.stop{border-color:var(--mtr-rot);background:#FEF6F7}

.mtr-wandern{display:flex;gap:10px;justify-content:space-between;align-items:center}
.mtr-pfad{font-size:12px;color:var(--mtr-grau)}

.mtr-pruef{list-style:none;margin:0;padding:0}
.mtr-pruef li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #F0F2F7}
.mtr-pruef li:last-child{border-bottom:0}
.mtr-pruef .mtr-n{flex:1;font-size:13.5px}
.mtr-pruef .mtr-notiz{display:block;font-size:11px;color:var(--mtr-grau);margin-top:3px;line-height:1.35}
.mtr-pruef .mtr-z{width:110px;flex:0 0 110px;padding-top:4px}
.mtr-pruef .mtr-p{width:38px;flex:0 0 38px;text-align:right;font-weight:700;font-size:13px}

.mtr-trenn{height:1px;background:var(--mtr-linie);margin:20px 0}

.mtr-ablage{
  border:2px dashed #C7CEDB;border-radius:10px;padding:26px 20px;text-align:center;background:#FAFBFE;cursor:pointer;
}
.mtr-ablage:hover,.mtr-ablage.ueber{border-color:var(--mtr-tuerkis);background:#F2F8FD}
.mtr-ablage .mtr-datei{font-size:13px;font-weight:600;margin-top:8px;word-break:break-all}

.mtr-historie{display:flex;gap:8px;flex-wrap:wrap}
.mtr-verlauf{
  width:74px;height:74px;padding:0;border:2px solid var(--mtr-linie);border-radius:8px;
  background:#F7F9FC;cursor:pointer;overflow:hidden;
}
.mtr-verlauf:hover{border-color:var(--mtr-tuerkis)}
.mtr-verlauf.aktiv{border-color:var(--mtr-blau);box-shadow:0 0 0 2px rgba(0,51,141,.15)}
.mtr-verlauf img{width:100%;height:100%;object-fit:cover;display:block}

.mtr-feld{display:block;margin-bottom:12px}
.mtr-feld span{display:block;font-size:11px;color:var(--mtr-grau);text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:4px}
.mtr-feld input,.mtr-feld select,.mtr-feld textarea{
  width:100%;border:1px solid var(--mtr-linie);border-radius:6px;padding:8px 10px;font-size:13.5px;
  font-family:inherit;color:var(--mtr-text);background:#fff;
}
.mtr-feld input:focus,.mtr-feld select:focus,.mtr-feld textarea:focus{outline:none;border-color:var(--mtr-tuerkis)}
.mtr-feld textarea{resize:vertical;min-height:96px}
.mtr-feld .mtr-hinweis-text{font-size:11px;color:var(--mtr-grau);margin-top:4px;text-transform:none;letter-spacing:0;font-weight:400}

.mtr-tabelle{width:100%;border-collapse:collapse;font-size:13px}
.mtr-tabelle th{
  text-align:left;font-size:11px;color:var(--mtr-grau);text-transform:uppercase;letter-spacing:.6px;
  padding:8px 10px;border-bottom:1px solid var(--mtr-linie);white-space:nowrap;
}
.mtr-tabelle td{padding:10px;border-bottom:1px solid #F0F2F7;vertical-align:top}
.mtr-tabelle tr:last-child td{border-bottom:0}
.mtr-tabelle tr.aktiv{background:#F5F9FF}
.mtr-tabelle .mtr-aktionen{display:flex;gap:6px;justify-content:flex-end}
.mtr-tabellenrahmen{overflow-x:auto}

.mtr-dialog{
  position:fixed;inset:0;z-index:60;background:rgba(27,34,51,.55);
  display:flex;align-items:flex-start;justify-content:center;padding:36px 16px;overflow-y:auto;
}
.mtr-dialog[hidden]{display:none}
.mtr-dialog-karte{
  background:#fff;border-radius:10px;box-shadow:0 18px 50px rgba(0,51,141,.28);
  padding:22px 24px;width:100%;max-width:680px;
}
.mtr-dialog-karte h3{margin:0 0 18px;font-size:18px;color:var(--mtr-blau);font-weight:600}

.mtr-status{font-size:12.5px;margin-top:10px;min-height:18px}
.mtr-status.fehler{color:var(--mtr-rot)}
.mtr-status.erfolg{color:#00726F}
.mtr-status.info{color:var(--mtr-grau)}

.mtr-lader{
  display:inline-block;width:14px;height:14px;border:2px solid #C7CEDB;border-top-color:var(--mtr-blau);
  border-radius:50%;animation:mtr-dreh .8s linear infinite;vertical-align:-2px;margin-right:6px;
}
@keyframes mtr-dreh{to{transform:rotate(360deg)}}

/* --- what was said on the telephone ------------------------------------------------ */
.mtr-mitschrift{max-height:260px;overflow-y:auto;border:1px solid var(--mtr-linie);border-radius:8px;
  padding:10px 12px;background:#FCFDFE}
.mtr-mitschrift .mtr-zeile{margin:0 0 8px;font-size:13.5px;line-height:1.55;display:flex;gap:8px}
.mtr-mitschrift .mtr-zeile:last-child{margin-bottom:0}
.mtr-sprecher{flex:0 0 68px;font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--mtr-grau);padding-top:2px}
.mtr-mitschrift .mtr-zeile.kunde{font-weight:600;color:var(--mtr-text)}
.mtr-mitschrift .mtr-zeile.kunde .mtr-sprecher{color:var(--mtr-tuerkis);font-weight:600}