:root{
  --bg:#F3F4F1; --surface:#fff; --surface-2:#FAFAF7; --ink:#1B2027; --muted:#5C6672;
  --line:#D5D9D2; --line-strong:#BFC5BC;
  --accent:#B0710E; --accent-soft:#F5E7C9; --blue:#2E5A86; --blue-soft:#E1EAF3;
  --bad:#A8322D; --bad-soft:#F6E0DE; --ok:#2F6B3A; --ok-soft:#E0EFE2;
  --warn:#8A6A2A; --warn-soft:#F7EDD6; --code:#ECEEE9;
  --shadow:0 1px 2px rgba(27,32,39,.06), 0 4px 12px rgba(27,32,39,.05);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#15181C; --surface:#1C2025; --surface-2:#20252B; --ink:#E4E6E1; --muted:#9BA4AE;
  --line:#2B3137; --line-strong:#3B434B;
  --accent:#E3A73C; --accent-soft:#3A2E14; --blue:#83ACD9; --blue-soft:#1E2B39;
  --bad:#E07A75; --bad-soft:#3A1F1E; --ok:#7FC48C; --ok-soft:#1E3322;
  --warn:#D9B565; --warn-soft:#332A16; --code:#22272D;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.25);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 "IBM Plex Sans",system-ui,sans-serif}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* Kopf und Navigation */
header.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:500}
.in{max-width:1280px;margin:0 auto;padding:0 24px}
.topbar{display:flex;align-items:center;gap:16px;height:56px}
.brand{font:700 18px/1 Archivo,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.brand span{color:var(--accent)}
.crumbs{color:var(--muted);font-size:13.5px;display:flex;gap:8px;align-items:center;min-width:0}
.crumbs b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spacer{flex:1}

/* Bausteine */
main{padding:24px 0 60px}
h1{font:700 25px/1.15 Archivo,sans-serif;margin:0 0 4px;letter-spacing:-.01em}
h2{font:600 17px/1.2 Archivo,sans-serif;margin:0 0 12px}
h3{font:600 14px/1.2 Archivo,sans-serif;margin:0 0 8px;color:var(--muted)}
.sub{color:var(--muted);margin:0 0 18px;font-size:14px;max-width:80ch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:18px;box-shadow:var(--shadow)}
.card + .card{margin-top:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hint{font-size:12.5px;color:var(--muted);margin:8px 0 0}
.err{color:var(--bad)}
section{margin-top:16px}

/* Formularelemente */
input,select,textarea{font:14px "IBM Plex Sans",sans-serif;padding:7px 9px;border:1px solid var(--line);
  border-radius:5px;background:var(--surface);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
textarea{width:100%;min-height:150px;font:12.5px/1.5 "IBM Plex Mono",monospace;background:var(--code);
  white-space:pre;overflow:auto;resize:vertical}
label.f{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
label.f input,label.f select{width:120px}
label.chk{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink)}
label.chk input{width:auto;margin:0}
button{font:500 14px "IBM Plex Sans",sans-serif;padding:8px 14px;border-radius:5px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);cursor:pointer}
button:hover:not(:disabled){border-color:var(--line-strong);background:var(--surface-2)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover:not(:disabled){filter:brightness(1.07);background:var(--accent)}
button.danger{color:var(--bad);border-color:var(--bad-soft)}
button.small{padding:4px 9px;font-size:13px}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Tabellen */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{padding:8px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;
  font-variant-numeric:tabular-nums}
th{font:500 11px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);position:sticky;top:0}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
tr.sel td{background:var(--blue-soft)}

/* Kennzeichen */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.info{background:var(--blue-soft);color:var(--blue)}

/* Projektliste */
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;cursor:pointer;
  transition:border-color .12s, transform .12s}
.pcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.pcard .name{font:600 16px/1.25 Archivo,sans-serif}
.pcard .desc{color:var(--muted);font-size:13px;min-height:1.4em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .meta{display:flex;gap:14px;font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:8px;margin-top:auto;flex-wrap:wrap}
.empty{text-align:center;color:var(--muted);padding:48px 20px;border:1px dashed var(--line-strong);border-radius:8px}

/* Kennzahlen */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:11px 13px}
.kpi .v{font:600 22px/1.1 Archivo,sans-serif;font-variant-numeric:tabular-nums}
.kpi .k{font-size:12px;color:var(--muted);margin-top:3px}
.kpi.bad .v{color:var(--bad)}
.kpi.ok .v{color:var(--ok)}

/* Karte und Diagramme */
#lmap{height:540px;border:1px solid var(--line);border-radius:6px}
.leaflet-popup-content{font:13.5px "IBM Plex Sans",sans-serif;margin:11px 13px}
.leaflet-popup-content select{width:100%;margin:6px 0}
.leaflet-container{background:var(--surface-2)}
canvas.chart{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin-top:8px;flex-wrap:wrap;align-items:center}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:5px}

