/* ================= 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;
}

/* ================= SEO TEXT (Mobile dezent, Desktop/TV wie Card) ================= */
.seo-text{
  max-width: 900px;
  margin: 6px auto 12px;
  padding: 0 12px;
  text-align:center;
  color: rgba(185,195,214,.62);
  font-size: 12px;
  line-height: 1.35;
}
.seo-text p{ margin:0; }

/* Mobile: noch dezenter + weniger Höhe */
@media (max-width:600px){
  .seo-text{
    margin: 4px auto 10px;
    font-size: 11px;
    line-height: 1.25;
    color: rgba(185,195,214,.50);
  }
}

/* Desktop/TV: SEO-Text im gleichen Look wie deine Cards */
@media (min-width:768px){
  .seo-text{
    margin: 10px auto 16px;
    padding: 10px 14px;

    background: rgba(20,28,47,.55);
    border: 1px solid rgba(30,39,64,.90);
    border-radius: 16px;
    backdrop-filter: blur(8px);

    text-align: left; /* wirkt auf TV sauberer */
    color: rgba(185,195,214,.78);
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ================= 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;
  }

}