body {
  font-family: Arial, sans-serif;
}
/* Füge diese CSS-Regeln hinzu */
header {
  text-align: center; /* Zentriert den Text horizontal */
  padding: 20px; /* Fügt Abstand oben und unten hinzu */
  background-color: #007bff; /* Hintergrundfarbe des Headers */
  color: white; /* Textfarbe im Header */
}

header h1 {
  margin: 0; /* Entfernt den oberen und unteren Rand der Überschrift */
  font-size: 36px; /* Ändert die Schriftgröße der Überschrift */
}

header h2 {
  margin: 0; /* Entfernt den oberen und unteren Rand des Untertitels */
  font-size: 18px; /* Ändert die Schriftgröße des Untertitels */
}
.study-image {
  max-width: 20%; /* Begrenzt die Bildbreite auf die Containerbreite */
  height: auto; /* Skaliert das Bild beibehalten das Seitenverhältnis */
  margin: 10px; /* Fügt Abstand um die Bilder herum hinzu */
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.form-container {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px;
  width: 300px; /* Feste Breite für beide Formulare */
  height: 400px; /* Feste Höhe für beide Formulare */
}
form label {
  display: block;
  margin-bottom: 5px;
}
form input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
form button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}
#index{
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
}
.success-message {
  color: #28a745;
  font-weight: bold;
  margin-top: 10px; /* Fügt Abstand oben hinzu */
}
.error-message {
  color: #dc3545;
  font-weight: bold;
  margin-top: 10px; /* Fügt Abstand oben hinzu */
}
/* ... Dashboard ... */
.dashboard {
  display: flex;
  flex-direction: row;
  margin: 20px;
}
.navigation {
  width: 200px;
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 5px;
}
.navigation ul {
  list-style-type: none;
  padding: 0;
}
.navigation li {
  margin-bottom: 10px;
}
.nav-link {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}
.content {
  flex: 1;
  margin-left: 20px;
}
.content-section {
  display: none;
}
/* ... Dashboard Categories... */
#category-list {
  margin-top: 20px;
}
.category-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.category-name {
  font-weight: bold;
  order: 1;
}
.category-counter {
  background-color: #f1f1f1;
  width: 12em;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  margin-top: 5px;
  position: relative;
  order: 2;
}

.category-hint-text{
  margin-top: 5px;
  font-size: 10px;	
  order:4;
}
/* Stil für den Hover-Text */
/*.category-counter::after {
/*  content: "Kärtchen gesamt"; /* Den gewünschten Hover-Text hier einfügen */
/*  position: absolute;
/*  left: 50%; /* Zentriert den Hover-Text horizontal */
/*  top: -1%;
/*  margin-left: 5px;
/*  transform: translateX(10%); /* Zentriert den Hover-Text horizontal */
/*  background-color: #000; /* Hintergrundfarbe des Hover-Texts */
/*  color: #fff; /* Textfarbe des Hover-Texts */
/*  padding: 5px; /* Abstand um den Text herum */
/*  border-radius: 3px; /* Abgerundete Ecken */
/*  white-space: nowrap; /* Verhindert Zeilenumbrüche im Text */
/*  opacity: 0; /* Standardmäßig unsichtbar */
/*  transition: opacity 0.3s; /* Animiere die Opazität beim Ein- und Ausblenden */
/*}
/* Zeige den Hover-Text beim Überfahren mit der Maus an */
/*.category-counter:hover::after {
 /* opacity: 1; /* Mache den Hover-Text sichtbar */
