:root{
  --cy:#19d9ff; --cy2:#00e5ff; --dim:rgba(25,217,255,.35); --faint:rgba(25,217,255,.08);
  --ok:#00ffa3; --warn:#ffb300; --bad:#ff4d6a; --txt:#d8f3ff; --mut:#7fb6cc;
  --bg1:#02070f; --bg2:#06182e; --panel:rgba(6,22,44,.62);
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  font-family:'Rajdhani','Segoe UI',system-ui,sans-serif; color:var(--txt); letter-spacing:.03em;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(0,140,255,.22), transparent 55%),
    linear-gradient(160deg,var(--bg1),var(--bg2)) fixed;
  overflow-x:hidden;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--faint) 1px,transparent 1px),linear-gradient(90deg,var(--faint) 1px,transparent 1px);
  background-size:44px 44px;mask-image:radial-gradient(ellipse at center,#000 20%,transparent 80%)}
a{color:inherit;text-decoration:none}

.app{position:relative;display:grid;gap:14px;padding:14px;min-height:100vh;
  grid-template-columns:250px minmax(0,1fr) 340px;
  grid-template-rows:auto 1fr;
  grid-template-areas:"side top top" "side main right"}
.side{grid-area:side;display:flex;flex-direction:column;gap:14px}
.top{grid-area:top}
.main{grid-area:main;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(260px,1fr) auto auto;align-content:start}
.right{grid-area:right;display:flex;flex-direction:column;gap:14px}
.hero{grid-column:1/-1}
.guests{grid-column:1/-1}

.panel{position:relative;background:var(--panel);border:1px solid rgba(25,217,255,.24);border-radius:6px;padding:12px 14px;
  box-shadow:inset 0 0 28px rgba(25,217,255,.05),0 0 18px rgba(0,140,255,.08);backdrop-filter:blur(6px)}
.panel::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:6px;
  background:
   linear-gradient(var(--cy),var(--cy)) top left/14px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) top left/2px 14px no-repeat,
   linear-gradient(var(--cy),var(--cy)) top right/14px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) top right/2px 14px no-repeat,
   linear-gradient(var(--cy),var(--cy)) bottom left/14px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) bottom left/2px 14px no-repeat,
   linear-gradient(var(--cy),var(--cy)) bottom right/14px 2px no-repeat,linear-gradient(var(--cy),var(--cy)) bottom right/2px 14px no-repeat;
  filter:drop-shadow(0 0 3px var(--cy));opacity:.85}
h3{font:700 .72rem 'Orbitron','Segoe UI',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--cy);margin-bottom:10px;display:flex;gap:8px;align-items:center}
h3 em{margin-left:auto;font-style:normal;font-size:.6rem;color:var(--mut);letter-spacing:.1em}
em.live{color:var(--ok);border:1px solid rgba(0,255,163,.4);padding:1px 6px;border-radius:9px}
em.demo{color:var(--warn);border:1px solid rgba(255,179,0,.5);padding:1px 6px;border-radius:9px}

