:root{
  --blau:#1c3faa; --blau-d:#152f80; --blau-l:#eef2fb;
  --grau:#5b6472; --linie:#dfe4ee; --bg:#f4f6fb; --weiss:#fff;
  --gruen:#1f9d55; --gelb:#c98a00; --rot:#c0392b;
  --schatten:0 1px 3px rgba(20,30,60,.08),0 1px 2px rgba(20,30,60,.06);
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:#1c2430;font-size:15px;line-height:1.5}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:var(--weiss);padding:10px 20px;border-bottom:1px solid var(--linie);
  box-shadow:var(--schatten);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:#1c2430}
.brand:hover{text-decoration:none}
.brand img{height:120px;width:auto}
.brand span{font-size:19px;letter-spacing:.2px}
.topbar nav{display:flex;gap:6px;flex-wrap:wrap}
.topbar nav a{padding:8px 14px;border-radius:8px;color:var(--grau);font-weight:600}
.topbar nav a:hover{background:var(--blau-l);color:var(--blau);text-decoration:none}

.wrap{max-width:1080px;margin:24px auto;padding:0 18px}
.back-btn{margin-bottom:16px}

/* Anmelde-Seiten */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.auth-card{background:var(--weiss);border:1px solid var(--linie);border-radius:16px;
  box-shadow:0 10px 30px rgba(20,30,60,.10);padding:28px 26px;width:100%;max-width:380px}
.auth-logo{text-align:center;margin-bottom:6px}
.auth-logo img{height:64px;width:auto}
.auth-h1{font-size:20px;text-align:center;margin:6px 0 18px}
.auth-card input{width:100%}
.foot{text-align:center;color:#9aa3b2;font-size:12px;padding:24px}

/* Flash */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-weight:600}
.flash-ok{background:#e7f6ee;color:#146c3a;border:1px solid #b6e2c8}
.flash-warn{background:#fdf3e0;color:#8a5b00;border:1px solid #f1d9a8}

/* Headings + breadcrumb */
.crumb{color:var(--grau);font-size:13px;margin-bottom:6px}
h1{font-size:24px;margin:.2em 0 .6em}
h2{font-size:18px;margin:1.2em 0 .5em}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}

/* Cards / stats */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--schatten)}
.stat .n{font-size:28px;font-weight:800;line-height:1}
.stat .l{color:var(--grau);font-size:13px;margin-top:6px;font-weight:600}
.stat.rot .n{color:var(--rot)} .stat.gelb .n{color:var(--gelb)} .stat.blau .n{color:var(--blau)}

.panel{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:18px;margin-bottom:18px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--blau);color:#fff;border:none;
  padding:10px 16px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--blau-d);text-decoration:none}
