/* Haus Barnich · Mission-Control-Redesign (Starlink-Stil) · v2 */

@font-face{font-family:'D-DIN';src:url('/static/fonts/D-DIN.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN';src:url('/static/fonts/D-DIN-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN Condensed';src:url('/static/fonts/D-DINCondensed.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN Condensed';src:url('/static/fonts/D-DINCondensed-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'D-DIN Exp';src:url('/static/fonts/D-DINExp-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#060709; --panel:#0c0e11; --panel2:#11141a; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --ink:#f2f5f7; --ink2:#98a2ab; --ink3:#5b646d;
  --acc:#7ab3ff; --ok:#41d98d; --warn:#f2b63c; --bad:#ff5e5e;
  --r:14px; --pad:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'D-DIN',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100dvh; line-height:1.45; font-size:15px;
  background-image:radial-gradient(1200px 500px at 50% -200px, rgba(122,179,255,.07), transparent 70%);
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
}
::selection{background:rgba(122,179,255,.35)}
a,a:visited{color:var(--ink);text-decoration:none}
p a,td a,.tx .t a,.klein a,li a,
p a:visited,td a:visited,.tx .t a:visited,.klein a:visited,li a:visited{color:var(--acc)}
h1,h2,h3{font-weight:700;letter-spacing:.01em}
h2{font-size:13px;text-transform:uppercase;letter-spacing:.16em;color:var(--ink2);margin:0 0 12px}
h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--ink3);margin:22px 0 8px}

/* ---------- Topbar ---------- */
header.top{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top)) 18px 10px;
  background:rgba(6,7,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.wordmark{font-family:'D-DIN Exp','D-DIN',sans-serif;font-weight:700;font-size:14px;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap}
.wordmark span{color:var(--ink3)}
.topmeta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--ink2);letter-spacing:.08em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;box-shadow:0 0 8px rgba(65,217,141,.8)}
.dot.off{background:var(--ink3);box-shadow:none}
.dot.warn{background:var(--warn);box-shadow:0 0 8px rgba(242,182,60,.7)}
.dot.bad{background:var(--bad);box-shadow:0 0 8px rgba(255,94,94,.7)}

/* ---------- Bottom-Tabs (mobil) / Topnav (Desktop) ---------- */
nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;justify-content:space-around;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:rgba(8,9,12,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
}
nav.tabs a{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  min-width:56px;padding:4px 8px;border-radius:10px;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
}
nav.tabs a svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
nav.tabs a.akt{color:var(--ink)}
nav.tabs a:active{background:rgba(255,255,255,.06)}

main{padding:18px 16px 30px;max-width:1080px;margin:0 auto}
@media(min-width:900px){
  body{padding-bottom:0}
  nav.tabs{position:sticky;top:49px;bottom:auto;justify-content:flex-start;gap:4px;padding:6px 18px;border-top:0;border-bottom:1px solid var(--line)}
  nav.tabs a{flex-direction:row;gap:8px;font-size:11px;padding:7px 14px}
  nav.tabs a.akt{background:rgba(255,255,255,.07)}
  main{padding:28px 24px 60px}
}

/* ---------- Hero ---------- */
.hero{padding:26px 4px 10px}
.hero .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)}
.hero .zahl{font-family:'D-DIN Condensed','D-DIN',sans-serif;font-weight:700;font-size:clamp(56px,16vw,88px);line-height:1.02;letter-spacing:.01em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.hero .zahl small{font-size:.42em;color:var(--ink2);font-weight:400;letter-spacing:.06em}
.hero .sub{color:var(--ink2);font-size:13px}
.hero .zahl.ok{color:var(--ok)} .hero .zahl.bad{color:var(--bad)} .hero .zahl.warn{color:var(--warn)}

/* ---------- Kacheln ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
@media(min-width:700px){.grid{grid-template-columns:repeat(4,1fr);gap:12px}}
.tile{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 12px;
  display:flex;flex-direction:column;gap:2px;min-height:86px;position:relative;overflow:hidden;
}
.tile .lbl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.tile .wert{font-family:'D-DIN Condensed','D-DIN',sans-serif;font-weight:700;font-size:28px;line-height:1.1;margin-top:auto;font-variant-numeric:tabular-nums}
.tile .wert small{font-size:.55em;color:var(--ink2);font-weight:400}
.tile .sub{font-size:11px;color:var(--ink2)}
.tile.link:active{border-color:var(--line2)}
.tile .wert.ok{color:var(--ok)} .tile .wert.warn{color:var(--warn)} .tile .wert.bad{color:var(--bad)}

.grid.g2{grid-template-columns:repeat(2,1fr)}

/* ---------- Details (eingeklappte Notizen) ---------- */
details{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
summary{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);cursor:pointer;list-style:none}
summary::before{content:"+ "}
details[open] summary::before{content:"– "}
summary::-webkit-details-marker{display:none}
details .tw{margin-top:8px}

/* ---------- Karten / Sektionen ---------- */
section{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);margin:14px 0}
.karte{border:1px solid rgba(255,94,94,.45);background:rgba(255,94,94,.06);border-radius:var(--r);padding:14px;margin:10px 0}
.karte .gross{font-size:17px}
.gross{font-size:18px}
.gross b{font-family:'D-DIN Condensed','D-DIN',sans-serif;font-size:1.35em;font-weight:700}
.klein{font-size:12px;color:var(--ink2)}
.leer{color:var(--ink3);font-style:italic;font-size:13px}
hr{border:0;border-top:1px solid var(--line);margin:14px 0}

