:root{color-scheme:dark;--bg:#08080a;--panel:#111114;--panel2:#16161a;--raised:#1e1e23;--line:#26241f;--text:#f1efe9;--muted:#8f8d93;--gold:#e8c66b;--gold2:#b98c37;--ok:#3ddc84;--part:#f5b544;--down:#ff6b6b;--none:#2a2a31;--shadow:0 24px 60px -30px #000}
@media (prefers-color-scheme:light){:root{color-scheme:light;--bg:#f6f4ee;--panel:#fffefa;--panel2:#fbf9f3;--raised:#f0ece2;--line:#e6dfcf;--text:#211e18;--muted:#6f685b;--gold:#a87a1f;--gold2:#7d5810;--ok:#16a34a;--part:#d97706;--down:#dc2626;--none:#e4dfd3;--shadow:0 24px 50px -30px #5a4a2a55}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font:15px/1.55 Inter,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(color-mix(in srgb,var(--text) 5%,transparent) 1px,transparent 1px) 0 0/24px 24px fixed,var(--bg);overflow-x:hidden}
.glow{position:fixed;inset:-30vh -10vw auto;height:80vh;pointer-events:none;background:radial-gradient(50% 60% at 25% 30%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%),radial-gradient(40% 50% at 85% 10%,color-mix(in srgb,var(--gold2) 12%,transparent),transparent 70%);filter:blur(10px);z-index:-1}
h1,h2,p{margin:0}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:860px;margin:0 auto;padding:44px 16px 36px}

/* Kopf */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:30px;animation:rise .5s both}
.brand{display:flex;align-items:center;gap:13px}
.brand b{display:block;font-size:19px;font-weight:750;letter-spacing:-.4px}
.brand small{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}
.logo{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#17140b;background:linear-gradient(135deg,#f6dc8e,var(--gold) 45%,var(--gold2));box-shadow:0 10px 26px -8px color-mix(in srgb,var(--gold) 70%,transparent),inset 0 1px 0 #ffffff70}
.logo svg{width:24px;height:24px;stroke-width:2.4}
.updated{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(8px);white-space:nowrap;font-variant-numeric:tabular-nums}
.live{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2s infinite}
.updated.offline .live{background:var(--down);animation:none}

/* Gesamtstatus */
.overall{position:relative;overflow:hidden;display:flex;align-items:center;gap:20px;padding:26px 28px;border-radius:22px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);margin-bottom:16px;animation:rise .5s .05s both;--c:var(--muted)}
.overall::before{content:'';position:absolute;inset:0;background:radial-gradient(80% 140% at 0% 50%,color-mix(in srgb,var(--c) 20%,transparent),transparent 60%);pointer-events:none}
.overall.ok{--c:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.overall.part{--c:var(--part);border-color:color-mix(in srgb,var(--part) 40%,var(--line))}
.overall.down{--c:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--line))}
.overall-icon{position:relative;flex:none;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--bg);background:var(--c);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 14%,transparent),0 10px 30px -6px var(--c)}
.overall.ok .overall-icon,.overall.part .overall-icon,.overall.down .overall-icon{animation:halo 3s ease-in-out infinite}
.overall-icon svg{width:28px;height:28px;stroke-width:3}
.overall-body{position:relative}
.overall h1{font-size:clamp(21px,4.2vw,28px);font-weight:760;letter-spacing:-.8px;line-height:1.2}
.overall p{color:var(--muted);margin-top:4px}

/* Kennzahlen */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.tile{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;animation:rise .5s both}
.tile:nth-child(1){animation-delay:.1s}.tile:nth-child(2){animation-delay:.15s}.tile:nth-child(3){animation-delay:.2s}
.tile small{font-size:11px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;font-weight:600}
.tile strong{font-size:26px;font-weight:760;letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.tile-sub{font-size:12px;color:var(--muted)}
.tile-bar{height:5px;border-radius:99px;background:var(--raised);overflow:hidden;margin-top:6px}
.tile-bar span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold));transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* Dienste */
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px 22px 8px;box-shadow:var(--shadow);animation:rise .5s .25s both}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.card h2{font-size:15px;font-weight:700}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:9px;height:9px;border-radius:3px}
.service{padding:18px 0 14px;border-bottom:1px solid var(--line);animation:rise .45s both}
.service:last-child{border-bottom:0}
.service-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:14px}
.service-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,var(--raised));border:1px solid color-mix(in srgb,var(--gold) 22%,var(--line));position:relative}
.service-icon svg{width:21px;height:21px}
.service-icon::after{content:'';position:absolute;right:-3px;bottom:-3px;width:12px;height:12px;border-radius:50%;border:3px solid var(--panel);background:var(--none)}
.service.ok .service-icon::after{background:var(--ok)}.service.down .service-icon::after{background:var(--down)}
.service-name{display:flex;flex-direction:column;min-width:0}
.service-name b{font-size:15px;font-weight:680;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-name small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.service-meta{display:flex;align-items:center;gap:12px}
.uptime{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums}
.badge{font-size:11px;font-weight:700;padding:4px 11px;border-radius:99px;letter-spacing:.3px}
.badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 30%,transparent)}
.badge.down{color:var(--down);background:color-mix(in srgb,var(--down) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--down) 30%,transparent)}
.badge.none{color:var(--muted);background:var(--raised)}
.bars{display:grid;grid-template-columns:repeat(48,1fr);gap:3px;height:36px}
.bar{border-radius:4px;cursor:pointer;transition:transform .15s,filter .15s,opacity .15s}
.bars:hover .bar{opacity:.55}
.bars .bar:hover{opacity:1;transform:scaleY(1.15);filter:brightness(1.15)}
.bar.ok{background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 85%,#fff),var(--ok))}
.bar.part{background:var(--part)}
.bar.down{background:var(--down)}
.bar.none{background:var(--none)}
.legend .ok{background:var(--ok)}.legend .part{background:var(--part)}.legend .down{background:var(--down)}.legend .none{background:var(--none)}
.service-foot{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);margin-top:7px}
.empty{color:var(--muted);padding:18px 0}

