/* HPG / GDF Design-System — 1:1 aus der Webapp (dashboard.hpg-capital.de)
   und dem Portal-Entwurf vom 19.09.2026.

   DIESE DATEI IST DIE EINZIGE QUELLE FUER FARBEN, SCHRIFT UND BAUSTEINE.
   Keine Farbe, kein Radius, kein Schriftgrad wird in einer Seite wiederholt.
   Wer etwas Neues braucht, ergaenzt hier einen Baustein — nicht dort eine Ausnahme. */

:root{
  --pt:#006376; --pd:#004A58; --pl:#E5EFF2;
  --tx:#20242A; --gr:#87888A; --bd:#E3E3E3;
  --am:#F59E0B; --gn:#2E7D32; --rd:#A3432F;
  --gdf:#5C2D91;
  --bg:#FFFFFF; --sf:#FAFBFB;
  --fs:"Geist Sans","Geist",Arial,sans-serif;
  --fm:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--fs);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
a{color:var(--pt)}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}

/* ---------- Kopf ---------- */
.hdr{background:var(--bg);border-bottom:1px solid var(--bd);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.hdr-in{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand svg{height:40px;width:auto;display:block}
.brand-t{display:flex;align-items:baseline;gap:11px}
.brand-n{font-size:15px;font-weight:600;letter-spacing:-.005em;white-space:nowrap}
.brand-s{font-size:12.5px;color:var(--gr);font-weight:400;border-left:1px solid var(--bd);padding-left:11px;white-space:nowrap}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sel{font-family:var(--fs);font-size:13px;color:var(--tx);background:var(--bg);border:1px solid var(--bd);border-radius:0;padding:7px 10px;max-width:100%}
.sel:focus-visible{outline:2px solid var(--pt);outline-offset:1px}
.stand{font-size:12px;color:var(--gr);display:flex;align-items:center;gap:7px}
.stand b{color:var(--tx);font-weight:500}
.dot{width:7px;height:7px;background:var(--pt);display:inline-block}
.who{font-size:12px;color:var(--gr);border-left:1px solid var(--bd);padding-left:14px}
.nav{border-bottom:1px solid var(--bd);background:var(--sf)}
.nav-in{display:flex;gap:12px;align-items:center;padding-block:9px;flex-wrap:wrap}
.nav button.back{appearance:none;background:none;border:0;padding:4px 0;font:inherit;font-size:13.5px;color:var(--pt);cursor:pointer}
.nav button.back:hover{text-decoration:underline}
.nav button.back:focus-visible{outline:2px solid var(--pt);outline-offset:2px}
.crumb-sep{color:var(--bd)}
.osel{font-weight:500;color:var(--tx);max-width:min(100%,360px)}

/* ---------- Seitenkopf ---------- */
.ph{padding-block:26px 6px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.ph h1{font-size:19px}
.ph .sub{color:var(--gr);font-size:13px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-block:18px}
.kpi{border:1px solid var(--bd);border-top:3px solid var(--pt);padding:14px 16px 15px;background:var(--bg)}
.kpi .k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--gr)}
.kpi .v{font-size:22px;font-weight:600;margin-top:7px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .n{font-size:11.5px;color:var(--gr);margin-top:3px}
.kpi.am{border-top-color:var(--am)}
.kpi.gn{border-top-color:var(--gn)}

/* ---------- Karten ---------- */
.card{border:1px solid var(--bd);background:var(--bg);margin-block:18px}
.card>h2{background:var(--pt);color:#fff;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:7px 14px;display:flex;align-items:center;gap:10px}
.badge{margin-left:auto;font-size:10px;letter-spacing:.06em;background:rgba(255,255,255,.16);padding:3px 8px;text-transform:none;font-weight:400}
.card .body{padding:16px}
.grid2{display:grid;grid-template-columns:1.35fr .65fr;gap:0}
.grid2>*+*{border-left:1px solid var(--bd)}
.split{display:grid;grid-template-columns:1fr 300px;gap:0}
.split>*+*{border-left:1px solid var(--bd)}

/* ---------- Tabellen ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:11px}
thead th{background:var(--pl);color:var(--pt);text-align:left;font-size:9px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:8px 10px;border-bottom:2px solid var(--pt);white-space:nowrap}
tbody td{padding:7px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--pl)}
.oname{font-weight:600;color:var(--pt)}
.ort{color:var(--gr);font-size:12px}
.pill{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border:1px solid var(--bd);color:var(--gr);white-space:nowrap}
.pill.anl{border-color:#cfe0e5;background:var(--pl);color:var(--pd)}
.sumrow td{border-top:2px solid var(--pt);font-weight:600;background:var(--sf)}

/* ---------- Karte ---------- */
.mapbox{padding:14px 12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mapbox svg{width:100%;max-width:250px;height:auto}
.mapnote{font-size:11px;color:var(--gr);text-align:center;line-height:1.4}

/* ---------- Chart ---------- */
.chart{padding:18px 16px 6px}
.chart svg{width:100%;height:auto;display:block}
.cfoot{display:flex;gap:22px;flex-wrap:wrap;padding:10px 16px 16px;border-top:1px solid var(--bd);margin-top:6px}
.cfoot div{font-size:12px;color:var(--gr)}
.cfoot b{display:block;font-size:17px;color:var(--tx);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}

/* ---------- Entscheidungen ---------- */
.dec{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.dec>*+*{border-left:1px solid var(--bd)}
.dec-i{padding:15px 16px;display:flex;gap:13px;align-items:flex-start}
.dec-m{width:3px;align-self:stretch;background:var(--am);flex:none}
.dec-m.q{background:var(--pt)}
.dec-t{font-weight:500;font-size:14px}
.dec-d{font-size:12.5px;color:var(--gr);margin-top:3px}
.dec-w{font-family:var(--fm);font-size:12px;color:var(--pd);margin-top:6px}

/* ---------- Struktur ---------- */
.stru{padding:18px 16px}
.stru svg{width:100%;height:auto;max-width:760px;margin:0 auto;display:block}
.stru p{font-size:12.5px;color:var(--gr);max-width:64ch;margin:14px auto 0;text-align:center}

/* ---------- Dokumente ---------- */
.doc{display:flex;align-items:center;gap:13px;padding:11px 16px;border-bottom:1px solid var(--bd)}
.doc:last-child{border-bottom:0}
.doc-i{width:26px;height:32px;border:1px solid var(--bd);border-top-color:var(--pt);border-top-width:3px;flex:none;font-size:8px;color:var(--gr);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;letter-spacing:.04em}
.doc-t{font-weight:600;font-size:11.5px}
.doc-s{font-size:11.5px;color:var(--gr)}
.doc-a{margin-left:auto;font-size:12px;color:var(--pt);border:1px solid var(--bd);padding:5px 11px;background:none;font-family:inherit;cursor:pointer}
.doc-a:hover{background:var(--pl)}
.doc-n{margin-left:auto;font-size:11px;color:var(--am)}

/* ---------- Objektseite ---------- */
.eck{display:grid;grid-template-columns:repeat(3,1fr)}
.eck-i{padding:12px 16px;border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.eck-i:nth-child(3n){border-right:0}
.eck-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gr)}
.eck-v{font-size:12.5px;font-weight:500;margin-top:3px;font-variant-numeric:tabular-nums}
.eck-n{font-size:11.5px;color:var(--gr);margin-top:2px}
.tl{padding:6px 16px 14px}
.tl-i{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--bd);align-items:baseline}
.tl-i:last-child{border-bottom:0}
.tl-d{font-family:var(--fm);font-size:12px;color:var(--gr);width:86px;flex:none}
.tl-t{font-size:13.5px}
.tl-b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;color:var(--gr);white-space:nowrap}
.imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd)}
.img{aspect-ratio:4/3;background:var(--pl);display:flex;align-items:center;justify-content:center;color:var(--pd);font-size:11px;text-align:center;padding:8px;max-width:100%}
.hint{font-size:12px;color:var(--gr);padding:10px 16px;background:var(--sf);border-top:1px solid var(--bd)}

