/* Projekteigene Ergänzungen zum Apple-Designsystem */
.credit{position:fixed; left:var(--side); right:0; bottom:10px; z-index:40; text-align:center;
  font-size:10.5px; letter-spacing:.01em; color:#fff; pointer-events:none; opacity:.92}
.login .credit{left:0}

.view{display:none}
.view.on{display:block}

.hero{display:flex; align-items:center; gap:18px; padding:22px 24px}
.hero .beacon{width:12px; height:12px; border-radius:50%; background:var(--tx-4); flex:none}
.hero.live .beacon{background:var(--green); box-shadow:0 0 0 5px var(--green-soft); animation:puls 2.2s ease-in-out infinite}
.hero .ht{font-size:20px; font-weight:620; letter-spacing:-.022em; line-height:1.2}
.hero .hs{font-size:12.5px; color:var(--tx-3); margin-top:3px}
.hero .grow{flex:1}
.btn.xl{height:42px; padding:0 26px; font-size:14.5px; font-weight:560}

.toggles .kv{padding:12px 20px}
.toggles .kv .nm{font-weight:520}

.spark{display:block; width:100%; height:120px}
.spark path.ln{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.spark path.ar{fill:var(--accent-soft); stroke:none}

.chart{display:block; width:100%; height:340px}
.chart .band{fill:var(--accent-soft)}
.chart .med{fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round}
.chart .real{fill:none; stroke:var(--green); stroke-width:2.2; stroke-dasharray:6 6; stroke-linecap:round}
.chart .grid{stroke:var(--line-2); stroke-width:1}
.chart text{fill:var(--tx-4); font-size:11px; font-family:var(--mono)}
.legend{display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--tx-3)}
.legend i{display:inline-block; width:18px; height:3px; border-radius:2px; margin-right:7px; vertical-align:middle}
.legend .l1{background:var(--accent)} .legend .l2{background:var(--green)} .legend .l3{background:var(--accent-soft); height:9px}

.steps{counter-reset:s; list-style:none; padding:4px 0}
.steps li{position:relative; padding:9px 20px 9px 56px; font-size:13px; color:var(--tx-2); line-height:1.55}
.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:20px; top:9px;
  width:22px; height:22px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  font-size:11.5px; font-weight:650; display:grid; place-items:center}
.steps b{color:var(--tx); font-weight:560}
.form{display:grid; gap:10px; padding:16px 20px}
.form label{font-size:11.5px; color:var(--tx-3); font-weight:550; letter-spacing:.01em}
.row{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.msg{font-size:12.5px; min-height:18px}
.msg.bad{color:var(--red)} .msg.good{color:var(--green)}

.login{min-height:100vh; display:grid; place-items:center; padding:24px}
.lbox{width:min(360px,100%); text-align:center}
.lbox .glyph{width:52px; height:52px; border-radius:14px; margin:0 auto 18px}
.lbox .glyph svg{width:28px; height:28px}
.lbox h1{font-size:22px; font-weight:640; letter-spacing:-.026em}
.lbox p{font-size:13px; color:var(--tx-3); margin:6px 0 24px}
.lbox .inp{height:42px; font-size:14px; text-align:center; border-radius:var(--r)}
.lbox .btn{width:100%; height:42px; margin-top:12px; font-size:14px}

.mono{font-family:var(--mono)}
td .side{font-weight:560}
.toolbar .chip{margin-bottom:3px}
@media (max-width:860px){ .credit{left:0} .hero{flex-wrap:wrap} }