/* ================= HERO ================= */
.hero {
  padding: 36px 16px 28px;
  text-align: center;
}

.hero h1 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
}

.hero p {
  margin: 0;
  color: var(--textDim);
  font-size: 14px;
}

/* ================= CHART ================= */
.chart {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px;
}

/* ================= FOOTER ================= */
.site-footer{
  text-align:center;
  font-size:13px;
  color: var(--textDim2);
  padding: 32px 16px calc(var(--playerH) + 38px);
}

.footer-copy{ 
  margin-bottom: 6px; 
}

.footer-update{ 
  font-size:12px; 
  color: var(--textDim); 
  margin-bottom:6px; 
}

.footer-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  margin-top: 10px;
}

.footer-links a{
  color: var(--blue2);
  text-decoration:none;
}

.footer-links a:hover{ 
  text-decoration: underline; 
}

.footer-version{
  font-size: 11px;
  color: #6f7a90;
  margin-top: 8px;
}

/* ================= CHART HISTORY – SVG VERSION ================= */

.chart-history{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 12px;
}

.chart-history::after {
  content: "";
  display: block;
  height: 1px;
  margin: 18px auto 0;
  width: 60%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(79,163,255,0.35),
    transparent
  );
}

.chart-history .hist{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  background: rgba(20,28,47,.75);
  border: 1px solid #1e2740;

  font-size: 12px;
  font-weight: 600;
  color: #c7d0e2;

  backdrop-filter: blur(8px);
}

/* SVG Icons */
.chart-history svg{
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Farb-Feinschliff */
.chart-history .new   { color: #6ee7ff; }
.chart-history .up    { color: #3cff9e; }
.chart-history .down  { color: #ff5b5b; }
.chart-history .stable{ color: #9aa4b2; }

/* ================= DESKTOP HISTORY FIX ================= */
@media (min-width: 768px) {

  .chart-history{
    max-width: 900px;        /* exakt wie .chart */
    margin: 24px auto 28px;  /* sauber zwischen Content & Footer */
    padding: 0 12px;
  }

  .site-footer{
    margin-top: 0;
  }

}