/*}*/
/* CSS für den due-counter */
.category-due-counter {
  background-color: #ff8282;
  width: 12em;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  margin-top: 5px;
  float: right; /* Den due-counter rechts ausrichten */
  position: relative;
  order: 3;
}.category-due-counter_zero {
  background-color: #19cd25;
  width: 12em;
  text-align: center;
  padding: 5px 10px;
  border-radius: 3px;
  margin-top: 5px;
  float: right; /* Den due-counter rechts ausrichten */
  position: relative;
  order: 3;
}
/* Stil für den Hover-Text */
/*.category-due-counter::after {
  content: "Fällige Kärtchen"; /* Den gewünschten Hover-Text hier einfügen */
 /* position: absolute;
  left: 50%; /* Zentriert den Hover-Text horizontal */
 /* top: -1%;
  margin-left: 5px;
  transform: translateX(10%); /* Zentriert den Hover-Text horizontal */
 /* background-color: #000; /* Hintergrundfarbe des Hover-Texts */
 /* color: #fff; /* Textfarbe des Hover-Texts */
 /* padding: 5px; /* Abstand um den Text herum */
 /* border-radius: 3px; /* Abgerundete Ecken */
 /* white-space: nowrap; /* Verhindert Zeilenumbrüche im Text */
 /* opacity: 0; /* Standardmäßig unsichtbar */
/*  transition: opacity 0.3s; /* Animiere die Opazität beim Ein- und Ausblenden */
/*}
/* Zeige den Hover-Text beim Überfahren mit der Maus an */
/*.category-due-counter:hover::after {
  opacity: 1;  Mache den Hover-Text sichtbar 
}*/
.subcategory-due-counter {
  background-color: #ff8282;
  padding: 5px 10px;
  border-radius: 3px;
  float: right; /* Den Due Counter rechts ausrichten */
  margin-left: 5px;
  margin-right: 5px;
  position: relative; /*Hoover*/
}
.subcategory-due-counter_zero {
  background-color: #19cd25;
  padding: 5px 10px;
  border-radius: 3px;
  float: right; /* Den Due Counter rechts ausrichten */
  margin-left: 5px;
  margin-right: 5px;
  position: relative; /*Hoover*/
}
.no-sub-category-li{
	font-size: 12px;
	background-color: lightyellow;
}
.subcategory-count{
  background-color: #ff8282;
  padding: 5px 10px;
  border-radius: 3px;
  float: right; /* Den Due Counter rechts ausrichten */
  margin-left: 5px;
  margin-right: 5px;
  position: relative; /*Hoover*/
}
/* Stil für den Hover-Text */
/*.subcategory-due-counter::after {
  content: "Fällige Kärtchen"; /* Den gewünschten Hover-Text hier einfügen */
 /*position: absolute;
  left: 50%; /* Zentriert den Hover-Text horizontal */
 /* top: -1%;
  margin-left: 5px;
  transform: translateX(10%); /* Zentriert den Hover-Text horizontal */
  /*background-color: #000; /* Hintergrundfarbe des Hover-Texts */
  /*color: #fff; /* Textfarbe des Hover-Texts */
 /* padding: 5px; /* Abstand um den Text herum */
 /* border-radius: 3px; /* Abgerundete Ecken */
 /* white-space: nowrap; /* Verhindert Zeilenumbrüche im Text */
 /* opacity: 0; /* Standardmäßig unsichtbar */
/*  transition: opacity 0.3s; /* Animiere die Opazität beim Ein- und Ausblenden */
/*}
/* Zeige den Hover-Text beim Überfahren mit der Maus an */
/*.subcategory-due-counter:hover::after {
/*  opacity: 1; /* Mache den Hover-Text sichtbar */
/*}  */
#no-categories {
  margin-top: 20px;
  font-style: italic;
  color: #888;
}
/* Stil für die Subkategorie-Liste (standardmäßig ausgeblendet) */
.subcategories-list {
  display: block; /* Standardmäßig einblenden */
  order: 4; /* Reihenfolge, in der es angezeigt wird */
}
/* Stil für versteckte Subkategorie-Listen */
.hidden {
  display: none;
}
/* Stil für die Subkategorie-Listenelemente */
.subcategories-list li {
  list-style-type: none; /* Entfernt Aufzählungspunkte */
  display: flex; /* Verwenden Sie Flexbox für die horizontale Ausrichtung */
  justify-content: space-between; /* Platziert den Text und den Due Counter an den Rändern */
  align-items: center; /* Zentriert die Elemente vertikal */
  margin: 5px 0;
  margin-left: -34px;
  text-align: center; /* Zentrieren Sie den Text horizontal */
  order: 5; /* Reihenfolge, in der es angezeigt wird */
}
/* Stil für die Eingabe der Vokabeln/Fragen */
#input-form {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 20px;
  display: none;
}
#input-form h2 {
  font-size: 20px;
  margin-bottom: 10px;
}
#vocabulary-form label {
  display: block;
  margin-bottom: 10px;
}
#vocabulary-form input[type="text"] {
  width: 99%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#existing-category{
	height: 36px;
	border-radius: 4px;
	
}#existing-subcategory{
	height: 36px;
	border-radius: 4px;
}
#vocabulary-form input[type="submit"] {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#vocabulary-form input[type="submit"]:hover {
  background-color: #0056b3;
}
/* Stil für den Quiz-Bereich */
#quiz {
  display: none;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

