:root {
  /* Light Mode */
  --primary-color: #ffeb3b;
  --background-color: #f5f5f5;
  --text-color: #333;
  --card-shadow: 0 2px 5px rgba(0,0,0,0.1);
  --card-background: #ffffff;
  --border-color: #ddd;
  --link-color: #0066cc;
  --header-text: #333;
}

[data-theme="dark"] {
  /* Dark Mode - noch bessere Lesbarkeit */
  --primary-color: #ffd600;
  --background-color: #121212;
  --text-color: #ffffff;
  --card-shadow: 0 2px 5px rgba(0,0,0,0.5);
  --card-background: #1e1e1e;
  --border-color: #333;
  --link-color: #66b3ff;
  --header-text: #ffffff;
}

/* Grundlegende Anpassungen */
body {
  background-color: var(--background-color) !important;
  color: var(--text-color) !important;
}

/* Liste und Karten im Dark Mode */
[data-theme="dark"] .ui-page {
  background-color: var(--background-color) !important;
}

[data-theme="dark"] .ui-listview > li {
  background-color: var(--card-background) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui-header {
  background-color: #000000 !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui-footer {
  background-color: #000000 !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .ui-btn {
  background-color: var(--card-background) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Bestehende Styles bleiben erhalten */
.ui-listview > li {
  border-radius: 8px;
  margin: 8px 0;
  box-shadow: var(--card-shadow);
  transition: transform 0.2s;
}

/*.ui-listview > li:active {
  transform: scale(0.98);
}
*/
/* Vereinfachter Theme Toggle Button */
#themeToggle {
    position: absolute;
    right: 10px;
    top: 10%;
    /*transform: translateY(-50%);*/
    padding: 8px 12px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
    text-transform: none !important;
    background: var(--card-background) !important;
    border: 1px solid var(--border-color) !important;
}

/* Text im Button */
#themeToggle {
    content: "yang" !important;
}

[data-theme="dark"] #themeToggle {
    content: "yin" !important;
}

.offline-message {
  text-align: center;
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
  background: var(--background-color);
  box-shadow: var(--card-shadow);
}

/* Verbesserte Textlesbarkeit im Dark Mode */
[data-theme="dark"] * {
  text-shadow: none !important;
}

[data-theme="dark"] .ui-listview-divider,
[data-theme="dark"] .ui-li-divider {
  background-color: #333 !important;
  color: #fff !important;
  text-shadow: none !important;
  border-color: #444 !important;
}

[data-theme="dark"] .ui-listview > li > a {
  color: #fff !important;
  text-shadow: none !important;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] .ui-header h3,
[data-theme="dark"] .ui-footer h3 {
  color: #fff !important;
  text-shadow: none !important;
}

[data-theme="dark"] .ui-btn {
  color: #fff !important;
  text-shadow: none !important;
}

/* Links im Dark Mode hervorheben */
[data-theme="dark"] a {
  color: var(--link-color) !important;
}

/* Erhöhter Kontrast für Text auf dunklem Hintergrund */
[data-theme="dark"] .ui-listview > li {
  background-color: var(--card-background) !important;
  border-color: var(--border-color) !important;
}  </rewritten_file>