/* ---------- GLOBAL ---------- */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f1f8;
  color: #222;
}

/* ---------- NAVIGATION ---------- */
.navbar {
  background-color: #a971b3;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.navbar a {
  color: white;
  text-decoration: none;
  margin: 0 0.5rem;
  font-weight: bold;
}

.navbar a:hover {
  text-decoration: underline;
}

.logout-button {
  background-color: #5e3e9d;
  color: white;
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.logout-button:hover {
  background-color: #452f7a;
}

/* ---------- CONTAINER ---------- */
.container {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* ---------- HEADINGS ---------- */
h1, h2, h3 {
  color: #4b2d6d;
  margin-bottom: 1rem;
}

/* ---------- FORM ELEMENTS ---------- */
input, select {
  width: 100%;
  max-width: 700px;
  padding: 12px;
  margin: 10px auto;
  display: block;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

button {
  padding: 10px 20px;
  background-color: #7b4b9e;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
}

button:hover {
  background-color: #5f367b;
}

/* ---------- QUIZ ---------- */
#frage-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #5e4297;
  margin-bottom: 1rem;
}

.antwort-btn {
  display: block;
  margin: 12px auto;
  padding: 12px 24px;
  width: 90%;
  max-width: 600px;
  border: none;
  border-radius: 8px;
  background-color: #e3e3f7;
  color: #222;
  font-weight: bold;
  transition: background-color 0.3s;
}

.antwort-btn:hover {
  background-color: #d1cde0;
}

#pause-quiz-btn {
  display: none;
  margin-top: 1rem;
}

.fragen-scroll-wrapper {
  max-height: 500px;        /* Höhe der Scrollbox */
  overflow-y: auto;         /* vertikales Scrollen */
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.5rem;
  background-color: #fff;
  margin-top: 1rem;
}

/* Optionale Tabellenoptimierung */
.fragen-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.fragen-tabelle th,
.fragen-tabelle td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.fragen-tabelle th {
  background-color: #f2f2f2;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ---------- FRAGENLISTE (ADMIN) ---------- */
.fragen-tabelle-container {
  max-height: 400px;
  overflow-y: auto;
  margin-top: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.fragen-tabelle {
  width: 100%;
  border-collapse: collapse;
}

.fragen-tabelle th,
.fragen-tabelle td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

.fragen-tabelle th {
  background-color: #f0e6f9;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fragen-tabelle tr:nth-child(even) {
  background-color: #fafafa;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.action-buttons button {
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 4px;
}

.edit-btn {
  background-color: #ffc107;
  color: #000;
}

.edit-btn:hover {
  background-color: #e0a800;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
}

.delete-btn:hover {
  background-color: #c82333;
}

/* ---------- LINKS ---------- */
a {
  color: #6a1b9a;
}

a:hover {
  text-decoration: underline;
}

/* kleine, farbige Status-Icons */
.ui-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;vertical-align:-2px;margin-right:.35rem}
.ui-icon svg{width:100%;height:100%}
.ui-user{color:#5b3db3}
.ui-okay{color:#22a06b}
.ui-fail{color:#e05264}