/* Stil für die Vokabelanzeige */
#quiz-container {
  text-align: center;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Stil für die Frageanzeige */
.foreign-word {
  font-size: 24px;
  font-weight: bold;
}

/* Stil für das Eingabefeld */
#translation-input {
  width: 97%;
  padding: 10px;
  font-size: 16px;
  margin-top: 10px;
}

/* Stil für die Prüfen- und Weiter-Buttons */
#check-button,
#next-button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
}

/* Stil für das Quiz-Ergebnis */
.quiz-result {
  display: none;
  margin-top: 10px;
}

/* Stil für die Quiz-Ergebnis-Buttons */
#correct-button,
#incorrect-button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
}
#finish-button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
}
/* Stil für den Antwort-Text */
.quiz-result p {
  font-size: 18px;
  font-weight: bold;
}

/* Stil für den "Alle Vokabeln abgefragt" Text */
/*#quiz-container .foreign-word:after {
  content: ' (Alle Vokabeln abgefragt)';
  font-size: 16px;
  color: #888;
}*/

/* Stil für den "Keine Vokabeln gefunden" Text */
#quiz-container .foreign-word:empty:after {
  content: ' (Keine Vokabeln gefunden)';
  font-size: 16px;
  color: #888;
}
/* Stil für die Vokabelliste */
#vocabulary-list {
  margin-top: 20px;
}

.vocabulary-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

.edit-button, .delete-button {
  margin-left: 10px;
  cursor: pointer;
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
}

/* Stil für die Bearbeiten- und Löschen-Buttons */
.edit-button:hover, .delete-button:hover {
  background-color: #0056b3;
}
/* Stil für den Statistikbereich */
.content-section {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.content-section h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.category-stats {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.category-stats h3 {
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 5px;
}

.category-stats p {
    font-size: 16px;
    margin: 0;
}

/* Stil für den Hover-Text */
.category-stats:hover {
    background-color: #f9f9f9;
    transition: background-color 0.3s;
}
/* Stil für den Footer */
.footer-links {
  text-align: center; /* Zentriert den Text horizontal */
  margin-top: 20px; /* Fügt Abstand oben hinzu */
}

/* Stil für die Footer-Links */
.footer-links a {
  text-decoration: none; /* Entfernt die Unterstreichung der Links */
  color: #333; /* Textfarbe der Links */
  font-weight: bold; /* Fettschrift */
  margin: 0 10px; /* Fügt horizontalen Abstand zwischen den Links hinzu */
}

/* Stil für die Trennzeichen zwischen den Links */
.footer-links a::after {
  content: " | "; /* Fügt das Trennzeichen (|) nach jedem Link ein */
  color: #888; /* Farbe des Trennzeichens */
}
/* ... Weitere allgemeine Styles ... */

@media screen and (max-width: 1024px) {
  .dashboard {
    flex-direction: column;
  }

  .navigation {
    width: 100%;
    margin-bottom: 20px;
  }

  .content {
    margin-left: 0;
  }

  .subcategory-due-counter,
  .subcategory-due-counter_zero {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Responsive-Anpassungen für Mobilgeräte */
@media screen and (max-width: 768px) {
  .dashboard {
    flex-direction: column;
  }

  .navigation {
    width: 100%;
    margin-bottom: 20px;
  }

  .content {
    margin-left: 0;
  }

  .subcategory-due-counter,
  .subcategory-due-counter_zero {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }
}