/* Schrift liegt selbst hier (SIL OFL 1.1) - keine Anfrage an Google, auch nicht die IP der Kollegen. */
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-display:swap;src:url(fonts/PlusJakartaSans-Regular.ttf) format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-display:swap;src:url(fonts/PlusJakartaSans-SemiBold.ttf) format('truetype')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-display:swap;src:url(fonts/PlusJakartaSans-ExtraBold.ttf) format('truetype')}
:root{--petrol:#0F292E;--gruen:#459979;--gruen-d:#3B7A62;--sand:#F4F8F6;--linie:#E3E8E7;--text:#0F292E;--grau:#5B6F70;--gelb:#F5C745}
*{box-sizing:border-box;margin:0}
body{font-family:'Plus Jakarta Sans',Arial,sans-serif;background:var(--sand);color:var(--text);font-size:15px}
header{background:var(--petrol);color:var(--sand);padding:18px 28px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
header h1{font-size:20px;font-weight:800}
header h1 small{display:block;font-size:12px;font-weight:400;color:#C9D8D3;margin-top:2px}
header a{color:#C9D8D3;text-decoration:none;font-size:14px;margin-left:18px}
header a:hover{color:#fff}
header a b{background:var(--gelb);color:var(--petrol);border-radius:10px;padding:0 7px;font-size:12px;margin-left:4px}
nav{margin-left:auto}
.suche{position:relative;flex:1;min-width:260px;max-width:560px}
.suche input{width:100%;font:inherit;font-size:16px;padding:12px 16px;border-radius:10px;border:0;outline:none}
.vorschlaege{position:absolute;top:100%;left:0;right:0;background:#fff;border-radius:10px;margin-top:6px;box-shadow:0 8px 30px rgba(0,0,0,.18);overflow:hidden;z-index:10}
.vorschlaege div{padding:10px 16px;cursor:pointer;color:var(--text)}
.vorschlaege div:hover,.vorschlaege div.aktiv{background:var(--sand)}
main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;padding:20px 28px;align-items:start}
@media (max-width:960px){main{grid-template-columns:1fr;padding:16px}header{padding:16px}nav{margin-left:0}header a{margin:0 14px 0 0}}
.karte{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:20px}
#ansicht{height:580px;padding:0;overflow:hidden;position:sticky;top:20px}
@media (max-width:960px){#ansicht{height:380px;position:relative;top:0}}
#ansicht canvas{display:block}
.leer{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;height:100%;color:var(--grau);text-align:center;padding:24px;line-height:1.5}
.spalte{display:flex;flex-direction:column;gap:16px}
h2{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--gruen-d);margin-bottom:12px}
h3{font-size:22px;font-weight:800;margin-bottom:4px}
.unter{color:var(--grau);font-size:13px}
table{width:100%;border-collapse:collapse}
td{padding:8px 0;border-bottom:1px solid var(--linie);vertical-align:top}
td:last-child{text-align:right;font-weight:600;white-space:nowrap;padding-left:12px}
tr:last-child td{border-bottom:0}
td .q{display:block;font-size:11.5px;color:var(--grau);font-weight:400;margin-top:2px;line-height:1.35}
.tag{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:1px;letter-spacing:.3px;white-space:nowrap}
.entnommen{background:#DCEFE6;color:#2D6B52}.berechnet{background:#E6EEF6;color:#2F5677}.geschaetzt{background:#FBF0CF;color:#7A5A06}.annahme{background:#EEEEEE;color:#555}.kunde{background:#F3E2DD;color:#8A3B2A}
.legende-art{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:11.5px;color:var(--grau)}
.legende-art .tag{margin:0 4px 0 0}
label{display:block;font-size:13px;color:var(--grau);margin:12px 0 6px}
select,input[type=range]{width:100%;font:inherit}
select{padding:8px 10px;border-radius:8px;border:1px solid var(--linie);background:#fff}
.gross{font-size:34px;font-weight:800}
.gross small{font-size:15px;font-weight:600;color:var(--grau)}
.hinweis{font-size:12.5px;color:var(--grau);line-height:1.45;margin-top:10px}
.zeile{display:flex;gap:10px;flex-wrap:wrap}
.zeile > div{flex:1;min-width:140px}
.legende{position:absolute;left:14px;bottom:12px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--grau);background:rgba(255,255,255,.88);padding:6px 10px;border-radius:8px;max-width:calc(100% - 28px)}
.legende i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.balken{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:6px 0 4px;background:var(--linie)}
.pp{border-left:3px solid var(--gelb);padding:4px 0 4px 12px;margin-bottom:10px;font-size:14px;line-height:1.4}
.pp small{display:block;color:var(--grau);font-size:12.5px}
footer{padding:4px 28px 28px;color:var(--grau);font-size:12px;line-height:1.6}
.seite{max-width:1100px;margin:0 auto;padding:24px 28px}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filter button{font:inherit;font-size:13px;border:1px solid var(--linie);background:#fff;border-radius:20px;padding:6px 14px;cursor:pointer}
.filter button.an{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.liste td{font-size:14px}
.liste td:last-child{white-space:normal}
.liste select,.liste input{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--linie);border-radius:6px;width:auto}
a{color:var(--gruen-d)}
.lod-wahl{position:absolute;top:12px;right:12px;display:flex;background:rgba(255,255,255,.92);border-radius:20px;padding:3px;z-index:2}
.lod-wahl button{font:inherit;font-size:12.5px;border:0;background:none;border-radius:16px;padding:6px 12px;cursor:pointer;color:var(--grau)}
.lod-wahl button.an{background:var(--petrol);color:#fff}
#ansicht{position:sticky}
[hidden]{display:none!important}

.zv{margin-bottom:14px}.zv b{font-size:13px;display:block;margin-bottom:6px}
.zr{display:grid;grid-template-columns:minmax(0,9rem) 1fr 2.6rem;gap:8px;align-items:center;font-size:12.5px;margin-bottom:3px}
.zr span:first-child{color:var(--grau);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zr i{display:block;height:8px;border-radius:4px;background:var(--gruen)}
.zr em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--grau)}
.nur-umfeld > .karte:not(:first-child):not(#k-zensus){display:none}
.nur-umfeld .legende-art{display:none}
.filter select{font:inherit;font-size:13px;border:1px solid var(--linie);background:#fff;border-radius:20px;padding:6px 12px;width:auto}

/* Handy-Durchgang 27.10. */
#ansicht canvas{width:100%!important;height:100%!important}
main > *{min-width:0}
.drehen{position:absolute;right:12px;bottom:12px;font:inherit;font-size:13px;border:0;border-radius:18px;padding:7px 14px;background:rgba(255,255,255,.92);color:#0F292E;cursor:pointer;z-index:2}
.drehen.an{background:#0F292E;color:#fff}
@media (max-width:640px){
  header{gap:12px;padding:14px 16px}
  header h1{font-size:18px}
  header h1 small{display:none}
  .suche{flex-basis:100%}
  main{gap:14px;padding:14px 16px}
  #ansicht{height:340px;border-radius:12px;position:relative!important;top:0}
  .karte{padding:16px;border-radius:12px}
  h3{font-size:19px}
  td:last-child{white-space:normal;max-width:45%}
  .legende{display:none}
  .lod-wahl{top:8px;right:8px;left:8px;justify-content:center}
  .lod-wahl button{font-size:12px;padding:6px 10px}
  .legende-art{font-size:11px;gap:4px 10px}
  .gross{font-size:28px}
  .zr{grid-template-columns:minmax(0,7.5rem) 1fr 2.4rem}
  footer{padding:4px 16px 24px}
  .seite{padding:16px}
  .liste td{display:block;border-bottom:0;padding:4px 0}
  .liste tr{display:block;border-bottom:1px solid var(--linie);padding:8px 0}
  .liste tr.kopf{display:none}
  .liste td{width:auto!important}
}
.warnhinweis{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fdf3e1;color:#7a4b0c;font-size:12.5px;line-height:1.4}

/* Startseite */
.start{display:grid;grid-template-columns:minmax(220px,380px) minmax(0,1fr);gap:32px;align-items:center;width:100%;max-width:900px;text-align:left;color:var(--text)}
.start svg{width:100%;height:auto;max-height:70vh}
.start .land{stroke:#fff;stroke-width:1.2;stroke-linejoin:round}
.start .land.voll{fill:var(--gruen-d)}.start .land.laedt{fill:#d9e6df}.start .land.fehlt{fill:#e8e4dc}
.start .land:hover{filter:brightness(.95)}
.start .block{fill:var(--gruen-d);opacity:.75;pointer-events:none}
.start h2{margin:0 0 8px;font-size:26px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--text)}
.start p{margin:0 0 14px;color:var(--grau);line-height:1.5}
.start .zahlen{display:flex;gap:24px;flex-wrap:wrap;margin:6px 0 16px}
.start .zahlen b{display:block;font-size:22px;font-weight:800;color:var(--text)}
.start .zahlen span{font-size:12.5px;color:var(--grau)}
.legende-karte{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--grau);margin-bottom:12px}
.legende-karte i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.legende-karte i.voll,.legende-karte i.block{background:var(--gruen-d)}.legende-karte i.block{opacity:.75;border-radius:1px}
.legende-karte i.laedt{background:#d9e6df}.legende-karte i.fehlt{background:#e8e4dc}
.start .klein{font-size:12.5px}
@media (max-width:700px){.start{grid-template-columns:1fr;gap:16px}.start svg{max-height:45vh}}
/* Suche */
.vorschlaege .zeile{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.vorschlaege .zeile b{font-weight:600}
.vorschlaege .zeile span{color:var(--grau);font-size:13px;white-space:nowrap}
.vorschlaege .zeile small{font-size:11px;padding:1px 7px;border-radius:20px;background:#fdf3e1;color:#7a4b0c;white-space:nowrap}
.vorschlaege .status{color:var(--grau);cursor:default}
main.startmodus{grid-template-columns:minmax(0,1fr)}
main.startmodus #ansicht{height:auto;min-height:560px;position:relative;top:0;display:flex;align-items:center;justify-content:center;padding:32px}
main.startmodus .leer{height:auto}
@media (max-width:700px){main.startmodus #ansicht{min-height:0;padding:20px}}