/* ======================================================================
   THEME: DARK MODE
   Description: Hintergrund- und Textdefinitionen für dunkles Erscheinungsbild
   ====================================================================== */

.theme-dark {
  --background-color: #1e1e1e;
  --surface-color: #2a2a2a;
  --text-color: #e0e0e0;
  --text-muted-color: #a0a0a0;
  --accent-color: #4dabf7;
  --success-color: #6dbf73;
  --warning-color: #d7b23e;
  --error-color: #e57373;
  --chart-unpinned: #64b5f6;
  --chart-half-pinned: #81c784;
  --chart-pinned: #ffb74d;
  --border-color: #3a3a3a;

  background-color: var(--background-color);
  color: var(--text-color);
}

.theme-dark .card,
.theme-dark .panel {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
}

.theme-dark a {
  color: var(--accent-color);
  text-decoration: none;
}
.theme-dark a:hover {
  text-decoration: underline;
}

/* ======================================================================
   THEME: LIGHT MODE
   Description: Farbdefinitionen für helles Erscheinungsbild
   ====================================================================== */

.theme-light {
  --background-color: #f5f5f5;
  --surface-color: #ffffff;
  --text-color: #212121;
  --text-muted-color: #616161;
  --accent-color: #1976d2;
  --success-color: #388e3c;
  --warning-color: #f9a825;
  --error-color: #d32f2f;
  --chart-unpinned: #2196f3;
  --chart-half-pinned: #66bb6a;
  --chart-pinned: #ffa726;
  --border-color: #e0e0e0;

  background-color: var(--background-color);
  color: var(--text-color);
}

.theme-light .card,
.theme-light .panel {
  background-color: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem;
}

.theme-light a {
  color: var(--accent-color);
  text-decoration: none;
}
.theme-light a:hover {
  text-decoration: underline;
}

/* ======================================================================
   GLOBAL CHART COLOR USAGE
   ====================================================================== */

.chart-unpinned {
  color: var(--chart-unpinned);
}
.chart-half-pinned {
  color: var(--chart-half-pinned);
}
.chart-pinned {
  color: var(--chart-pinned);
}

footer {
  font-size: 0.85rem;
  color: var(--text-muted-color);
  text-align: center;
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border-color);
}

footer::after {
  content: "© 2026 Donau2Space.de";
  display: block;
  margin-top: 0.5rem;
}