*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#f7f7f7;background:#080808}body{background-size:cover;background-attachment:fixed}.app{min-height:100vh}.topbar{height:58px;background:linear-gradient(180deg,#163f83,#03132d);border-bottom:2px solid #7fa7dc;display:flex;align-items:center;justify-content:space-between;padding:0 22px;box-shadow:0 2px 12px #000}.brand-mini{font-weight:900;letter-spacing:1px}.brand-mini img{height:40px;max-width:220px;object-fit:contain}.top-actions{display:flex;gap:12px;align-items:center}.top-actions a,.top-actions span{color:#fff;text-decoration:none;font-size:14px}.layout{max-width:1450px;margin:18px auto;padding:0 14px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}.panel{background:rgba(0,0,0,.86);border:1px solid #687991;border-radius:6px;box-shadow:0 8px 30px rgba(0,0,0,.45);overflow:hidden}.panel-title{padding:11px 14px;background:linear-gradient(#184b93,#09204a);font-weight:800;border-bottom:1px solid #6d8db5}.messages{height:calc(100vh - 235px);min-height:430px;overflow:auto;padding:12px}.chat-message{display:flex;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.08)}.avatar,.uavatar{width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#1b2431;flex:0 0 auto}.avatar img,.uavatar img{width:100%;height:100%;object-fit:cover}.meta{font-size:12px;color:#a9c9f5}.meta strong{color:var(--primary)}.meta span{opacity:.8}.meta small{margin-left:6px;color:#777}.text{font-size:15px;white-space:pre-wrap;word-break:break-word;margin-top:3px}.composer{padding:10px;background:#050505;border-top:1px solid #333}.compose-row{display:flex;gap:8px}.compose-row input{flex:1}.smiley-bar{display:flex;gap:12px;overflow:auto;padding-bottom:8px}.smiley-cat{display:flex;align-items:center;gap:5px;white-space:nowrap}.smiley-cat>span{font-size:11px;color:#bbb}.smiley-cat button{width:34px;height:34px;border:1px solid #444;background:#121212;border-radius:5px;cursor:pointer}.smiley-cat img{max-width:25px;max-height:25px}.sidebar{display:flex;flex-direction:column;gap:18px}.stream-card{padding-bottom:12px}.onair-box{display:flex;gap:12px;align-items:center;padding:15px}.onair-box img{width:68px;height:68px;border-radius:8px;object-fit:cover;border:2px solid var(--primary)}audio{width:calc(100% - 24px);margin:0 12px}.now-title{margin:10px 12px;padding:8px;background:#111;border-radius:4px;font-size:13px}.user-list{padding:8px;max-height:390px;overflow:auto}.user-row{display:flex;align-items:center;gap:7px;padding:6px;border-bottom:1px solid #161616}.user-row strong{font-size:14px}.user-row em{margin-left:auto;font-style:normal}.dot{width:8px;height:8px;border-radius:50%;background:#32d26b}.dice-panel{padding-bottom:12px}.dice-panel .btn,.dice-panel #diceResult{margin:12px}.btn{display:inline-block;border:1px solid var(--primary);background:#0a0a0a;color:#fff;padding:9px 14px;border-radius:3px;text-decoration:none;cursor:pointer}.btn.primary{background:linear-gradient(#d51c18,#720000);border-color:#ff9d00}.btn.wide{display:block;text-align:center;width:calc(100% - 24px)}input,select{width:100%;padding:9px;background:#fff;color:#111;border:1px solid #777;border-radius:2px}label{display:block;margin:10px 0;color:#ddd;font-weight:bold;font-size:13px}label input,label select{margin-top:5px}.login-page{min-height:100vh;display:grid;place-items:center;background-color:#200}.login-card{width:min(440px,94vw);padding:28px;background:rgba(0,0,0,.78);border:2px solid #d99316;border-radius:8px;box-shadow:0 10px 50px #000;text-align:center}.brand{font-size:34px;font-weight:900;color:#ffbd36;text-shadow:0 2px 5px #000;letter-spacing:2px}.subtitle{margin:7px 0 20px;color:#ddd}.login-logo{max-width:320px;max-height:150px;object-fit:contain}.button-row{display:flex;gap:8px;margin:14px 0}.button-row>*{flex:1}.small-link{display:block;color:#ffc04a;margin-top:16px}.error,.success{padding:10px;margin:10px 0;border-radius:4px}.error{background:#5e1010;border:1px solid #b33}.success{background:#104e25;border:1px solid #3b9}.admin{background:#101010}.admin-grid{max-width:1500px;margin:18px auto;padding:0 14px;display:grid;grid-template-columns:1fr 1.4fr;gap:18px}.admin .panel{padding-bottom:14px}.admin .panel-title{margin-bottom:12px}.admin form:not(.inline){padding:0 14px}.hint{font-size:12px;color:#aaa;padding:0 14px}.table-wrap{overflow:auto;padding:0 10px}.admin table{width:100%;border-collapse:collapse;min-width:650px}.admin th,.admin td{text-align:left;padding:8px;border-bottom:1px solid #292929;font-size:13px}.admin th{color:#a9c9f5}.inline{display:inline-flex;gap:5px;align-items:center}.inline select{width:auto;padding:5px}.tiny{padding:5px 8px;background:#1a1a1a;color:#fff;border:1px solid #555;border-radius:3px;cursor:pointer}.danger{border-color:#b33;color:#ff9b9b}.admin-list{list-style:none;padding:0 14px}.admin-list li{display:flex;justify-content:space-between;padding:8px;border-bottom:1px solid #222}@media(max-width:900px){.layout,.admin-grid{grid-template-columns:1fr}.sidebar{order:-1}.messages{height:55vh}.topbar{padding:0 10px}.top-actions span{display:none}}
transform: translateY(-50%);
}

/* Auf Smartphones das Logo anpassen */
@media (max-width: 600px) {
    .topbar {
        min-height: 80px;
        padding: 10px;
    }

    .brand-mini img {
        max-width: 480px;
        max-height: 140px;
    }

    .top-actions {
        position: static;
        transform: none;
        margin-top: 20px;
    }
}