/* Detailansicht: Kopf, Badges, TF-Segment, Chart. Mobile-first. */
.detail-view {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px var(--pad) 40px;
}

.detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 10px;
}
.detail-title { flex: 1; min-width: 0; }
.detail-quote { text-align: right; }
.detail-quote .price { font-size: 20px; font-weight: 600; }
.detail-quote .chip { margin-top: 3px; }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
}

.tf-seg {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
}
.tf-btn {
  padding: 6px 16px;
  font-size: 13px;
  color: var(--muted);
  border-right: 1px solid var(--line);
}
.tf-btn:last-child { border-right: none; }
.tf-btn:hover { color: var(--fg); background: var(--panel); }
.tf-btn.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 600;
}

#chart-box {
  height: 58vh;
  max-height: 520px;
  min-height: 260px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.attrib {
  padding-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

/* Logo ist jetzt ein Link */
.logo { color: var(--fg); }
.logo:hover { text-decoration: none; }

/* Kontext-Notizen (News/Kalender/LLM) */
.ctx-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 8px 11px;
  margin-bottom: 10px;
  font-size: 13px;
  display: grid;
  gap: 4px;
}
.ctx-note { color: var(--fg); }
.ctx-event { color: var(--muted); }