/* Meldungen */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:10px 18px;border-radius:6px;font-size:14px;box-shadow:var(--shadow);z-index:1000;max-width:80vw}
#toast.bad{background:var(--bad);color:#fff}
[hidden]{display:none!important}
.busy{opacity:.55;pointer-events:none}
footer{color:var(--muted);font-size:12.5px;margin:32px 0 0;border-top:1px solid var(--line);padding-top:14px}

/* Jahreskalender je Haus */
.calwrap{overflow-x:auto;padding-bottom:4px}
.calgrid{display:grid;grid-template-columns:auto repeat(31,1fr);gap:2px;min-width:640px;font-size:11px}
.calgrid .mlabel{color:var(--muted);font-size:11.5px;padding-right:8px;text-align:right;line-height:16px;white-space:nowrap}
.calgrid .dlabel{color:var(--muted);font-size:9.5px;text-align:center;line-height:12px}
.calgrid .cell{height:16px;border-radius:2px;background:var(--surface-2)}
.calgrid .cell.none{background:transparent}
.calgrid .cell.c0{background:var(--surface-2)}
.calgrid .cell.c1{background:#EFE3C4}
.calgrid .cell.c2{background:#E2C489}
.calgrid .cell.c3{background:#D09A47}
.calgrid .cell.over{background:#A8322D}
@media (prefers-color-scheme:dark){
  .calgrid .cell.c1{background:#3A3020}
  .calgrid .cell.c2{background:#584A2C}
  .calgrid .cell.c3{background:#7A6234}
}
.calgrid .cell[title]{cursor:help}
.calscale{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.calscale i{display:inline-block;width:14px;height:14px;border-radius:2px;vertical-align:-3px;margin-right:5px}
.months td.mute{color:var(--muted)}
.months tr.crit td{background:var(--bad-soft)}

/* Farbskala der Schattenkarte */
.cbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.cbar .strip{position:relative;height:14px;border-radius:3px;flex:1;min-width:220px;
  border:1px solid var(--line)}
.cbar .ticks{position:relative;height:14px;flex:1;min-width:220px}
.cbar .ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap;font-variant-numeric:tabular-nums}
.cbar .over{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cbar .over i{display:inline-block;width:26px;height:14px;border-radius:3px;border:1px solid var(--line)}
#readout{font-variant-numeric:tabular-nums}

/* Lichtbilder der Ortsbesichtigung */
.gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.shot { width: 190px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
        background: var(--surface2); }
.shot img { width: 100%; height: 120px; object-fit: cover; display: block; }
.shot .meta { padding: 6px 7px; display: flex; flex-direction: column; gap: 4px; }
.shot input, .shot select { width: 100%; font-size: 12px; padding: 3px 4px; }
.shot .row { justify-content: space-between; align-items: center; gap: 4px; }
.shot .hint { font-size: 11px; }

/* Anmeldung */
.gate { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
        background: rgba(27, 32, 39, .55); backdrop-filter: blur(3px); }
.gatebox { background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
           padding: 26px 26px 20px; width: min(360px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.25);
           display: flex; flex-direction: column; gap: 10px; }
.gatebox h1 { font-family: Archivo, sans-serif; font-size: 22px; margin: 0; }
.gatebox h1 span { color: var(--accent); }
.gatebox p { margin: 0; color: var(--muted); font-size: 13px; }
.gatebox input { padding: 9px 10px; font-size: 15px; }
.openbar { background: #F8E7E5; color: #7A1E1E; border-bottom: 1px solid #E4C3C0;
           padding: 7px 16px; font-size: 13px; text-align: center; }