:root{
  --navy:#1e354b; --navy-tief:#0a121f; --bronze:#b98749; --bronze-hell:#e5c9a3;
  --hell:#f6f5f3; --grau:#51565b; --rot:#a2432c; --gruen:#3f6e46; --rand:#e2e5e9;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Helvetica,Arial,sans-serif;background:var(--hell);color:var(--navy-tief);}
a{color:var(--navy)}

.kopf{background:var(--navy);color:#fff}
.kopf-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:32px;padding:14px 20px}
.marke{color:#fff;font-weight:700;text-decoration:none;letter-spacing:.3px}
.kopf nav{display:flex;gap:20px;flex:1}
.kopf nav a{color:#d7dee6;text-decoration:none;font-size:14px;font-weight:600;padding:6px 0;border-bottom:2px solid transparent}
.kopf nav a.aktiv,.kopf nav a:hover{color:#fff;border-bottom-color:var(--bronze)}
.kopf-nutzer{display:flex;align-items:center;gap:14px;font-size:13px;color:#c7d0da}
.kopf-nutzer a{color:var(--bronze-hell);text-decoration:none}

.inhalt{max-width:1200px;margin:0 auto;padding:28px 20px 60px}
h1{font-size:22px;color:var(--navy)}
h2{font-size:16px;color:var(--navy);margin-bottom:12px}

.login-halter{display:flex;justify-content:center;padding-top:80px}
.login-box{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:32px;width:320px;display:flex;flex-direction:column;gap:14px}
.login-box h1{margin:0}
.login-box .unterschrift{margin:-8px 0 4px;color:var(--grau);font-size:13px}
.login-box label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--grau)}
.login-box input{padding:9px 10px;border:1px solid var(--rand);border-radius:6px;font-size:14px}
.login-box button{margin-top:6px;background:var(--bronze);color:#fff;border:0;border-radius:6px;padding:10px;font-weight:600;cursor:pointer}
.login-box .fehler{color:var(--rot);font-size:13px;margin:0}
.login-box .ok{color:var(--gruen);font-size:13px;margin:0}
.abbrechen-link{text-align:center;font-size:12.5px;color:var(--grau)}

.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.kachel{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:18px;text-align:center}
.kachel-offen{border-color:var(--bronze)}
.kachel-zahl{font-size:30px;font-weight:700;color:var(--navy)}
.kachel-label{font-size:12.5px;color:var(--grau);margin-top:2px}

.spalten{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}
.karten-rahmen{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:10px}
.karten-rahmen svg{width:100%;height:auto;display:block}
.karten-hinweis{font-size:12px;color:var(--grau);margin-top:6px}
.gewerk-filter-liste{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.gewerk-chip{font-size:12px;background:#fff;border:1px solid var(--rand);border-radius:20px;padding:5px 10px;display:flex;align-items:center;gap:5px;cursor:pointer}
.gewerk-chip input{margin:0}

.liste-spalte h2{margin-top:0}
.mini-karte{background:#fff;border:1px solid var(--rand);border-radius:8px;padding:10px 12px;margin-bottom:10px}
.mini-kopf{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.mini-kopf .ort{color:var(--grau);font-size:12.5px;white-space:nowrap}
.mini-gewerke{font-size:12px;color:var(--grau);margin-top:3px}
.mini-aktionen{display:flex;align-items:center;gap:12px;margin-top:8px}
.knopf-freigeben{background:var(--gruen);color:#fff;border:0;border-radius:6px;padding:6px 12px;font-size:12.5px;font-weight:600;cursor:pointer}
.mini-aktionen a{font-size:12.5px}
.alle-link{display:inline-block;margin-top:6px;font-size:13px;font-weight:600}
.leer{color:var(--grau);font-size:13px}

.filter-leiste{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filter-leiste input[type=text]{flex:1;min-width:200px;padding:8px 10px;border:1px solid var(--rand);border-radius:6px}
.filter-leiste select{padding:8px 10px;border:1px solid var(--rand);border-radius:6px}
.filter-leiste button{background:var(--navy);color:#fff;border:0;border-radius:6px;padding:8px 16px;cursor:pointer}
.export-link{align-self:center;font-size:13px;font-weight:600}
.treffer{color:var(--grau);font-size:13px}

.tabelle-halter{overflow-x:auto;background:#fff;border:1px solid var(--rand);border-radius:10px}
.vorgangs-tabelle{width:100%;border-collapse:collapse;font-size:13px}
.vorgangs-tabelle th{text-align:left;padding:10px 12px;background:var(--hell);border-bottom:1px solid var(--rand);color:var(--grau);font-size:11.5px;text-transform:uppercase;letter-spacing:.3px}
.vorgangs-tabelle td{padding:9px 12px;border-bottom:1px solid var(--rand);vertical-align:top}
.vorgangs-tabelle tr.zeile-alt{background:#fbf8f3}
.nowrap{white-space:nowrap}
.vorgang-tag{font-family:monospace;font-size:12px;color:var(--grau)}
.hinweis-tag,.warn-tag{display:inline-block;font-size:10px;font-weight:700;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:middle}
.hinweis-tag{background:var(--bronze-hell);color:var(--navy)}
.warn-tag{background:#f4d9cf;color:var(--rot)}
.status-form select{padding:5px 6px;border:1px solid var(--rand);border-radius:5px;font-size:12.5px}
.status-offen{color:var(--bronze);font-weight:700}
.status-aufgenommen{color:var(--gruen);font-weight:700}
.status-abgelehnt{color:var(--rot);font-weight:700}
.status-kontaktiert{color:var(--navy)}
.status-info{font-size:10.5px;color:var(--grau);margin-top:3px}
.status-fix{font-size:12px;color:var(--gruen);font-weight:600}
.notiz-form textarea{width:100%;min-width:140px;border:1px solid var(--rand);border-radius:5px;padding:5px;font-size:12.5px;font-family:inherit;resize:vertical}
.ohne{color:var(--rand)}

@media (max-width:900px){
  .kacheln{grid-template-columns:repeat(2,1fr)}
  .spalten{grid-template-columns:1fr}
}