/* ============================================================
   Zählerstandsverwaltung – Design
   Markenfarbe (Signature): #3A504A
   ============================================================ */
*{ box-sizing:border-box; }
:root{
  --marke:#3A504A;        /* Signaturfarbe */
  --marke-d:#2c3e39;      /* dunkler (Hover) */
  --marke-l:#eef2f0;      /* sehr helle Tönung (Flächen) */
  --marke-l2:#dde7e2;     /* helle Tönung (Hover/Badges) */
  --text:#1e2a26;
  --muted:#6c7771;
  --linie:#e6ece9;
  --bg:#f2f5f3;
  --karte:#ffffff;
  --rot:#c0392b; --rot-bg:#fbe9e7;
  --gruen:#2f8f5b; --gruen-bg:#e3f4ea;
  --amber:#b07d12; --amber-bg:#fbefd4;
  --blau:#3f6f8f; --blau-bg:#e6eef3;
  --radius:14px;
  --radius-s:9px;
  --schatten:0 1px 2px rgba(20,38,33,.05), 0 10px 28px rgba(20,38,33,.06);
  --schatten-s:0 1px 2px rgba(20,38,33,.06);
}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-size:15px; line-height:1.55; color:var(--text);
  background:var(--bg);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--marke); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1{ font-size:25px; margin:0; letter-spacing:-.02em; font-weight:700; }
h2{ font-size:17px; margin:0 0 14px; letter-spacing:-.01em; font-weight:650; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.strong{ font-weight:600; }
.center{ text-align:center; }
code{ background:var(--marke-l); color:var(--marke-d); padding:2px 7px; border-radius:6px; font-size:13px; }

/* ---- Kopfzeile / Navigation ---- */
.topbar{
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--linie); padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  position:sticky; top:0; z-index:20;
}
.brand{
  font-weight:750; padding:16px 0; color:var(--marke); letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px;
}
.brand::before{
  content:""; width:11px; height:22px; border-radius:4px;
  background:linear-gradient(160deg,var(--marke),#54706a); display:inline-block;
}
.mainnav{ display:flex; gap:2px; flex-wrap:wrap; }
.mainnav a{
  padding:9px 13px; margin:8px 0; color:var(--muted); font-weight:550; border-radius:8px;
  transition:background .15s, color .15s;
}
.mainnav a:hover{ text-decoration:none; color:var(--marke); background:var(--marke-l); }
.mainnav a.active{ color:var(--marke); background:var(--marke-l2); }
.mainnav a.logout{ color:var(--muted); }

.wrap{ max-width:1120px; margin:28px auto; padding:0 20px; }
.foot{ text-align:center; color:var(--muted); font-size:13px; padding:34px 0; }

.pagehead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:12px; flex-wrap:wrap; }
.sec{ margin:30px 0 14px; font-size:19px; font-weight:650; letter-spacing:-.01em; }

/* ---- Kacheln (Dashboard) ---- */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:20px; display:flex; flex-direction:column; gap:4px; color:var(--text);
  box-shadow:var(--schatten-s); transition:transform .15s, box-shadow .15s, border-color .15s;
}
.kpi:hover{ text-decoration:none; transform:translateY(-2px); box-shadow:var(--schatten); border-color:var(--marke-l2); }
.kpi-num{ font-size:32px; font-weight:750; color:var(--marke); letter-spacing:-.03em; line-height:1.1; }
.kpi-lbl{ color:var(--muted); font-size:14px; }

/* ---- Karten / Spalten ---- */
.card{
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius);
  padding:22px; margin-bottom:20px; box-shadow:var(--schatten-s);
}
.cols{ display:grid; grid-template-columns:360px 1fr; gap:22px; align-items:start; }
.col-form .card{ position:sticky; top:84px; }

