:root,
.theme-auto {
  color-scheme: light dark;

  --farbe-hintergrund: #0d0e11;
  --farbe-flaeche: #16181d;
  --farbe-flaeche-hell: #22252c;
  --farbe-text: #f4f5f7;
  --farbe-text-ruhig: #a8afb9;
  --farbe-akzent: #d92832;
  --farbe-gefahr: #ef4444;
  --farbe-rand: rgba(255, 255, 255, 0.16);
}

@media (prefers-color-scheme: light) {
  :root:not(.theme-dark):not(.theme-light),
  .theme-auto {
    --farbe-hintergrund: #fff8f7;
    --farbe-flaeche: #ffffff;
    --farbe-flaeche-hell: #fffafa;
    --farbe-text: #251a1a;
    --farbe-text-ruhig: #6d5352;
    --farbe-akzent: #bd0e15;
    --farbe-gefahr: #b3261e;
    --farbe-rand: rgba(37, 26, 26, 0.16);
  }
}

.theme-light {
  color-scheme: light;

  --farbe-hintergrund: #fff8f7;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-hell: #fffafa;
  --farbe-text: #251a1a;
  --farbe-text-ruhig: #6d5352;
  --farbe-akzent: #bd0e15;
  --farbe-gefahr: #b3261e;
  --farbe-rand: rgba(37, 26, 26, 0.16);
}

.theme-dark {
  color-scheme: dark;

  --farbe-hintergrund: #0d0e11;
  --farbe-flaeche: #16181d;
  --farbe-flaeche-hell: #22252c;
  --farbe-text: #f4f5f7;
  --farbe-text-ruhig: #a8afb9;
  --farbe-akzent: #d92832;
  --farbe-gefahr: #ef4444;
  --farbe-rand: rgba(255, 255, 255, 0.16);
}