*{box-sizing:border-box}html,body{margin:0;background:#111;color:#eee;font:15px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;color:#222}
.logo{color:#c00;font-size:20px}.name{letter-spacing:.08em;font-size:13px}nav{margin-left:auto;display:flex;gap:16px}nav a{color:#444;text-decoration:none;font-size:13px}
#buehne{position:relative;background:#000}#bild{display:block;width:100%;height:auto;min-height:200px;max-height:80vh;object-fit:contain;background:#000}
#info{position:absolute;left:10px;top:8px;text-shadow:0 1px 3px #000}#titel{font-weight:600}#zeit{font-size:13px;opacity:.9}
#temp{position:absolute;right:10px;top:8px;text-align:right;text-shadow:0 1px 3px #000;font-size:14px}
#steuerung{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;align-items:center}
#steuerung button,#steuerung input{background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:4px;padding:5px 9px;font:inherit;cursor:pointer}
#live.aktiv{background:#c00;border-color:#c00}
#leiste{display:flex;overflow-x:auto;gap:2px;padding:4px;background:#1b1b1b;scroll-behavior:smooth}
#leiste img{height:54px;width:auto;opacity:.6;cursor:pointer;border:2px solid transparent;flex:0 0 auto}
#leiste img.aktiv{opacity:1;border-color:#c00}#leiste img:hover{opacity:1}
#kurve{padding:8px 16px 16px}#svg{width:100%;height:180px;background:#181818;border-radius:4px}
.legende{display:flex;gap:16px;font-size:13px;margin-top:6px}.g{color:#4fc3f7}.t{color:#ffb74d}
.text{max-width:760px;margin:0 auto;padding:24px 16px}.text a{color:#4fc3f7}
@media (max-width:600px){#steuerung{position:static;justify-content:center;padding:6px;background:#000}#temp{font-size:12px}}