/* ---- Tabellen ---- */
.tablewrap{ overflow-x:auto; background:var(--karte); border:1px solid var(--linie); border-radius:var(--radius); box-shadow:var(--schatten-s); }
.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
.tbl th,.tbl td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--linie); vertical-align:top; }
.tbl th{ background:var(--marke-l); font-weight:600; color:var(--marke-d); white-space:nowrap; font-size:12.5px; letter-spacing:.02em; text-transform:uppercase; }
.tbl tbody tr{ transition:background .12s; }
.tbl tbody tr:hover{ background:#f7faf9; }
.tbl tr:last-child td{ border-bottom:none; }
.tbl .ar{ text-align:right; }
.nowrap{ white-space:nowrap; }
.overdue{ color:var(--rot); font-weight:600; }

/* ---- Formulare ---- */
label{ display:block; margin:0 0 16px; font-size:14px; font-weight:550; }
input,select,textarea{
  width:100%; margin-top:6px; padding:11px 12px; border:1px solid #cdd6d2;
  border-radius:var(--radius-s); font:inherit; background:#fff; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--marke); box-shadow:0 0 0 3px rgba(58,80,74,.16); }
textarea{ resize:vertical; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
label.check{ display:flex; align-items:center; gap:9px; font-weight:550; }
label.check input{ width:auto; margin:0; }
.formactions{ display:flex; gap:10px; margin-top:8px; }
.filterbar{ margin-bottom:14px; max-width:320px; }

/* ---- Buttons ---- */
.btn{
  display:inline-block; padding:10px 16px; border-radius:var(--radius-s); border:1px solid #cdd6d2;
  background:#fff; color:var(--text); cursor:pointer; font:inherit; font-weight:600; text-align:center;
  transition:background .15s, border-color .15s, transform .05s, box-shadow .15s; box-shadow:var(--schatten-s);
}
.btn:hover{ text-decoration:none; border-color:#aab4af; background:#fbfcfb; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--marke); border-color:var(--marke); color:#fff; box-shadow:0 2px 8px rgba(58,80,74,.28); }
.btn-primary:hover{ background:var(--marke-d); border-color:var(--marke-d); }
.btn-danger{ color:var(--rot); border-color:#eecac6; background:#fff; box-shadow:none; }
.btn-danger:hover{ background:var(--rot-bg); border-color:var(--rot); }
.btn-sm{ padding:7px 11px; font-size:13px; box-shadow:none; }
.btn-lg{ padding:14px 20px; font-size:16px; }
.btn-block{ display:block; width:100%; margin-top:9px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.inline{ display:inline; }
.linkbtn{ background:none; border:none; color:var(--marke); cursor:pointer; padding:0; font:inherit; text-decoration:underline; }

/* ---- Etiketten / Badges ---- */
.badge{ display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.01em; }
.badge-blue{ background:var(--blau-bg); color:var(--blau); }
.badge-green{ background:var(--gruen-bg); color:var(--gruen); }
.badge-amber{ background:var(--amber-bg); color:var(--amber); }
.badge-red{ background:var(--rot-bg); color:var(--rot); }
.badge-gray{ background:#eef1ef; color:#5b665f; }

/* ---- Hinweise ---- */
.flash{ padding:12px 15px; border-radius:var(--radius-s); margin-bottom:16px; font-size:14px; border:1px solid transparent; }
.flash-ok{ background:var(--gruen-bg); color:#1e6b41; border-color:#bfe6cd; }
.flash-err{ background:var(--rot-bg); color:#a3271c; border-color:#f1c5bf; }
.flash-warn{ background:var(--amber-bg); color:#8a5f0c; border-color:#eed9a6; }

/* ---- Vorwert-Hinweis auf der Erfassungsseite ---- */
.vorwert{ font-size:13px; color:var(--marke-d); background:var(--marke-l); border-radius:7px; padding:5px 9px; margin:0 0 9px; display:inline-block; }

/* ---- Tabs ---- */
.tabs{ display:flex; gap:4px; margin-bottom:18px; border-bottom:1px solid var(--linie); }
.tabs a{ padding:10px 15px; color:var(--muted); border-bottom:2px solid transparent; font-weight:550; }
.tabs a:hover{ text-decoration:none; color:var(--marke); }
.tabs a.active{ color:var(--marke); border-bottom-color:var(--marke); font-weight:650; }

/* ---- Detailansicht ---- */
.detail{ display:grid; grid-template-columns:1fr 330px; gap:22px; align-items:start; }
.detail-side .card h2{ font-size:15px; }
.kv{ display:grid; grid-template-columns:140px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--linie); font-size:14px; }
.kv:last-child{ border-bottom:none; }
.kv>span:first-child{ color:var(--muted); }
.copyfield{ font-size:12px; margin-bottom:8px; background:var(--marke-l); }
.log{ list-style:none; padding:0; margin:0; }
.log li{ padding:9px 0; border-bottom:1px solid var(--linie); font-size:14px; }

/* ---- Zähler-Auswahl (neue Anfrage) ---- */
.zaehlerbox{ border:1px solid var(--linie); border-radius:var(--radius-s); padding:6px 14px 14px; margin-bottom:16px; background:#fbfcfb; }
.zb-head{ font-weight:600; font-size:14px; margin:10px 0; }
.zb-group{ margin-bottom:10px; }
.zb-objekt{ font-weight:600; font-size:13px; color:var(--marke-d); margin:10px 0 5px; padding-top:9px; border-top:1px dashed var(--linie); }
.zb-item{ display:flex; align-items:center; gap:10px; font-weight:400; margin:0 0 5px; }
.zb-item input{ width:auto; margin:0; }

/* ---- Login ---- */
.loginbody{ display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 50% -10%, #e7eeeb 0%, var(--bg) 60%); }
.loginbox{ background:#fff; border:1px solid var(--linie); border-radius:18px; padding:34px;
  width:380px; max-width:92vw; box-shadow:var(--schatten); position:relative; overflow:hidden; }
.loginbox::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,var(--marke),#5e7a73); }
.loginbox h1{ font-size:21px; margin-bottom:4px; color:var(--marke); }

/* ---- Öffentliche Erfassungs-Seite ---- */
.publicbody{ background:radial-gradient(1000px 500px at 50% -5%, #e7eeeb 0%, var(--bg) 55%); min-height:100vh; }
.publicwrap{ max-width:580px; margin:0 auto; padding:26px 16px; }
.publichead{ font-weight:750; text-align:center; padding:16px; color:var(--marke); letter-spacing:-.01em; }
.publicfoot{ text-align:center; color:var(--muted); font-size:12px; padding:20px; }
.hinweis{ background:var(--marke-l); border:1px solid var(--marke-l2); border-radius:var(--radius-s); padding:12px 14px; margin:0 0 16px; font-size:14px; }
.success h1{ color:var(--gruen); }
.zerf{ border:1px solid var(--linie); border-radius:var(--radius-s); padding:15px; margin-bottom:13px; background:#fbfcfb; }
.zerf-titel{ font-weight:600; margin-bottom:9px; }
.zerf-eingabe{ display:flex; align-items:center; gap:10px; }
.zerf-eingabe input{ font-size:18px; }
.zerf-eingabe .einheit{ color:var(--muted); white-space:nowrap; font-weight:600; }
.zerf-komm{ margin-top:8px; font-size:14px; }
.zerf-foto{ display:block; margin-top:10px; font-size:13px; color:var(--marke-d); font-weight:550; }
.zerf-foto input{ margin-top:5px; }

/* ---- Anleitung ---- */
.anl{ margin:0; padding-left:20px; }
.anl li{ margin:8px 0; }

/* ---- Mobil ---- */
@media (max-width:820px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .cols{ grid-template-columns:1fr; }
  .col-form .card{ position:static; }
  .detail{ grid-template-columns:1fr; }
  .wrap{ margin:18px auto; }
  h1{ font-size:22px; }
}