.btn.sec{background:#eef1f6;color:#2a3546}
.btn.sec:hover{background:#e2e7f0}
.btn.ghost{background:transparent;color:var(--blau);border:1px solid var(--linie)}
.btn.rot{background:#fbeceb;color:var(--rot);border:1px solid #f3c9c5}
.btn.sm{padding:6px 11px;font-size:13px}

/* Tables */
table.list{width:100%;border-collapse:collapse;background:var(--weiss);border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--linie);box-shadow:var(--schatten)}
table.list th{background:#f7f9fd;text-align:left;padding:11px 14px;font-size:12px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--grau);border-bottom:1px solid var(--linie)}
table.list td{padding:11px 14px;border-bottom:1px solid var(--linie);vertical-align:middle}
table.list tr:last-child td{border-bottom:none}
table.list tr:hover td{background:#fafcff}

/* Badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.badge.overdue{background:#fbeceb;color:var(--rot)}
.badge.soon{background:#fdf3e0;color:var(--gelb)}
.badge.ok{background:#e7f6ee;color:var(--gruen)}
.badge.unknown{background:#eef1f6;color:var(--grau)}
.badge.typ{background:var(--blau-l);color:var(--blau)}
.badge.batterie{background:#fdeccf;color:#9a5b00;border:1px solid #f0c98a}
.akku-gruppe{display:inline-flex;flex-wrap:nowrap;gap:4px;vertical-align:middle}

/* Forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.form-grid .full{grid-column:1/-1}
label.fld{display:block;font-weight:600;font-size:13px;color:#2a3546;margin-bottom:5px}
input[type=text],input[type=email],input[type=date],input[type=number],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--linie);border-radius:9px;font-size:14px;
  background:#fff;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blau);box-shadow:0 0 0 3px rgba(28,63,170,.12)}
textarea{min-height:64px;resize:vertical}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.hint{color:var(--grau);font-size:12.5px;margin-top:4px}

/* Pruefformular */
.rubrik{margin:18px 0;border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--schatten)}
.rubrik>.kopf{background:var(--blau);color:#fff;padding:11px 15px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.pkt{display:grid;grid-template-columns:1fr 210px;gap:10px;align-items:center;padding:10px 15px;border-top:1px solid var(--linie)}
.pkt:nth-child(even){background:#fafbfe}
.pkt .txt{font-size:14px}
.pkt .txt .krit{color:var(--rot);font-weight:800;margin-right:4px}
.seg{display:flex;border:1px solid var(--linie);border-radius:8px;overflow:hidden}
.seg label{flex:1;text-align:center;padding:7px 4px;font-size:12.5px;font-weight:700;cursor:pointer;color:var(--grau);background:#fff}
.seg label:not(:last-child){border-right:1px solid var(--linie)}
.seg input{display:none}
.seg input:checked+label.io{background:var(--gruen);color:#fff}
.seg input:checked+label.nio{background:var(--rot);color:#fff}
.seg input:checked+label.nv{background:var(--grau);color:#fff}
.bem{margin-top:8px}
.bem input{padding:7px 10px;font-size:13px}
.pkt.warn{background:#fff7f6}

.sticky-save{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-top:1px solid var(--linie);padding:12px 0;margin-top:18px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.warnbox{background:#fff7f6;border:1px solid #f3c9c5;color:#8a2b22;padding:10px 14px;border-radius:10px;margin:10px 0;font-size:13.5px;display:none}
.warnbox.show{display:block}

.muted{color:var(--grau)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.tag{font-size:12px;color:var(--grau)}
.empty{text-align:center;padding:40px 20px;color:var(--grau)}
.searchbar{display:flex;gap:8px;margin-bottom:14px}
.searchbar input{max-width:340px}

@media(max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .pkt{grid-template-columns:1fr}
  .brand span{display:none}
  .brand img{height:46px}
  h1{font-size:20px}

  /* Tabellen als gestapelte Karten statt breiter Tabelle */
  table.list, table.list tbody, table.list tr, table.list td{display:block;width:100%}
  table.list thead{display:none}
  table.list{border:none;box-shadow:none;background:transparent}
  table.list tr{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
    box-shadow:var(--schatten);margin-bottom:12px;padding:4px 2px}
  table.list tr:hover td{background:transparent}
  table.list td{border:none;border-bottom:1px solid var(--linie);padding:9px 14px;
    display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right}
  table.list tr td:last-child{border-bottom:none}
  table.list td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--grau);
    font-size:11px;letter-spacing:.4px;text-transform:uppercase;text-align:left;flex:0 0 auto}
  table.list td.zeile-aktion{justify-content:flex-end;flex-wrap:wrap;gap:8px}
  table.list td .tag{text-align:right}

  /* Kundenliste: mobil nur Namen, Tippen öffnet die Kundenseite */
  table.list.nur-namen tr{padding:0}
  table.list.nur-namen td:not([data-label="Name"]){display:none}
  table.list.nur-namen td[data-label="Name"]{border-bottom:none;justify-content:flex-start;
    padding:16px;font-size:16px}
  table.list.nur-namen td[data-label="Name"]::before{display:none}
  table.list.nur-namen td[data-label="Name"] a{flex:1;color:#1c2430;text-decoration:none}
  table.list.nur-namen td[data-label="Name"]::after{content:"›";margin-left:auto;
    color:var(--grau);font-size:24px;line-height:1;font-weight:700}

  /* Fälligkeiten mobil: nur Kunde/Tor/Typ, Rest aufklappbar */
  table.list.aufklappen tbody tr{cursor:pointer}
  table.list.aufklappen td[data-label="Letzte"],
  table.list.aufklappen td[data-label="Nächste"],
  table.list.aufklappen td[data-label="Status"],
  table.list.aufklappen td.zeile-aktion{display:none}
  table.list.aufklappen tr.open td[data-label="Letzte"],
  table.list.aufklappen tr.open td[data-label="Nächste"],
  table.list.aufklappen tr.open td[data-label="Status"]{display:flex}
  table.list.aufklappen tr.open td.zeile-aktion{display:flex}
  table.list.aufklappen td[data-label="Typ"]{border-bottom:none}
  table.list.aufklappen tr.open td[data-label="Typ"]{border-bottom:1px solid var(--linie)}
  table.list.aufklappen td[data-label="Tor"]::after{content:"⌄";margin-left:auto;
    color:var(--grau);font-size:20px;line-height:1;transition:transform .15s}
  table.list.aufklappen tr.open td[data-label="Tor"]::after{transform:rotate(180deg)}

  /* Gruppen-Überschrift mobil als Abschnittstitel (keine Karte) */
  table.list tr.gruppe{background:transparent;border:none;box-shadow:none;margin:14px 0 2px}
  table.list tr.gruppe td{display:block;border:none;background:transparent;padding:2px 2px}
  table.list tr.gruppe td::before{content:none}
}

/* Gruppen-Überschrift (Desktop) */
table.list tr.gruppe{cursor:pointer}
table.list tr.gruppe td{background:#eef2fb;color:var(--blau);font-weight:800;font-size:13px;
  padding:8px 14px;border-top:2px solid #d7deef;letter-spacing:.2px}
table.list tr.gruppe td a{color:var(--blau)}
table.list tr.gruppe:hover td{background:#e7edfb}
/* Ampel je Kunde: überfällig = leicht rot, ≤30 Tage = leicht orange */
table.list tr.gruppe.gr-overdue td{background:#fbe4e1;color:var(--rot);border-top-color:#f2c4bd}
table.list tr.gruppe.gr-overdue td a{color:var(--rot)}
table.list tr.gruppe.gr-overdue:hover td{background:#f7d7d2}
table.list tr.gruppe.gr-soon td{background:#fdefda;color:#9a5b00;border-top-color:#f0d6a8}
table.list tr.gruppe.gr-soon td a{color:#9a5b00}
table.list tr.gruppe.gr-soon:hover td{background:#fbe6c6}
.gruppe-toggle{display:inline-block;margin-right:6px;color:var(--blau);transition:transform .15s}
tr.gruppe.zu .gruppe-toggle{transform:rotate(-90deg)}