/* RH – Imperial Horizon: Grundlayout, Dark Corporate Luxury */
:root{
  --bg:#0b0c0f; --bg2:#12141a; --panel:#161921; --line:#262a35; --txt:#e7e4dc; --mute:#8d909b;
  --gold:#c9a24b; --gold2:#f0d58c; --up:#5fbf8f; --down:#e0685c; --warn:#e3b04b;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:Inter,system-ui,'Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(1200px 600px at 20% -10%,#1b1e28 0,var(--bg) 60%);color:var(--txt);font:14px/1.45 var(--sans);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:.02em}
h2{font-size:22px} h3{font-size:17px;color:var(--gold2);margin-bottom:8px}
small{color:var(--mute);font-size:12px}
b{font-weight:600}
button{font:inherit;color:inherit;cursor:pointer}
input{font:inherit;color:var(--txt);background:#0e1015;border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%}
input:focus{outline:1px solid var(--gold);border-color:var(--gold)}
.up{color:var(--up)} .down{color:var(--down)} .warn{color:var(--warn)}
.scroll{overflow:auto}
::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:#2a2f3c;border-radius:6px}

/* Kopfleiste */
#topbar{display:flex;align-items:center;gap:22px;padding:10px 18px;border-bottom:1px solid var(--line);background:linear-gradient(#12141a,#0d0f14);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;margin-right:6px}
.logo{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--gold);color:var(--gold2);font-family:var(--serif);font-size:20px;font-weight:700;border-radius:4px}
.bt{font-family:var(--serif);font-size:18px;line-height:1.05;display:flex;flex-direction:column}
.bt small{font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.kpi{display:flex;flex-direction:column;min-width:96px}
.kpi label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.kpi b{font-size:16px;font-variant-numeric:tabular-nums}
.kpi.wide{min-width:240px;flex:1;max-width:340px}
.bar{height:7px;background:#20242e;border-radius:4px;overflow:hidden;margin:4px 0 2px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#8a6a2a,var(--gold2))}
.alert{background:#5a1c18;color:#ffb4ab;border:1px solid var(--down);padding:5px 10px;border-radius:4px;font-weight:600;letter-spacing:.08em;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.55}}
.speed{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.sp{background:#1a1d26;border:1px solid var(--line);border-radius:5px;padding:5px 10px}
.sp.on{background:var(--gold);color:#17120a;border-color:var(--gold);font-weight:600}

/* Hauptbereich */
#main{display:grid;grid-template-columns:330px minmax(380px,1fr) 400px;gap:12px;padding:12px;min-height:0}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:10px;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#detail{padding:16px 18px;overflow:auto;display:block}
#side{background:var(--panel)}
#panel{overflow:auto;padding:10px;flex:1}

/* Ticker */
#ticker{border-top:1px solid var(--line);background:#0d0f14;overflow:hidden;white-space:nowrap;height:34px;display:flex;align-items:center}
.tk-run{display:inline-block;padding-left:100%;animation:run 70s linear infinite}
.tk{color:var(--txt)} .tk.good{color:var(--up)} .tk.bad{color:var(--down)}
#ticker i{color:var(--gold);margin:0 16px;font-style:normal;font-size:9px}
@keyframes run{to{transform:translateX(-100%)}}

@media(max-width:1180px){
  body{overflow:auto;display:block}
  #main{grid-template-columns:1fr;}
  #market{max-height:420px}
  #side{min-height:520px}
}