/* Tooltip */
.tip{position:absolute;z-index:10;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:8px 12px;border-radius:11px;font-size:12px;background:color-mix(in srgb,var(--panel2) 92%,transparent);border:1px solid var(--line);box-shadow:0 14px 34px -10px #000a;backdrop-filter:blur(10px);white-space:nowrap}
.tip span{color:var(--muted)}
.tip.ok b{color:var(--ok)}.tip.part b{color:var(--part)}.tip.down b{color:var(--down)}.tip.none b{color:var(--muted)}

footer{text-align:center;color:var(--muted);font-size:12px;margin-top:28px}

@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}80%,100%{box-shadow:0 0 0 7px transparent}}
@keyframes halo{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 8%,transparent),0 10px 34px -4px var(--c)}}
@media (max-width:640px){
 .wrap{padding-top:24px}
 .tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tile{padding:12px}.tile strong{font-size:18px}.tile small{font-size:9px;letter-spacing:.3px}
 .overall{padding:20px;gap:16px}.overall-icon{width:46px;height:46px}
 .legend{display:none}.bars{gap:2px;height:30px}.bar{border-radius:2px}
 .service-head{grid-template-columns:auto minmax(0,1fr);}.service-meta{grid-column:1/-1;justify-content:flex-start}
 .updated{padding:6px 10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Zeitraum-Auswahl und Störungsverlauf */
.card-head{gap:12px}
.ranges{display:inline-flex;padding:3px;border-radius:12px;background:var(--raised);border:1px solid var(--line);margin-left:auto}
.ranges button{font:inherit;font-size:12px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:9px;padding:6px 12px;cursor:pointer;transition:background .2s,color .2s}
.ranges button:hover{color:var(--text)}
.ranges button.active{color:#17140b;background:linear-gradient(135deg,#f6dc8e,var(--gold));box-shadow:0 4px 14px -6px var(--gold)}
.legend{width:100%;justify-content:flex-end}
.incidents-card{margin-top:16px;padding-bottom:14px;animation-delay:.3s}
.muted-note{font-size:12px;color:var(--muted)}
.incidents{display:grid;gap:8px;margin-top:10px}
.incident{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--raised) 45%,transparent)}
.incident-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.incident.ongoing{border-color:color-mix(in srgb,var(--down) 40%,var(--line));background:color-mix(in srgb,var(--down) 8%,var(--panel))}
.incident.ongoing .incident-dot{background:var(--down);box-shadow:0 0 0 4px color-mix(in srgb,var(--down) 20%,transparent)}
.incident-info{display:flex;flex-direction:column;min-width:0}
.incident-info small{color:var(--muted);font-size:12px}
.incident-badge{font-size:12px;font-weight:650;padding:4px 10px;border-radius:99px;background:var(--raised);white-space:nowrap}
.incident.ongoing .incident-badge{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent)}
.no-incidents{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;color:var(--muted);background:color-mix(in srgb,var(--ok) 6%,transparent);border:1px dashed color-mix(in srgb,var(--ok) 30%,var(--line))}
.no-incidents .check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--bg);background:var(--ok);font-weight:800}
@media (max-width:640px){.ranges{margin-left:0;width:100%}.ranges button{flex:1;padding:6px 4px}.incident{grid-template-columns:auto minmax(0,1fr)}.incident-badge{grid-column:2;justify-self:start}}
/* Animationen nur beim ersten Laden, nicht bei jeder Aktualisierung */
body:not(.intro) .service,body:not(.intro) .tile,body:not(.intro) .card,body:not(.intro) .overall,body:not(.intro) .top{animation:none}