/* ---------- Listenzeilen ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .ic{flex:0 0 34px;height:34px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.row .ic svg{width:17px;height:17px;stroke:var(--ink2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.row .tx{flex:1;min-width:0}
.row .tx .t{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx .s{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .amt{font-family:'D-DIN Condensed','D-DIN',sans-serif;font-weight:700;font-size:19px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row .amt .s{display:block;font-family:'D-DIN';font-weight:400;font-size:10.5px;color:var(--ink3);letter-spacing:.08em;text-transform:uppercase}

/* ---------- Tags ---------- */
.tag{font-size:10px;white-space:nowrap;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);display:inline-block}
.tag.bel{color:var(--ok)}
.tag.sch{color:var(--warn)}
.tag.off{color:var(--ink3)}
.tag.warn{color:var(--bad)}

/* ---------- Tabellen ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;scrollbar-width:none}
.tw::-webkit-scrollbar{display:none}
table{border-collapse:collapse;width:100%;font-size:13px;min-width:560px}
th{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:700;text-align:left;padding:8px 8px 6px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top;color:var(--ink);font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tr.rot td{color:var(--bad);border-left:0}
tr.rot td:first-child{box-shadow:inset 2px 0 0 var(--bad)}
tr.orange td{color:var(--warn)}
tr.orange td:first-child{box-shadow:inset 2px 0 0 var(--warn)}
tr.ok td{color:var(--ok)}
td i{color:var(--ink3)}

/* ---------- Chips ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips{gap:20px}
.chips a,.chips a:visited{flex:0 0 auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:6px 1px;border-bottom:1px solid transparent}
.chips a.akt,.chips a.akt:visited{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}

/* ---------- Formulare ---------- */
.form{display:grid;gap:12px;margin-top:10px}
@media(min-width:700px){.form{grid-template-columns:1fr 1fr}}
.form label,.login label{display:flex;flex-direction:column;gap:5px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
input,select{
  font-family:'D-DIN',system-ui,sans-serif;font-size:16px;color:var(--ink);
  background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;width:100%;
}
input:focus,select:focus{outline:none;border-color:var(--acc)}
input[type=file]{padding:9px;font-size:13px}
button{
  font-family:'D-DIN',system-ui,sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--ink);color:#0a0c0e;border:0;border-radius:11px;padding:13px 26px;cursor:pointer;
}
button:active{opacity:.8}
.form button{grid-column:1 / -1;justify-self:start}
.msg{border:1px solid rgba(122,179,255,.4);background:rgba(122,179,255,.08);color:var(--ink);padding:10px 14px;border-radius:10px;font-size:13px;margin:10px 0}
.warnbox{border:1px solid rgba(255,94,94,.4);background:rgba(255,94,94,.07);padding:10px 14px;border-radius:10px;font-size:12.5px;color:var(--ink2);margin:8px 0}

/* ---------- Login ---------- */
body.auth{display:flex;align-items:center;justify-content:center;padding:20px;padding-bottom:20px}
.login{width:100%;max-width:360px;text-align:center}
.login .wordmark{font-size:17px;display:block;margin-bottom:4px}
.login .unter{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink3);margin-bottom:34px}
.login form{display:grid;gap:14px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.login button{width:100%;margin-top:6px}
.login .msg{text-align:left}
.login h1{display:none}

/* ---------- Abmelden im Mehr-Menü ---------- */
.inl{display:inline}
.inl button{background:transparent;color:var(--bad);border:1px solid rgba(255,94,94,.45);padding:11px 22px}

/* ---------- Diagramme ---------- */
.chart{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:10px 0}
svg text{fill:var(--ink3);font-family:'D-DIN',system-ui,sans-serif}
.spark{display:block;width:100%;height:44px;margin-top:6px}

/* ---------- Balken (Aufteilung) ---------- */
.split{display:flex;height:10px;border-radius:999px;overflow:hidden;border:1px solid var(--line);margin:8px 0 4px}
.split div{height:100%}
.legende{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:11px;color:var(--ink2);margin-top:8px}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende i{width:9px;height:9px;border-radius:3px;display:inline-block;font-style:normal}

/* ---------- Mehr-Seite ---------- */
.mehrliste .row{padding:15px 2px}
.pfeil{color:var(--ink3);flex:0 0 auto}