/* Seitenleiste */
.brand{display:flex;gap:12px;align-items:center}
.brand b{font:900 1.15rem 'Orbitron','Segoe UI',sans-serif;letter-spacing:.2em;color:#fff;display:block}
.brand small{font-size:.6rem;letter-spacing:.22em;color:var(--mut)}
.logo{width:44px;height:44px;border-radius:50%;border:2px solid var(--cy);display:grid;place-items:center;box-shadow:0 0 14px var(--dim);animation:spin 14s linear infinite;border-top-color:transparent}
.logo i{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff,var(--cy));box-shadow:0 0 14px var(--cy)}
@keyframes spin{to{transform:rotate(360deg)}}
.links{flex:1;overflow-x:hidden;overflow-y:auto}
/* Scrollbalken im HUD-Stil: schmal, dunkel, cyan */
*{scrollbar-width:thin;scrollbar-color:rgba(25,217,255,.35) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(25,217,255,.35);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--cy)}
html{color-scheme:dark}
.lg{margin-bottom:12px}
.lg h4{font:600 .62rem 'Orbitron',sans-serif;letter-spacing:.2em;color:var(--mut);margin:0 0 6px;text-transform:uppercase}
.lk{display:flex;align-items:center;gap:10px;padding:7px 9px;margin-bottom:5px;border:1px solid rgba(25,217,255,.15);border-radius:4px;background:rgba(25,217,255,.04);transition:.18s}
.lk:hover{border-color:var(--cy);background:rgba(25,217,255,.13);box-shadow:0 0 14px var(--dim)}
.lk svg{width:18px;height:18px;flex:none;stroke:var(--cy);fill:none;stroke-width:1.6}
.lk div{min-width:0;flex:1}
.lk b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk small{display:block;font-size:.68rem;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk .st{width:8px;height:8px;border-radius:50%;background:#456;flex:none}
.lk .st.on{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.lk .st.off{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.kv{display:flex;justify-content:space-between;font-size:.82rem;padding:3px 0;color:var(--mut)}
.kv b{color:var(--txt);font-weight:600}

/* Kopfzeile */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chip{display:flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid rgba(25,217,255,.3);border-radius:20px;background:var(--panel);font:700 .62rem 'Orbitron',sans-serif;letter-spacing:.2em}
.chip span{color:var(--mut)}
.chip b{color:var(--ok)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dot.bad{background:var(--bad);box-shadow:0 0 10px var(--bad)} .dot.warn{background:var(--warn);box-shadow:0 0 10px var(--warn)}
.clock{text-align:center}
.clock small{display:block;color:var(--mut);font-size:.82rem}
.clock b{font:700 1.7rem 'Orbitron',sans-serif;color:var(--cy2);text-shadow:0 0 16px var(--dim);letter-spacing:.12em}
.topr{min-width:200px;color:var(--mut);font-size:.8rem}

/* Hero */
.hero{padding:0;overflow:hidden;min-height:300px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-title{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.hero-title h1{font:900 clamp(2.2rem,5vw,4rem) 'Orbitron',sans-serif;letter-spacing:.35em;padding-left:.35em;color:#dff9ff;text-shadow:0 0 24px var(--cy2),0 0 60px rgba(0,160,255,.6)}
.hero-title p{font:500 .8rem 'Orbitron',sans-serif;letter-spacing:.5em;color:var(--cy);margin-top:4px}
.hero-title small{margin-top:10px;color:var(--mut)}

/* Energie */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tile{border:1px solid rgba(25,217,255,.16);background:rgba(25,217,255,.05);border-radius:4px;padding:8px 10px}
.tile small{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--mut);text-transform:uppercase}
.tile b{font:700 1.35rem 'Orbitron',sans-serif;color:var(--cy2);text-shadow:0 0 10px var(--dim)}
.tile b i{font-style:normal;font-size:.7rem;color:var(--mut);margin-left:3px}
.tile.gold b{color:var(--warn);text-shadow:0 0 10px rgba(255,179,0,.4)}
.tile.good b{color:var(--ok)} .tile.bad b{color:var(--bad)}
.bar{height:4px;background:rgba(25,217,255,.12);margin-top:6px;border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--ok));box-shadow:0 0 8px var(--cy)}

/* Gäste */
.gridg{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.g{padding:9px 11px;border:1px solid rgba(25,217,255,.18);border-radius:4px;background:rgba(25,217,255,.045)}
.g.off{opacity:.5;border-style:dashed}
a.g{display:block;transition:.18s;cursor:pointer}
a.g:hover{border-color:var(--cy);background:rgba(25,217,255,.13);box-shadow:0 0 14px var(--dim)}
a.g header small::after{content:" ↗"}
.g header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.g header b{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.g header small{font:600 .6rem 'Orbitron',sans-serif;letter-spacing:.14em;color:var(--cy);border:1px solid var(--dim);padding:1px 5px;border-radius:3px}
.g .st{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}
.g.off .st{background:#667;box-shadow:none}
.m{display:grid;grid-template-columns:34px 1fr 52px;gap:6px;align-items:center;font-size:.68rem;color:var(--mut);margin-top:3px}
.m .bar{margin:0}
.m span:last-child{text-align:right;color:var(--txt)}

/* Ringe */
.rings{display:flex;justify-content:space-around;gap:6px;flex-wrap:wrap}
.ring{position:relative;width:92px;height:92px}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:8}
.ring .bg{stroke:rgba(25,217,255,.12)}
.ring .fg{stroke:var(--cy);stroke-linecap:round;filter:drop-shadow(0 0 5px var(--cy));transition:stroke-dashoffset .8s}
.ring.crit b{color:var(--bad);text-shadow:0 0 10px var(--bad)}
.ring.crit{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 8px var(--bad))}}
.ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring b{font:700 1.05rem 'Orbitron',sans-serif;color:#fff}
.ring small{font-size:.62rem;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}

/* Nachrichten + Sprit */
ul{list-style:none;padding:0}
.news li a{display:block;padding:8px 9px;margin-bottom:6px;border:1px solid rgba(25,217,255,.16);border-left:3px solid var(--cy);border-radius:3px;background:rgba(25,217,255,.04);transition:.18s}
.news li a:hover{background:rgba(25,217,255,.13);border-color:var(--cy)}
.news li small{display:block;font-size:.62rem;letter-spacing:.14em;color:var(--cy);text-transform:uppercase}
.news li b{display:block;font-size:.92rem;font-weight:600;line-height:1.2;margin-top:2px}
.src{display:block;font-size:.65rem;color:var(--mut);margin-top:4px}
.ftabs b{font:700 .66rem 'Orbitron',sans-serif;letter-spacing:.2em;color:var(--warn)}
.ftabs{margin:8px 0 5px}
.fu{display:flex;align-items:center;gap:8px;padding:7px 9px;margin-bottom:5px;border:1px solid rgba(25,217,255,.16);border-radius:3px;background:rgba(25,217,255,.04)}
.fu.fav{border-color:rgba(255,179,0,.55);background:rgba(255,179,0,.07)}
.fu .rk{font:700 .8rem 'Orbitron',sans-serif;color:var(--mut);width:16px}
.fu .nm{flex:1;min-width:0}
.fu .nm b{display:block;font-size:.95rem;font-weight:700}
.fu .nm small{font-size:.66rem;color:var(--mut)}
.fu .pr{font:700 1.15rem 'Orbitron',sans-serif;color:var(--cy2);text-shadow:0 0 8px var(--dim)}
.fu.fav .pr{color:var(--warn);text-shadow:0 0 8px rgba(255,179,0,.4)}
.fu .pr sup{font-size:.6rem}
.wnow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.wico{font-size:2.8rem;line-height:1;color:var(--warn);text-shadow:0 0 16px rgba(255,179,0,.5);width:56px;text-align:center}
.wico.c{color:var(--cy2);text-shadow:0 0 16px var(--dim)}
.wt b{font:700 2rem 'Orbitron',sans-serif;color:#fff;text-shadow:0 0 14px var(--dim)}
.wt small{display:block;font-size:.8rem;color:var(--mut)}
.wmeta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}
.wmeta div{border:1px solid rgba(25,217,255,.16);background:rgba(25,217,255,.05);border-radius:3px;padding:5px 7px}
.wmeta small{display:block;font-size:.58rem;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.wmeta b{font-size:.9rem}
.wdays{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wdays li{text-align:center;border:1px solid rgba(25,217,255,.14);border-radius:3px;padding:6px 2px;background:rgba(25,217,255,.04)}
.wdays small{display:block;font:600 .6rem 'Orbitron',sans-serif;letter-spacing:.12em;color:var(--cy)}
.wdays i{display:block;font-style:normal;font-size:1.3rem;color:var(--cy2);margin:2px 0}
.wdays b{font-size:.82rem}.wdays b span{color:var(--mut);font-weight:500}
.empty{color:var(--mut);font-size:.8rem;padding:6px 0}

@media (max-width:1250px){
  .app{grid-template-columns:230px minmax(0,1fr);grid-template-areas:"side top" "side main" "right right"}
  .right{flex-direction:row}.right>*{flex:1}
}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "right" "side"}
  .main{grid-template-columns:minmax(0,1fr)} .right{flex-direction:column}
  .topr{display:none}
}
@media (prefers-reduced-motion:reduce){.logo{animation:none}}

/* ===== Kompakt: alles auf einen Bildschirm (ab breiten Fenstern) ===== */
@media (min-width:1251px){
  html,body{height:100%;overflow:hidden}
  .app{height:100vh;min-height:0;overflow:hidden;gap:10px;padding:10px;grid-template-rows:auto minmax(0,1fr)}
  .side,.right,.main{min-height:0}
  .side{gap:10px}.right{gap:10px;overflow:hidden}
  .main{gap:10px;grid-template-rows:minmax(110px,1fr) auto auto;height:100%}
  .panel{padding:9px 12px}
  h3{margin-bottom:7px}
  .hero{min-height:0}
  .brand{padding:8px 12px}
  .links{padding:9px 10px;min-height:0}
  .lg{margin-bottom:7px}.lk{padding:5px 8px;margin-bottom:4px}
  .sysmini{padding:8px 12px}
  .kv{padding:1px 0}
  .gridg{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px}
  .g{padding:6px 9px}.g header{margin-bottom:3px}
  .m{margin-top:1px}
  .tile{padding:5px 9px}.tile b{font-size:1.15rem}
  .ring{width:78px;height:78px}.ring b{font-size:.95rem}
  .news li a{padding:5px 8px;margin-bottom:4px}
  .news li b{font-size:.84rem;line-height:1.15}
  .news li small{font-size:.58rem}
  .fu{padding:4px 8px;margin-bottom:3px}
  .fu .nm b{font-size:.85rem}.fu .pr{font-size:1rem}
  .ftabs{margin:5px 0 3px}
  .wmeta{margin:6px 0}.wico{font-size:2.2rem}.wt b{font-size:1.6rem}
  .wdays li{padding:4px 2px}
  .src{margin-top:2px}
  .clock b{font-size:1.45rem}
}
@media (min-width:1251px) and (max-height:960px){
  .m:nth-of-type(3){display:none}           /* Platte ausblenden */
  .news li small{display:none}
  .lk small{display:none}
  .hero-title h1{font-size:2.6rem}
}

/* Niedrige Fenster: E5 und E10 nebeneinander */
@media (min-width:1251px) and (max-height:960px){
  .fuel{display:grid;grid-template-columns:1fr 1fr;column-gap:8px}
  .fuel>h3,.fuel>.src{grid-column:1/-1}
  .fuel>.ftabs:nth-of-type(1){grid-area:2/1}
  .fuel>ul:nth-of-type(1){grid-area:3/1}
  .fuel>.ftabs:nth-of-type(2){grid-area:2/2}
  .fuel>ul:nth-of-type(2){grid-area:3/2}
  .fuel .fu{padding:4px 6px;gap:5px}
  .fu .nm small{font-size:.6rem}
  .fu .pr{font-size:.9rem}
}

/* ===== Login & Benutzerbox ===== */
.loginpage{display:grid;place-items:center;min-height:100vh;overflow:auto}
.login{width:min(380px,92vw);text-align:center;padding:28px 26px}
.login h1{font:900 1.6rem 'Orbitron',sans-serif;letter-spacing:.3em;padding-left:.3em;color:#fff;text-shadow:0 0 18px var(--cy2);margin-top:14px}
.login .sub{font-size:.62rem;letter-spacing:.3em;color:var(--mut);margin:4px 0 22px}
.logo.big{width:70px;height:70px;margin:0 auto}.logo.big i{width:24px;height:24px}
.login label{display:block;text-align:left;font:600 .62rem 'Orbitron',sans-serif;letter-spacing:.18em;color:var(--cy);text-transform:uppercase;margin-bottom:14px}
.login input{display:block;width:100%;margin-top:6px;padding:10px 12px;background:rgba(2,10,24,.8);border:1px solid rgba(25,217,255,.3);border-radius:3px;color:#fff;font:500 1rem 'Rajdhani',sans-serif;letter-spacing:.05em}
.login input:focus{outline:none;border-color:var(--cy);box-shadow:0 0 12px var(--dim)}
.login button{width:100%;padding:11px;margin-top:4px;background:rgba(25,217,255,.14);border:1px solid var(--cy);border-radius:3px;color:#fff;font:700 .75rem 'Orbitron',sans-serif;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;transition:.18s}
.login button:hover:not(:disabled){background:rgba(25,217,255,.28);box-shadow:0 0 16px var(--dim)}
.login button:disabled{opacity:.5;cursor:wait}
.login .err{min-height:1.2em;margin-top:12px;color:var(--bad);font-size:.9rem}
.userbox{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.userbox span{font-size:.78rem;color:var(--mut)}
.userbox b{color:var(--txt);font-weight:600}
.userbox em{font-style:normal;font:600 .55rem 'Orbitron',sans-serif;letter-spacing:.14em;color:var(--cy);border:1px solid var(--dim);padding:1px 5px;border-radius:3px;margin-left:4px}
.userbox button{background:transparent;border:1px solid rgba(25,217,255,.3);border-radius:3px;color:var(--cy);font:600 .6rem 'Orbitron',sans-serif;letter-spacing:.16em;padding:4px 9px;cursor:pointer}
.userbox button:hover{border-color:var(--cy);box-shadow:0 0 10px var(--dim)}
/* Rolle "viewer": nichts anklickbar */
body.ro a{pointer-events:none;cursor:default}

/* ===== Benutzerverwaltung ===== */
.adminpage{overflow:auto;height:auto}
.adminwrap{position:relative;max-width:860px;margin:0 auto;padding:22px 16px;display:grid;gap:16px}
.adminhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.adminhead h1{font:900 1.2rem 'Orbitron',sans-serif;letter-spacing:.25em;color:#fff;text-shadow:0 0 16px var(--cy2)}
.back{color:var(--cy);font-size:.9rem}.back:hover{text-shadow:0 0 10px var(--cy)}
.utable{width:100%;border-collapse:collapse}
.utable th{font:600 .6rem 'Orbitron',sans-serif;letter-spacing:.16em;color:var(--mut);text-align:left;padding:4px 6px;text-transform:uppercase}
.utable td{padding:6px;border-top:1px solid rgba(25,217,255,.12);vertical-align:middle}
.utable em{font-style:normal;font:600 .55rem 'Orbitron',sans-serif;color:var(--ok);border:1px solid rgba(0,255,163,.4);padding:1px 5px;border-radius:9px;margin-left:6px}
.adminpage input,.adminpage select{width:100%;padding:7px 9px;background:rgba(2,10,24,.8);border:1px solid rgba(25,217,255,.3);border-radius:3px;color:#fff;font:500 .95rem 'Rajdhani',sans-serif}
.adminpage input:focus,.adminpage select:focus{outline:none;border-color:var(--cy);box-shadow:0 0 10px var(--dim)}
.adminpage select:disabled{opacity:.5}
.adminpage button{padding:7px 12px;background:rgba(25,217,255,.12);border:1px solid var(--cy);border-radius:3px;color:#fff;font:700 .62rem 'Orbitron',sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.18s}
.adminpage button:hover{background:rgba(25,217,255,.26);box-shadow:0 0 12px var(--dim)}
.adminpage button.del{border-color:var(--bad);margin-left:6px}.adminpage button.del:hover{background:rgba(255,77,106,.22);box-shadow:0 0 12px rgba(255,77,106,.4)}
.acts{white-space:nowrap}
.nform{display:grid;grid-template-columns:1fr 1fr 140px auto;gap:10px;align-items:end}
.nform label{font:600 .6rem 'Orbitron',sans-serif;letter-spacing:.16em;color:var(--cy);text-transform:uppercase}
.nform label input,.nform label select{margin-top:5px}
.hint{margin-top:10px;font-size:.8rem;color:var(--mut)}.hint b{color:var(--txt)}
.msg{min-height:1.2em;margin-bottom:6px;font-size:.9rem}.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
@media (max-width:720px){
  .nform{grid-template-columns:1fr}
  .utable thead{display:none}.utable tr{display:grid;gap:6px;padding:8px 0;border-top:1px solid rgba(25,217,255,.12)}.utable td{border:0;padding:0}
}
.userbox a.adm{color:var(--cy);font:600 .6rem 'Orbitron',sans-serif;letter-spacing:.16em;border:1px solid rgba(25,217,255,.3);border-radius:3px;padding:4px 9px;text-transform:uppercase}
.userbox a.adm:hover{border-color:var(--cy);box-shadow:0 0 10px var(--dim)}