/* Grundlegende Stile */
body {
  background-color: #121212 !important;
  color: #e0e0e0;
  font-family: Arial, sans-serif;
  font-size: 16px; /* Basisschriftgröße erhöht für bessere Lesbarkeit */
}

.table-dark th, .table-dark td {
  color: #e0e0e0;
}

.btn-primary {
  background-color: #1f6feb;
  border-color: #1f6feb;
}

.btn-secondary {
  background-color: #3a3a3a;
  border-color: #3a3a3a;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

.bg-secondary {
  background-color: #1f1f1f !important;
}

.modal-content {
  background-color: #1f1f1f;
  color: #e0e0e0;
}

.form-control {
  background-color: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #555;
}

.form-control:focus {
  background-color: #3a3a3a;
  color: #e0e0e0;
}

.navbar-brand {
  font-weight: bold;
}

/* Verbesserte Stile für die Karten (Kacheln) */
.card {
  background-color: #1e1e1e; /* Leicht hellere Hintergrundfarbe für bessere Sichtbarkeit */
  border: 1px solid #333; /* Dunklerer Rahmen, der sich vom Hintergrund abhebt */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Deutlichere Schatten für mehr Tiefe */
  transition: transform 0.2s, box-shadow 0.2s; /* Sanftere Übergänge */
  cursor: pointer;
  min-height: 150px; /* Mindesthöhe für bessere Lesbarkeit */
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7); /* Intensivere Schatten beim Hover */
}

.card-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 1.1rem; /* Erhöhte Schriftgröße für bessere Lesbarkeit */
}

.card-body {
  padding: 1rem;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  /* Reduziere die Anzahl der Spalten auf kleineren Bildschirmen */
  .row-cols-md-3 {
      row-gap: 1.5rem;
  }

  /* Vergrößere die Kartenhöhe für bessere Lesbarkeit */
  .card {
      height: auto;
      min-height: 120px; /* Anpassung der Mindesthöhe für kleinere Bildschirme */
  }

  /* Anpassung der Navbar für mobile Geräte */
  .navbar-nav {
      text-align: center;
  }

  .navbar-text {
      display: block;
      margin-top: 0.5rem;
  }
}

@media (max-width: 576px) {
  /* Weitere Anpassungen für sehr kleine Bildschirme */
  .card-title {
      font-size: 1rem; /* Verkleinerung der Schriftgröße für sehr kleine Bildschirme */
  }

  .btn {
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
  }

  /* Anpassung der Videoanzeige */
  video {
      height: auto;
  }

  /* Verbessere die Touch-Ziele */
  .btn, .card {
      touch-action: manipulation;
  }

  /* Vergrößere die allgemeine Schriftgröße */
  body {
      font-size: 16px;
  }

  /* Reduziere das Padding in den Karten */
  .card-body {
      padding: 0.75rem;
  }

  /* Minimieren der Kacheln auf sehr kleinen Bildschirmen */
  #courses .card, #lessonsContainer .card, #videosContainer .card {
      min-height: 100px; /* Anpassung der Mindesthöhe für sehr kleine Bildschirme */
  }

  /* Zusätzliche Anpassungen für das Login-Formular */
  .container {
      padding: 1rem;
  }

  h2 {
      font-size: 1.5rem;
  }

  .form-control {
      font-size: 1rem;
      padding: 0.75rem;
  }

  .btn {
      padding: 0.75rem;
      font-size: 1rem;
  }
}

/* Verbesserte Hover-Effekte für Touch-Geräte (optional) */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
  }
}

@media (hover: none) and (pointer: coarse) {
  /* Für Touch-Geräte: kein Hover-Effekt */
  .card:hover {
      transform: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

/* Zusätzliche Verbesserungen */
a {
  color: #1f6feb;
}

a:hover {
  color: #63a4ff;
  text-decoration: underline;
}

/* Scrollbalken für Videos auf kleinen Geräten */
video {
  max-width: 100%;
  height: auto;
}

/* Buttons im Video-Player */
.watch-video-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  margin-top: 1rem;
}

.watch-video-buttons .btn {
  padding: 0.5rem 1rem;
}

/* Optimierung der Modal-Fenster */
.modal-dialog {
  max-width: 90%;
}

@media (min-width: 576px) {
  .modal-dialog {
      max-width: 500px;
  }
}

/* Spezifische Anpassungen für Dashboard-Kacheln */
#courses .card, #lessonsContainer .card, #videosContainer .card {
  min-height: 150px; /* Mindesthöhe für bessere Lesbarkeit */
}

@media (max-width: 576px) {
  #courses .card, #lessonsContainer .card, #videosContainer .card {
      min-height: 100px; /* Anpassung der Mindesthöhe für sehr kleine Bildschirme */
  }
}


/* Darkmode-Stile für Accordion-Komponenten */
.accordion-button {
  background-color: #1f1f1f;
  color: #e0e0e0;
  border: 1px solid #333;
}

.accordion-button:not(.collapsed) {
  color: #ffffff;
  background-color: #2c2c2c;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 011.06 0L8 10.293l5.294-5.647a.5.5 0 11.708.708l-5.999 6.42a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E");
}

.accordion-collapse {
  background-color: #1f1f1f;
  color: #e0e0e0;
  border: 1px solid #333;
}

.accordion-body {
  background-color: #1f1f1f;
  color: #e0e0e0;
}

.table-dark th, .table-dark td {
  color: #e0e0e0;
}

.alert-danger {
  background-color: #721c24;
  color: #f8d7da;
  border: 1px solid #f5c6cb;
}

/* Weitere Verbesserungen für Darkmode */
body {
  background-color: #121212 !important;
  color: #e0e0e0;
}

a {
  color: #1f6feb;
}

a:hover {
  color: #63a4ff;
  text-decoration: underline;
}