/* /theme/style.css */

/* ============================
   Layout & Struktur
============================ */
body {
  padding-top: 4rem;
  background-color: var(--background-color);
  color: var(--text-color);
}

.container-boxed {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ============================
   Farbvariablen (Light Mode)
============================ */
:root {
  --background-color: #ffffff;
  --text-color: #212529;
  --link-color: #0d6efd;
  --footer-bg: #f8f9fa;
  --navbar-bg: #2f150e; /* NEU */
}

/* ============================
   Automatischer Darkmode (System)
============================ */
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #e0e0e0;
    --link-color: #90caf9;
    --footer-bg: #1f1f1f;
    --navbar-bg: #2f150e;
  }
}

/* ============================
   Manueller Darkmode (Klasse)
============================ */
html.dark-mode {
  --background-color: #121212 !important;
  --text-color: #e0e0e0 !important;
  --link-color: #90caf9 !important;
  --footer-bg: #1f1f1f !important;
  --navbar-bg: #2f150e !important;
}

/* ============================
   Navigation (Header)
============================ */
.navbar {
  background-color: var(--navbar-bg) !important;
}

/* ============================
   Footer
============================ */
footer {
  background-color: #2f150e;
  color: #fff;
  padding: 2rem 0;
  margin-top: 4rem;
  text-align: center;
}

footer a {
  color: #fff;
  text-decoration: none;
}

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

/* ============================
   Links allgemein
============================ */
a {
  color: var(--link-color);
}

/* ============================
   Darkmode Toggle Button
============================ */
#darkmode-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 999;
}

#darkmode-toggle:hover {
  background: #555;
}

/* ============================
   Versionstext im Footer
============================ */
.footer-version {
  font-size: 0.8rem;
  color: #a0a7ac;
  text-align: center;
  margin-top: 1rem;
  margin-left: 1rem;
}