/* HBI – Hansestadt Bremen Innovations · Designsprache wie agents.hansestadt-bremen-innovations.de */
:root{
  --dark:rgb(13,13,13); --dark2:rgb(20,20,20); --card:rgb(22,22,22); --line:rgba(238,238,238,.09);
  --ink:rgb(238,238,238); --mute:rgba(238,238,238,.62); --light:rgb(250,250,250);
  --brand:rgb(26,143,232); --brand-ink:rgb(10,90,160); --brand-soft:rgba(26,143,232,.14);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --head:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rad:.4rem; --radius:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dark);color:var(--ink);font:15px/1.6 var(--head);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--head);margin:0;font-weight:500;text-transform:uppercase;letter-spacing:-.01em}
h1{font-size:clamp(36px,6.2vw,76px);line-height:1}
h2{font-size:clamp(20px,2.4vw,26px);line-height:1.15}
h3{font-family:var(--mono);font-size:14px;letter-spacing:.02em}
.co{color:var(--brand)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.row{display:flex;align-items:center;justify-content:space-between}
.slabel{display:inline-block;font:400 13px var(--mono);color:var(--brand);text-transform:lowercase;margin-bottom:14px;letter-spacing:.02em}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(13,13,13,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.top .row{height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.brand img{height:38px;width:auto}
.brand-txt{font:500 14px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.brand-txt b{color:var(--brand);font-weight:600;margin-right:4px}
.top nav a{font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);text-decoration:none}
.top nav a:hover{color:var(--ink)}

/* Hero */
.hero{padding:72px 16px 30px}
.lead{color:var(--mute);font-size:18px;max-width:660px;margin:18px 0 0}
.hint{font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);margin-top:12px}
.search{position:relative;display:flex;gap:8px;max-width:680px;margin-top:30px}
.search input{flex:1;min-width:0;background:var(--dark2);border:1px solid rgba(238,238,238,.16);color:var(--ink);border-radius:var(--rad);padding:16px 16px;font:400 16px var(--head)}
.search input::placeholder{color:rgba(238,238,238,.4)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.search button{background:var(--brand);color:#fff;border:0;border-radius:var(--rad);padding:0 24px;font:500 14px var(--mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.search button:hover{filter:brightness(1.1)}
.ac{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:var(--dark2);border:1px solid rgba(238,238,238,.16);border-radius:var(--rad);overflow:hidden;display:none;z-index:30}
.ac.show{display:block}
.ac div{padding:12px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac div:last-child{border-bottom:0}
.ac div.on,.ac div:hover{background:var(--brand-soft)}
.facts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;margin-top:48px}
.facts3 div{background:var(--dark);padding:20px;display:flex;flex-direction:column;gap:6px}
.facts3 .n{font:400 12px var(--mono);color:var(--brand)}
.facts3 b{font:500 15px var(--mono);text-transform:uppercase;letter-spacing:.02em}
.facts3 span:last-child{color:var(--mute);font-size:14px}

/* Karten / Sektionen */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin:18px auto}
.card > h2{margin-bottom:8px}
.sub{color:var(--mute);font-size:14px;margin:0 0 18px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi{background:var(--dark2);border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.kpi .v{font:500 26px/1.1 var(--mono);color:var(--ink)}
.kpi .v small{font-size:13px;color:var(--mute);margin-left:4px}
.kpi .l{color:var(--mute);font:400 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.03em;margin-top:6px}

/* Evidenz-Kennzeichnung */
.ev{display:inline-block;font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:3px;vertical-align:middle;white-space:nowrap;border:1px solid}
.ev.OBSERVED{color:#6fd3a0;border-color:rgba(111,211,160,.4);background:rgba(111,211,160,.08)}
.ev.DERIVED{color:#7cc0f5;border-color:rgba(26,143,232,.5);background:var(--brand-soft)}
.ev.STATISTICAL{color:#f0c27a;border-color:rgba(240,194,122,.4);background:rgba(240,194,122,.08)}
.ev.ASSUMED{color:#d3a8f5;border-color:rgba(211,168,245,.4);background:rgba(211,168,245,.08)}
.ev.MANUAL{color:var(--ink);border-color:rgba(238,238,238,.35);background:rgba(238,238,238,.06)}
.conf{display:inline-block;width:42px;height:4px;border-radius:2px;background:rgba(238,238,238,.12);vertical-align:middle;margin-left:8px;overflow:hidden}
.conf i{display:block;height:100%;background:var(--brand)}

table.facts{width:100%;border-collapse:collapse}
table.facts td{padding:11px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.facts td:first-child{color:var(--mute);width:38%;font:400 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.03em;padding-top:13px}
table.facts .src{color:var(--mute);font-size:12px;margin-top:2px}

/* Objektkopf */
.badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--rad);font:600 32px var(--mono);color:#0d0d0d}
.k-A{background:#2ECC71}.k-B{background:#9BE15D}.k-C{background:#F1C40F}.k-D{background:#F39C12}.k-E{background:#8a8f99}
.objhead{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.objhead .addr{font:500 26px/1.15 var(--head);text-transform:uppercase}
.objhead .meta{color:var(--mute);font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.03em;margin-top:4px}

/* 3D */
.stage{position:relative;height:min(64vh,580px);border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);background:#070707}
#map3d{position:absolute;inset:0}
.mapctl{position:absolute;left:12px;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:5}
.mapctl button{background:rgba(13,13,13,.86);color:var(--ink);border:1px solid rgba(238,238,238,.16);border-radius:var(--rad);padding:8px 12px;font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.mapctl button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.legend{position:absolute;right:12px;top:12px;background:rgba(13,13,13,.86);border:1px solid rgba(238,238,238,.16);border-radius:var(--rad);padding:10px 12px;font:400 11px var(--mono);text-transform:uppercase;letter-spacing:.03em;z-index:5}
.legend div{display:flex;align-items:center;gap:8px;margin:3px 0}
.legend i{width:11px;height:11px;border-radius:2px;display:inline-block}

/* Umfeld / Balken */
.bar{height:6px;background:rgba(238,238,238,.1);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--brand)}
.dist{display:grid;grid-template-columns:92px 1fr 42px;gap:7px 10px;align-items:center;font:400 12px var(--mono)}

/* Gewerke */
.trade{background:var(--dark2);border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.trade .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.trade .sc{font:600 22px var(--mono)}
.trade ul{list-style:none;padding:0;margin:0;font-size:13.5px}
.trade li{padding:8px 0;border-top:1px solid var(--line)}
.trade li b{font:500 14px var(--mono);color:var(--brand);margin-right:4px}

.money{font-family:var(--mono)}
.opts{display:flex;gap:16px;flex-wrap:wrap;margin:6px 0 16px;font-size:14px}
.opts label{display:flex;gap:7px;align-items:center;cursor:pointer}
.opts input[type=checkbox]{accent-color:var(--brand);width:16px;height:16px}
input[type=number]{width:72px;background:var(--dark2);color:var(--ink);border:1px solid rgba(238,238,238,.16);border-radius:var(--rad);padding:6px 8px;font:400 14px var(--mono)}
.note{color:var(--mute);font-size:13px}
.warn{background:rgba(26,143,232,.08);border:1px solid rgba(26,143,232,.35);border-left:3px solid var(--brand);color:var(--ink);border-radius:var(--rad);padding:12px 14px;font-size:13.5px;margin-top:12px}
.path{background:var(--dark2);border:1px solid var(--line);border-radius:var(--rad);padding:16px}
.path h3{margin-bottom:8px}
.path table{width:100%;font-size:13.5px;border-collapse:collapse}
.path td{padding:7px 0;border-bottom:1px solid var(--line)}
.path td:last-child{text-align:right;font-family:var(--mono);white-space:nowrap;padding-left:10px}
.loading{padding:40px 0;color:var(--mute);font:400 13px var(--mono);text-transform:uppercase;letter-spacing:.03em}
.spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(238,238,238,.15);border-top-color:var(--brand);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-3px;margin-right:10px}
@keyframes sp{to{transform:rotate(360deg)}}
.method p{color:var(--mute);line-height:2}
.method h2{margin-bottom:10px}

/* Footer */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 50px}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.03em}
.foot-brand img{height:30px;width:auto}
.foot nav{display:flex;gap:18px}
.foot nav a{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);text-decoration:none}
.foot nav a:hover{color:var(--brand)}
.attr{color:rgba(238,238,238,.45);font-size:12px;margin-top:16px}

/* Batch-Seite */
.drop{display:block;border:1px dashed rgba(238,238,238,.25);border-radius:var(--rad);padding:36px;text-align:center;color:var(--mute);cursor:pointer;font:400 13px var(--mono);text-transform:uppercase;letter-spacing:.03em}
.drop.on,.drop:hover{border-color:var(--brand);color:var(--ink)}
.btn{background:var(--brand);color:#fff;border:0;border-radius:var(--rad);padding:11px 18px;font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.04em;cursor:pointer;text-decoration:none;display:inline-block}

@media (max-width:600px){
  .card{padding:18px}.objhead .addr{font-size:20px}.legend{display:none}
  .brand-txt{font-size:12px}.hero{padding-top:44px}
  .search{flex-direction:column}.search button{padding:14px}
}

.report-download{display:inline-block;margin-top:18px;padding:12px 18px;border:1px solid currentColor;border-radius:8px;text-decoration:none;font-weight:600}.report-download:hover{background:#e4f4f4}.report-download:focus-visible{outline:3px solid #159ca4;outline-offset:3px}