:root{
  --bg:#070b10;--panel:#0d141c;--panel2:#111b26;--line:#1c2a38;--ink:#e8eff6;--dim:#9fb0c2;
  --cyan:#34d3ee;--amber:#f5a623;--green:#2fd27a;--red:#ff5d5d;--violet:#b48cff;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:dark}
*{box-sizing:border-box}
html{font-size:var(--fs,18px)}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:0.875rem/1.5 var(--sans);display:flex;flex-direction:column;overflow:hidden}
button,select,input{font:inherit;color:inherit}
button{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer}
button:hover{border-color:#2f4a63}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
button.on{background:#10394a;border-color:var(--cyan);color:#fff}
.dim{color:var(--dim)}.small{font-size:0.75rem}.num{text-align:right;font-family:var(--mono)}
a{color:#8fd3ff;text-decoration:none}a:hover{text-decoration:underline}
code{font-family:var(--mono);background:#0a1118;padding:1px 5px;border-radius:4px}

.top{display:flex;align-items:center;gap:12px;padding:6px 12px;background:linear-gradient(#0f1a25,#0b131b);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font:600 0.9375rem var(--mono);letter-spacing:.14em;color:#fff}.logo{color:var(--cyan)}
.views{display:flex;gap:4px}
.top button{padding:4px 10px;font-size:0.8rem}.top .clocks{gap:10px}
.clocks{display:flex;gap:14px;margin-left:auto;font-family:var(--mono)}
.clocks span{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.clocks i{font-style:normal;font-size:0.6875rem;color:var(--dim);letter-spacing:.1em}.clocks b{font-size:0.9375rem;font-weight:600}
.ctl{display:flex;align-items:center;gap:8px}
.live{display:flex;align-items:center;gap:7px;font:0.75rem var(--mono);color:var(--dim)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.live.ok .dot{background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 2s infinite}
.live.warn .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.live.err .dot{background:var(--red);box-shadow:0 0 8px var(--red)}
@keyframes pulse{50%{opacity:.35}}

.ticker{height:2.1rem;background:#090f15;border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;position:relative}
.track{display:inline-block;padding-left:100%;animation:scroll 240s linear infinite;line-height:2.1rem;font:0.75rem var(--mono);color:#a8bacb}
.track span,.track a{margin-right:42px;color:inherit}.track a:hover{color:#fff;text-decoration:underline}.track em{font-style:normal;color:var(--cyan);margin-right:6px}
@keyframes scroll{to{transform:translateX(-100%)}}
.ticker:hover .track{animation-play-state:paused}

main{flex:1;min-height:0;position:relative}
.view{display:none;position:absolute;inset:0}.view.on{display:grid}
#v-war{grid-template-columns:310px minmax(0,1fr) 380px;gap:10px;padding:10px}
.col{display:flex;flex-direction:column;gap:10px;min-height:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:0}
.panel.grow{flex:1;display:flex;flex-direction:column;overflow:hidden}
.panel h3{margin:0 0 8px;font:600 0.6875rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9fb2c4;display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{font:600 0.6875rem var(--mono);padding:2px 8px;border-radius:10px;background:#1b2836;color:var(--dim);letter-spacing:.04em}
.badge.risk_on{background:#0f3a26;color:var(--green)}.badge.neutral{background:#33301a;color:var(--amber)}.badge.risk_off{background:#401a1a;color:var(--red)}

.mk-list{overflow:auto;flex:1}
.mk{display:grid;grid-template-columns:54px 1fr 64px;gap:2px 8px;padding:6px 2px;border-bottom:1px solid #15212d;align-items:center}
.mk .sym{font:600 0.8125rem var(--mono)}.mk .nm{color:var(--dim);font-size:0.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk .px{font:0.8125rem var(--mono);text-align:right}.mk .ch{font:0.75rem var(--mono);text-align:right}
.mk svg{width:100%;height:20px;grid-column:2}.mk .chip{grid-column:3;justify-self:end}
.up{color:var(--green)}.down{color:var(--red)}.flat{color:var(--dim)}
.chip{font:600 0.6875rem var(--mono);padding:1px 6px;border-radius:9px;background:#1b2836;color:var(--dim)}
.chip.konstruktiv{background:#0f3a26;color:var(--green)}.chip.defensiv{background:#401a1a;color:var(--red)}

.mapwrap{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;min-height:300px;background:#05080c}
#map{position:absolute;inset:0}
.map-missing[hidden]{display:none}
.map-missing{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2em;color:var(--amber)}
.maptools{position:absolute;left:10px;top:10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:rgba(9,15,21,.86);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:0.75rem;max-width:calc(100% - 120px)}
.maptools label{display:flex;align-items:center;gap:5px;cursor:pointer}
.maptools select{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:2px 4px}
.sw{width:10px;height:10px;border-radius:50%;display:inline-block}
.sw[data-c=amber]{background:var(--amber)}.sw[data-c=red]{background:var(--red)}.sw[data-c=violet]{background:var(--violet)}
.maplibregl-popup-content{background:#0d141c;color:var(--ink);border:1px solid var(--line);border-radius:8px;font:0.8125rem var(--sans);max-width:280px}
.maplibregl-popup-tip{display:none}

.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.kpi b{display:block;font:600 1.5rem var(--mono);color:#fff}.kpi span{font-size:0.6875rem;color:var(--dim)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}.tabs button{padding:3px 9px;font-size:0.75rem}
#feed-search{width:100%;background:#0a1118;border:1px solid var(--line);border-radius:6px;padding:6px 9px;margin-bottom:8px}
.feed{overflow:auto;flex:1}
.item{padding:7px 2px;border-bottom:1px solid #15212d}
.item a{color:var(--ink);font-size:0.8125rem}.item .meta{font:0.6875rem var(--mono);color:var(--dim);margin-top:2px}
.item .cat{color:var(--cyan)}

.wide{position:absolute;inset:0;padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.macro{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.tile{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.tile .t{font-size:0.6875rem;color:var(--dim)}.tile .v{font:600 1.25rem var(--mono)}.tile svg{width:100%;height:26px}
.scroll{overflow:auto;max-height:46vh}
table.grid{width:100%;border-collapse:collapse;font-size:0.8125rem}
.grid th{position:sticky;top:0;background:var(--panel);text-align:left;font:600 0.6875rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding:6px 8px;border-bottom:1px solid var(--line)}
.grid td{padding:6px 8px;border-bottom:1px solid #15212d;vertical-align:middle}
.grid tbody tr{cursor:pointer}.grid tbody tr:hover{background:#101a24}
.bar{display:inline-block;vertical-align:middle;position:relative;width:120px;height:8px;background:#16222e;border-radius:4px}
.bar i{position:absolute;top:0;bottom:0;border-radius:4px}
.bar::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:#3a5066}
.detail{padding:10px 4px 2px}
.comp{display:inline-block;margin:2px 10px 2px 0;font-family:var(--mono)}
#report-frame{flex:1;min-height:60vh;border:1px solid var(--line);border-radius:8px;background:#fff}
.mlrow{padding:6px 0;border-bottom:1px solid #15212d;font-size:0.8125rem}

body.tv .top .views,body.tv #btn-refresh{display:none}
body.tv #v-war{grid-template-columns:260px minmax(0,1fr) 330px}
@media(max-width:1100px){
  body{overflow:auto}main{min-height:calc(100vh - 100px)}
  #v-war{grid-template-columns:1fr;position:static;display:none}#v-war.on{display:grid}
  .view{position:static}.wide{position:static}
  .mapwrap{height:60vh}.mk-list{max-height:40vh}.feed{max-height:50vh}
  .clocks{display:none}
}
@media(prefers-reduced-motion:reduce){.track{animation:none}.live.ok .dot{animation:none}}

/* --- v2.1: Login, Live-Leiste, Konto, Verwaltung --- */
.clocks .main b{font-size:1.375rem;color:var(--cyan);font-variant-numeric:tabular-nums}
.clocks .main i{letter-spacing:.06em}
.clocks b{font-variant-numeric:tabular-nums}
.alert{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:0.8125rem;border-left:4px solid var(--cyan);background:#101b27;border-bottom:1px solid #15212d}
.alert.event{border-left-color:var(--amber)}.alert.hot{border-left-color:var(--red);background:#1b1116}
.alert .tag{font:600 0.6875rem var(--mono);letter-spacing:.1em;color:var(--cyan);min-width:58px}.alert.event .tag{color:var(--amber)}.alert.hot .tag{color:var(--red)}
.alert .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.alert a{color:var(--ink)}
.alert .when{font:0.6875rem var(--mono);color:var(--dim)}.alert .x{background:none;border:0;color:var(--dim);padding:0 4px;cursor:pointer}
@keyframes slidein{from{transform:translateY(-100%);opacity:0;background:#1e3a4f}to{transform:none;opacity:1}}
.wide.narrow{max-width:960px}
.form label{display:block;margin:8px 0;font-size:0.8125rem;color:#b7c5d3}
.form input:not([type=checkbox]),.form select{display:block;width:100%;margin-top:4px;background:#0a1118;border:1px solid var(--line);border-radius:6px;padding:7px 9px;color:var(--ink)}
.form .row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}.form .row label{flex:1;min-width:160px}
.form fieldset{border:1px solid var(--line);border-radius:6px;padding:6px 10px;margin:8px 0}.form legend{font-size:0.75rem;color:var(--dim)}
.form label.inline{display:inline-flex;gap:6px;align-items:center;margin:4px 14px 4px 0}
button.primary{background:#10394a;border-color:var(--cyan)}
.msg{font-size:0.8125rem;color:var(--amber);min-height:1.2em}.msg.ok{color:var(--green)}
.invite{background:#0f2a1c;border:1px solid #1f5a3a;border-radius:8px;padding:10px 12px;margin:8px 0;font-size:0.8125rem}
.invite code{font-size:0.9375rem;color:#fff;letter-spacing:.06em}
body.auth{display:grid;place-items:center;min-height:100vh;overflow:auto}
.authbox{width:min(420px,92vw);display:flex;flex-direction:column;gap:14px}
.authbox .brand{text-align:center;font-size:1.125rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.card h2{margin:0 0 10px;font-size:1rem}
.card label{display:block;margin:10px 0;font-size:0.8125rem;color:#b7c5d3}
.card input{display:block;width:100%;margin-top:4px;background:#0a1118;border:1px solid var(--line);border-radius:6px;padding:8px 10px;color:var(--ink);font-size:0.875rem}
.card button.primary{width:100%;margin-top:8px;padding:9px}
.center{text-align:center}

/* --- Analyse --- */
#v-analyse{grid-template-columns:320px minmax(0,1fr);gap:10px;padding:10px}
#an-q{width:100%;background:#0a1118;border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:8px}
.results{overflow:auto;max-height:40vh}
.hit{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 6px;border-bottom:1px solid #15212d;cursor:pointer;border-radius:4px}
.hit:hover,.hit.on{background:#101b27}.hit b{font:600 0.8125rem var(--mono)}.hit .nm{grid-column:1/-1;font-size:0.75rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hit .typ{font:0.6875rem var(--mono);color:var(--cyan);letter-spacing:.08em;text-transform:uppercase}
.hit .rm{background:none;border:0;color:var(--dim);cursor:pointer;padding:0 4px}.hit .rm:hover{color:var(--red)}
.chartwrap{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px;min-height:0;position:relative}
.charthead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.charthead .title b{font-size:1.0625rem}.charthead .quote b{font:600 1.375rem var(--mono)}.chg{font:0.875rem var(--mono)}
.charttools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.seg button{border:0;border-radius:0;padding:4px 10px;font-size:0.75rem;background:var(--panel2)}.seg button.on{background:#10394a;color:#fff}
button.small{padding:4px 10px;font-size:0.75rem}
.charttools label.inline{display:inline-flex;gap:5px;align-items:center;color:var(--dim)}
.chart{flex:1;min-height:360px;position:relative}
.readout{font-family:var(--mono);padding:6px 2px 0;min-height:1.4em}
.stats-row{display:flex;gap:16px;flex-wrap:wrap;padding-top:6px;font-size:0.75rem;color:var(--dim)}.stats-row b{color:var(--ink);font-family:var(--mono)}
.compare{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:0.75rem;margin-bottom:6px}
.compare .tag{display:inline-flex;gap:6px;align-items:center;padding:2px 8px;border-radius:10px;background:#1b2836}
.compare .tag i{width:10px;height:10px;border-radius:50%;display:inline-block}
.compare input{background:#0a1118;border:1px solid var(--line);border-radius:6px;padding:3px 8px;width:220px}
@media(max-width:1100px){#v-analyse{grid-template-columns:1fr}.chart{min-height:300px}}

/* --- Begruessung, Termine, Depot, Unter-Tabs --- */
.welcome{position:fixed;inset:0;background:rgba(5,8,12,.78);display:grid;place-items:center;z-index:50;backdrop-filter:blur(2px)}
.welcome[hidden]{display:none}
.wc-card{width:min(640px,94vw);background:var(--panel);border:1px solid #2a4a63;border-radius:12px;padding:22px 26px;box-shadow:0 20px 60px #000a}
.wc-card h2{margin:0 0 4px;font-size:1.375rem}.wc-card .wc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:14px 0}
.wc-item{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.wc-item .l{font-size:0.6875rem;color:var(--dim)}.wc-item .v{font:600 1rem var(--mono)}.wc-item .p{font:0.75rem var(--mono)}
.wc-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cal{font-size:0.75rem;max-height:180px;overflow:auto}
.cal .ev{display:grid;grid-template-columns:52px 1fr;gap:6px;padding:4px 0;border-bottom:1px solid #15212d}
.cal .d{font-family:var(--mono);color:var(--dim)}.cal .imp3{color:#fff;font-weight:600}.cal .imp3 .d{color:var(--amber)}
.tabs.subtabs{margin:10px 0 6px;border-top:1px solid var(--line);padding-top:8px}
.subpanel{max-height:34vh;overflow:auto}
.small-feed .item a{font-size:0.7812rem}
.kpis4{grid-template-columns:repeat(4,1fr)}.kpi .sub{display:block;font:0.6875rem var(--mono);color:var(--dim)}
.scroll.tall{max-height:52vh}
.grid td.num{font-family:var(--mono)}
.hit .px{font:0.75rem var(--mono);text-align:right}.hit .px .pc{margin-left:6px}
.wl-row{display:grid;grid-template-columns:1fr auto auto;gap:4px 8px;align-items:center}
.alert.alarm{border-left-color:var(--green);background:#0f2a1c}.alert.alarm .tag{color:var(--green)}
.fund{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;font-size:0.75rem}
.fund .tile .v{font-size:1rem}
.marker-note{font-size:0.6875rem;color:var(--dim)}
@media(max-width:1100px){.kpis4{grid-template-columns:repeat(2,1fr)}}
/* Formulare in einer Zeile; Panels in scrollenden Ansichten nicht zusammendruecken */
.form.row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}.form.row label{flex:1;min-width:150px;margin:4px 0}.form.row label.inline{flex:0 0 auto}
.form.row button{margin-bottom:4px}
.wide > .panel,.wide > .kpis{flex-shrink:0}
.wide .scroll.tall{max-height:none}

.srcs{color:var(--dim)}.srcs.multi{color:#c7d6e4}.srcs.multi::before{content:"✓ ";color:var(--green)}

/* Eilmeldungsleiste: eine Zeile, Rest auf Klick */
.alerts{position:relative;display:flex;align-items:center;gap:8px;background:#0b1118;border-bottom:1px solid var(--line);padding-right:10px}
.alerts[hidden]{display:none}
.al-main{flex:1;min-width:0}.al-main .alert{border-bottom:0}
.al-btn{flex:none;padding:3px 10px;font-size:0.8rem;background:#0f1a25;color:var(--ink)}
.al-list{position:absolute;top:100%;left:0;right:0;z-index:40;background:#0b1118;border:1px solid var(--line);border-top:0;max-height:50vh;overflow:auto;box-shadow:0 12px 30px #000a}
.al-list[hidden]{display:none}
.alert.fresh{animation:slidein .5s ease-out}
.alert.link{cursor:pointer}.alert.link:hover{background:#16243a}.alert.link:hover a{text-decoration:underline;color:#fff}.alert .ext{color:var(--dim);font-size:0.8rem}
