/* portfolio-radar – Tokens aus dem UI-Prototyp */
:root {
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --line: #E4E3DD;
  --line-soft: #EFEEE9;
  --track: #ECEBE6;
  --text: #16161A;
  --muted: #62615C;
  --accent: #2447D8;
  --accent-hover: #1A36A8;
  --accent-soft: #C9D3F6;
  --pos: #177245;
  --neg: #B42318;
  --warn-dot: #C4610C;
  --chip-green-bg: #E3F1E8; --chip-green: #135C38;
  --chip-grey-bg: #EEEDE8;  --chip-grey: #3F3E3A;
  --chip-amber-bg: #FCEEDD; --chip-amber: #7A3E06;
  --chip-red-bg: #FBE6E4;   --chip-red: #8E1C14;
  --chip-blue-bg: #E4EAFB;  --chip-blue: #1B3AA8;
  --radius: 12px;
  --pad-x: 80px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  font-size: 14px; line-height: 20px;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }

/* Header */
.header {
  height: 64px; padding: 0 var(--pad-x); display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10;
}
.header-left { display: flex; align-items: center; gap: 56px; }
.brand { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-decoration: none; }
.nav { display: flex; gap: 32px; }
.nav a { font-size: 14px; color: var(--muted); text-decoration: none; padding: 21px 0 19px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--text); font-weight: 500; border-bottom-color: var(--accent); }
.nav a:hover { color: var(--text); }
.header-right { display: flex; align-items: center; gap: 16px; }
.run-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; line-height: 20px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: #C9C8C1; }
.btn[disabled] { color: var(--muted); cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.link-quiet { font-size: 13px; color: var(--muted); text-decoration: none; }
.link-quiet:hover { color: var(--text); }

/* Chips */
.chip { display: inline-flex; align-items: center; align-self: flex-start; font-size: 12px; line-height: 16px; font-weight: 500; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip-green { background: var(--chip-green-bg); color: var(--chip-green); }
.chip-grey  { background: var(--chip-grey-bg);  color: var(--chip-grey); }
.chip-amber { background: var(--chip-amber-bg); color: var(--chip-amber); }
.chip-red   { background: var(--chip-red-bg);   color: var(--chip-red); }
.chip-blue  { background: var(--chip-blue-bg);  color: var(--chip-blue); }

/* Layout */
.main { padding: 48px var(--pad-x) 80px; display: flex; flex-direction: column; gap: 48px; max-width: 1600px; margin: 0 auto; }
.page-head { display: flex; flex-direction: column; gap: 8px; }
.page-head h1 { margin: 0; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.page-head p { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); max-width: 72ch; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.section-head h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.section-head span { font-size: 14px; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.kpi { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-value { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; }
.kpi-sub { font-size: 14px; color: var(--muted); }
.kpi-stack { display: flex; flex-direction: column; gap: 4px; }
.kpi-small { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.kpi-small .kpi-value { font-size: 28px; line-height: 36px; }
.kpi-small .kpi-sub { font-size: 13px; }
.stamp { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: auto; }
.stamp.warn { color: var(--chip-amber); }

/* Fear & Greed Skala */
.scale { position: relative; height: 6px; background: var(--track); border-radius: 3px; }
.scale-fill { position: absolute; top: 0; left: 0; height: 6px; border-radius: 3px; background: var(--accent-soft); }
.scale-knob { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 7px; background: var(--accent); border: 2px solid #fff; }
.scale-tick { position: absolute; top: -3px; width: 1px; height: 12px; background: #B9B8B1; }
.scale-ends { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted); }

/* Tabellen als Grid */
.table { overflow: hidden; }
.trow { display: grid; gap: 24px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line-soft); color: var(--text); text-decoration: none; }
.trow:last-child { border-bottom: none; }
.thead { padding: 12px 24px; border-bottom: 1px solid var(--line); }
.thead span { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--muted); }
.cell-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cell-name b { font-size: 14px; font-weight: 600; }
.cell-name small { font-size: 13px; line-height: 18px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { text-align: right; }
.muted { color: var(--muted); }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.later { color: #A3A29B; }
.table-scroll { overflow-x: auto; }
.pos-grid { grid-template-columns: 2.2fr 0.8fr 1fr 1fr 0.7fr 0.8fr 0.9fr; min-width: 860px; }

/* Listen in Karten */
.list { padding: 8px 24px; }
.list-row { display: grid; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.list-row:last-child { border-bottom: none; }
.changes-row { grid-template-columns: 72px 1fr; }
.changes-row span:first-child { font-size: 13px; color: var(--muted); }

/* Makro im Detail */
.macro-row {
  display: grid; grid-template-columns: 2fr 0.6fr 200px 0.6fr 2.4fr 20px; gap: 24px; align-items: center;
  padding: 14px 0; border: 0; border-bottom: 1px solid var(--line-soft); background: none; width: 100%;
  text-align: left; color: var(--text); cursor: pointer;
}
.macro-row:hover .macro-name { color: var(--accent); }
.macro-name { font-weight: 500; }
.bar { position: relative; display: block; width: 200px; height: 6px; background: var(--track); border-radius: 3px; }
.bar-mid { position: absolute; left: calc(50% - 1px); top: -4px; width: 2px; height: 14px; background: #B9B8B1; }
.bar-fill { position: absolute; top: 0; height: 6px; border-radius: 3px; }
.chev { color: var(--muted); transition: transform 160ms ease; }
.open .chev { transform: rotate(90deg); }
.macro-detail { padding: 4px 0 16px; border-bottom: 1px solid var(--line-soft); }
.ind-row { display: grid; grid-template-columns: 1.8fr 1fr 0.9fr 1.1fr 0.7fr; gap: 16px; padding: 8px 0; font-size: 13px; line-height: 18px; }
.ind-head { color: var(--muted); font-size: 12px; font-weight: 500; }
.macro-list > div:last-child .macro-row, .macro-list > div:last-child .macro-detail { border-bottom: none; }

/* Allokation */
.alloc-row { grid-template-columns: 1.4fr 2fr 0.6fr; align-items: center; gap: 24px; }
.alloc-track { display: block; height: 6px; background: var(--track); border-radius: 3px; overflow: hidden; }
.alloc-fill { display: block; height: 6px; background: var(--accent); }

.stock-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.score-box { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.stock-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 24px; }
.kv-card { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.kv-card h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.kv-row { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.kv-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.warn-text { color: var(--chip-amber); }
.picker { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 8px; }
.picker select { font: inherit; font-size: 14px; color: var(--text); padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 320px; }
a.trow:hover { background: #FAFAF8; }

/* Datenquelle „i“ */
.label-row { display: inline-flex; align-items: center; gap: 6px; }
.info { position: relative; display: inline-flex; }
.info-btn {
  width: 16px; height: 16px; border-radius: 8px; border: 1px solid #C9C8C1; background: var(--surface);
  color: var(--muted); font-size: 10px; line-height: 14px; font-weight: 600; font-style: italic;
  font-family: Georgia, 'Times New Roman', serif; padding: 0; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
}
.info-btn:hover, .info-btn.on { border-color: var(--accent); color: var(--accent); }
.info-pop {
  position: absolute; top: 22px; left: -8px; z-index: 30; width: max-content; max-width: min(340px, 80vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(22, 22, 26, 0.12); display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; line-height: 18px; font-weight: 400; color: var(--text); text-align: left; letter-spacing: 0;
}
.info-title { font-weight: 600; }
.info-row { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
.info-row span:first-child { color: var(--muted); }

/* Platzhalter „folgt in Stufe X" */
.later-card { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: repeating-linear-gradient(135deg, #FFFFFF 0 10px, #FBFBF9 10px 20px); }
.later-card p { margin: 0; color: var(--muted); max-width: 60ch; }
.later-kpi .kpi-value { color: #A3A29B; }

/* Hinweise / Banner */
.banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--warn-dot); border-radius: var(--radius); }
.banner p { margin: 0; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; z-index: 20; }
.empty { padding: 32px 24px; color: var(--muted); }
.footer { padding: 0 var(--pad-x) 48px; max-width: 1600px; margin: 0 auto; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Responsiv */
@media (max-width: 1200px) {
  :root { --pad-x: 32px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stock-grid { grid-template-columns: 1fr; }
  .header-left { gap: 24px; }
  .nav { gap: 20px; }
  .run-meta { display: none; }
}
@media (max-width: 800px) {
  :root { --pad-x: 16px; }
  .header { height: auto; display: grid; grid-template-columns: 1fr auto; row-gap: 4px; padding-top: 12px; }
  .header-left { display: contents; }
  .brand { grid-column: 1; grid-row: 1; align-self: center; }
  .header-right { grid-column: 2; grid-row: 1; gap: 8px; }
  .header-right .chip { display: none; }
  .nav { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; gap: 20px; }
  .nav a { padding: 10px 0 10px; }
  .section-head { flex-direction: column; gap: 2px; }
  .main { padding-top: 32px; gap: 32px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .stock-head { flex-direction: column; align-items: stretch; }
  .picker { flex-wrap: wrap; }
  .picker select { max-width: 100%; min-width: 0; flex: 1 1 200px; }
  .macro-row { grid-template-columns: 1fr 120px 48px 16px; gap: 12px; }
  .macro-row .hide-sm { display: none; }
  .bar { width: 120px; }
  .ind-row { grid-template-columns: 1.5fr 1fr 0.8fr; }
  .ind-row .hide-sm { display: none; }
  .changes-row { grid-template-columns: 56px 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }