/* Einstufungstest – Hauptstylesheet */

/* Formel-Rendering */
.question-body {
  font-size: 1.1rem;
  line-height: 1.8;
}

.katex-display {
  margin: 1rem 0;
  overflow-x: auto;
}

/* Antwortoptionen */
.list-group-item:hover {
  background-color: #f0f4ff;
  cursor: pointer;
}

.list-group-item input[type="radio"],
.list-group-item input[type="checkbox"] {
  min-width: 1.1rem;
  min-height: 1.1rem;
}

/* Fortschrittsbalken */
.progress {
  border-radius: 20px;
}

/* Monospace in Formularen */
.font-monospace {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.9rem;
}

/* ── Button-Stile: Variablen + direkte Properties als garantierter Fallback ──
   Bootstrap 5 setzt --bs-btn-bg:transparent als Standard in .btn.
   Ein browser- oder system-seitiges `background:transparent` (Kurzform)
   kann background-color zurücksetzen. Deshalb: CSS-Variablen für Bootstraps
   interne Logik UND direkte !important-Properties als Fallback.            */

.btn { cursor: pointer; }

/* ── Gefüllte Buttons ───────────────────────────────────────────────────── */

/* Gefüllte Buttons: jeder Pseudo-Zustand einzeln – keine Komma-Gruppen,
   damit ein unbekannter Selektor nicht die gesamte Regel ungültig macht.
   `background` (Kurzform) statt nur `background-color`, um Kurzform-
   Overrides aus Browser-Stylesheets abzufangen.                          */

.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #0d6efd; --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a53be;
  background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important;
}
.btn-primary:hover  { background: #0b5ed7 !important; border-color: #0a58ca !important; color: #fff !important; }
.btn-primary:focus  { background: #0b5ed7 !important; border-color: #0a58ca !important; color: #fff !important; }
.btn-primary:active { background: #0a58ca !important; border-color: #0a53be !important; color: #fff !important; }

.btn-secondary {
  --bs-btn-color: #fff; --bs-btn-bg: #6c757d; --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5c636a; --bs-btn-hover-border-color: #565e64;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #565e64; --bs-btn-active-border-color: #51585e;
  background: #6c757d !important; border-color: #6c757d !important; color: #fff !important;
}
.btn-secondary:hover  { background: #5c636a !important; border-color: #565e64 !important; color: #fff !important; }
.btn-secondary:focus  { background: #5c636a !important; border-color: #565e64 !important; color: #fff !important; }
.btn-secondary:active { background: #565e64 !important; border-color: #51585e !important; color: #fff !important; }

.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: #198754; --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #157347; --bs-btn-hover-border-color: #146c43;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #146c43; --bs-btn-active-border-color: #13653f;
  background: #198754 !important; border-color: #198754 !important; color: #fff !important;
}
.btn-success:hover  { background: #157347 !important; border-color: #146c43 !important; color: #fff !important; }
.btn-success:focus  { background: #157347 !important; border-color: #146c43 !important; color: #fff !important; }
.btn-success:active { background: #146c43 !important; border-color: #13653f !important; color: #fff !important; }

.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #dc3545; --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #bb2d3b; --bs-btn-hover-border-color: #b02a37;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #b02a37; --bs-btn-active-border-color: #a52834;
  background: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important;
}
.btn-danger:hover  { background: #bb2d3b !important; border-color: #b02a37 !important; color: #fff !important; }
.btn-danger:focus  { background: #bb2d3b !important; border-color: #b02a37 !important; color: #fff !important; }
.btn-danger:active { background: #b02a37 !important; border-color: #a52834 !important; color: #fff !important; }

/* ── Outline-Buttons ────────────────────────────────────────────────────── */

.btn-outline-primary {
  --bs-btn-color: #0d6efd; --bs-btn-border-color: #0d6efd;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0d6efd; --bs-btn-hover-border-color: #0d6efd;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #0d6efd; --bs-btn-active-border-color: #0d6efd;
  background: transparent !important; border-color: #0d6efd !important; color: #0d6efd !important;
}
.btn-outline-primary:hover  { background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }
.btn-outline-primary:focus  { background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }
.btn-outline-primary:active { background: #0d6efd !important; border-color: #0d6efd !important; color: #fff !important; }

.btn-outline-secondary {
  --bs-btn-color: #6c757d; --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #6c757d; --bs-btn-hover-border-color: #6c757d;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #6c757d; --bs-btn-active-border-color: #6c757d;
  background: transparent !important; border-color: #6c757d !important; color: #6c757d !important;
}
.btn-outline-secondary:hover  { background: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }
.btn-outline-secondary:focus  { background: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }
.btn-outline-secondary:active { background: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }

.btn-outline-success {
  --bs-btn-color: #198754; --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #198754; --bs-btn-hover-border-color: #198754;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #198754; --bs-btn-active-border-color: #198754;
  background: transparent !important; border-color: #198754 !important; color: #198754 !important;
}
.btn-outline-success:hover  { background: #198754 !important; border-color: #198754 !important; color: #fff !important; }
.btn-outline-success:focus  { background: #198754 !important; border-color: #198754 !important; color: #fff !important; }
.btn-outline-success:active { background: #198754 !important; border-color: #198754 !important; color: #fff !important; }

.btn-outline-danger {
  --bs-btn-color: #dc3545; --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #dc3545; --bs-btn-hover-border-color: #dc3545;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #dc3545; --bs-btn-active-border-color: #dc3545;
  background: transparent !important; border-color: #dc3545 !important; color: #dc3545 !important;
}
.btn-outline-danger:hover  { background: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }
.btn-outline-danger:focus  { background: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }
.btn-outline-danger:active { background: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }

.btn-outline-info {
  --bs-btn-color: #0dcaf0; --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000; --bs-btn-hover-bg: #0dcaf0; --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-active-color: #000; --bs-btn-active-bg: #0dcaf0; --bs-btn-active-border-color: #0dcaf0;
  background: transparent !important; border-color: #0dcaf0 !important; color: #0dcaf0 !important;
}
.btn-outline-info:hover  { background: #0dcaf0 !important; border-color: #0dcaf0 !important; color: #000 !important; }
.btn-outline-info:focus  { background: #0dcaf0 !important; border-color: #0dcaf0 !important; color: #000 !important; }
.btn-outline-info:active { background: #0dcaf0 !important; border-color: #0dcaf0 !important; color: #000 !important; }

.btn-outline-light {
  --bs-btn-color: #fff; --bs-btn-border-color: #fff;
  --bs-btn-hover-color: #0d6efd; --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #0d6efd; --bs-btn-active-bg: #fff; --bs-btn-active-border-color: #fff;
  background: transparent !important; border-color: #fff !important; color: #fff !important;
}
.btn-outline-light:hover  { background: #fff !important; border-color: #fff !important; color: #0d6efd !important; }
.btn-outline-light:focus  { background: #fff !important; border-color: #fff !important; color: #0d6efd !important; }
.btn-outline-light:active { background: #fff !important; border-color: #fff !important; color: #0d6efd !important; }

/* Mobile Optimierung */
@media (max-width: 576px) {
  .question-body {
    font-size: 1rem;
  }
  .katex {
    font-size: 1rem;
  }
}