/* ---------- Fuß ---------- */
.ftr{border-top:1px solid var(--bd);margin-top:34px;padding-block:22px 34px;background:var(--sf)}
.ftr-in{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;font-size:12px;color:var(--gr)}
.ftr b{display:block;color:var(--tx);font-weight:500;margin-bottom:3px}
.ftr a{color:var(--gr)}
.ftr-am{margin-left:auto;text-align:right}

.entwhint{border:1px solid var(--am);border-left-width:3px;background:#FEF6E7;color:#5c4408;font-size:12.5px;padding:9px 14px;margin-top:10px}


@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2,.split,.dec,.eck{grid-template-columns:1fr}
  .grid2>*+*,.split>*+*,.dec>*+*{border-left:0;border-top:1px solid var(--bd)}
  .eck-i{border-right:0}
  .imgs{grid-template-columns:repeat(2,1fr)}
  .hdr-r{width:100%;margin-left:0}
  .ftr-am{margin-left:0;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* --- Knopf, nur auf der oeffentlichen Startseite --- */
.btn{display:inline-block;background:var(--pt);color:#fff;border:0;padding:12px 24px;
     font:inherit;font-size:15px;line-height:1;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pd)}
.btn:focus-visible{outline:2px solid var(--pt);outline-offset:2px}
.lead{max-width:60ch}
.lead p{margin:14px 0}