:root {
  --exam-red: #b71c1c;
  --exam-red-dark: #7f0000;
  --exam-red-light: #ef5350;
  --bs-primary: #c62828;
  --bs-primary-rgb: 198, 40, 40;
  --bs-link-color: #c62828;
  --bs-link-hover-color: #8e0000;
  /* Bootstrap 5.3 rechnet die Linkfarbe aus diesen beiden, nicht aus den beiden darüber.
     Ohne sie bleiben alle Links auf dem Bootstrap-Blau stehen. */
  --bs-link-color-rgb: 198, 40, 40;
  --bs-link-hover-color-rgb: 142, 0, 0;

  /* Farben des Zeichens, abgeleitet aus den Wappen der sechs Gemeinden.
     Quelle: aachtal-logo/stand-06-schrift-final/STAND.md — dort nicht verändern. */
  --aachtal-gold: #f2c520;
  --aachtal-glut: #e4922a;
  --aachtal-feuer: #d42b22;
  --aachtal-feuer-tief: #a32219;
  --aachtal-strom: #2a7ba8;
  --aachtal-tiefe: #14496b;
  --aachtal-graphit: #1b2127;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Höhe der klebenden Kopfzeile. Sprungziele setzen ihren Abstand davon ab, damit sie beim
   Anspringen nicht darunter verschwinden. In Pixeln, weil die Grundschriftgröße bei 768 Pixeln
   wechselt, die Höhe der Leiste aber am Logo hängt. */
:root {
  --site-header-height: 96px;
}

@media (max-width: 991.98px) {
  :root {
    --site-header-height: 75px;
  }
}

html {
  scroll-padding-top: calc(var(--site-header-height) + 1rem);
}

body {
  background-color: #fafafa;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Verlauf von Weiß nach Rot. Der helle Teil reicht bis hinter den letzten Menüpunkt; erst der
   rechte Rand, auf dem nur noch Anmelden/Profil sitzt, trägt weiße Schrift. */
.navbar-exam {
  background: linear-gradient(90deg,
      #ffffff 0%,
      #ffffff 40%,
      #f7dedb 58%,
      #e0908a 70%,
      var(--exam-red) 82%,
      var(--exam-red-dark) 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  --bs-navbar-color: var(--aachtal-graphit);
  --bs-navbar-hover-color: var(--exam-red);
  --bs-navbar-active-color: var(--exam-red);
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.7);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-exam .nav-link {
  font-weight: 500;
}

.site-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.site-brand-logo {
  display: block;
  width: auto;
  height: 76px;
}

@media (max-width: 991.98px) {
  .site-brand-logo {
    height: 56px;
  }

  /* Aufgeklappt liegt das Menü über dem Verlauf — auf eigenem Grund bleibt jede Zeile lesbar. */
  .navbar-exam .navbar-collapse {
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
  }
}

@media (min-width: 992px) {
  .navbar-exam .navbar-nav-end {
    --bs-navbar-color: rgba(255, 255, 255, 0.92);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
  }

  /* Das Bild im Avatar ist selbst rot und ginge auf dem roten Rand sonst unter. */
  .navbar-exam .navbar-nav-end .user-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  }
}

.profile-nav-dropdown .dropdown-toggle::after {
  display: none;
}

.profile-nav-dropdown .profile-nav-toggle {
  display: inline-flex;
  line-height: 1;
  border-radius: 50%;
}

.profile-nav-dropdown .profile-nav-toggle:hover .user-avatar,
.profile-nav-dropdown .profile-nav-toggle:focus .user-avatar {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--exam-red);
  border-color: var(--exam-red);
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--exam-red-dark);
  border-color: var(--exam-red-dark);
}

.btn-outline-primary {
  color: var(--exam-red);
  border-color: var(--exam-red);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--exam-red);
  border-color: var(--exam-red);
  color: #fff;
}

/* Toggle buttons (btn-check) keep Bootstrap's own primary otherwise. */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
  background-color: var(--exam-red);
  border-color: var(--exam-red);
  color: #fff;
}

.btn-check:focus-visible + .btn-outline-primary {
  box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.35);
}

.text-primary {
  color: var(--exam-red) !important;
}

.display-6.text-primary,
.display-6.fw-bold.text-primary {
  color: var(--exam-red) !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(198, 40, 40, 0.45);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.card {
  border-color: #f0e0e0;
}

.bg-light {
  background-color: #fdf5f5 !important;
}

.translation-inline {
  display: inline;
  line-height: 1.5;
}

.btn-translate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-left: 0.2rem;
  vertical-align: middle;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  background: #fff;
  color: var(--exam-red);
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  cursor: pointer;
  transition: width 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
  line-height: 1;
}

.btn-translate:hover,
.btn-translate:focus-visible {
  width: auto;
  padding: 0.3rem 0.65rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border-color: var(--exam-red);
  outline: none;
}

.btn-translate-label {
  display: none;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.btn-translate:hover .btn-translate-label,
.btn-translate:focus-visible .btn-translate-label {
  display: inline;
}

.btn-translate-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.option-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0;
}

.option-check .form-check-input {
  margin-left: 0;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.option-check-content {
  flex: 1;
  min-width: 0;
}

.option-check-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
}

.option-check-label {
  display: inline;
  margin-bottom: 0;
  vertical-align: middle;
}

.exam-title {
  font-size: inherit;
  line-height: 1.3;
}

.tag-input {
  position: relative;
}

.tag-input-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f1f3f5;
  border: 1px solid #d0d0d0;
  font-size: 0.875rem;
  line-height: 1.4;
}

.tag-chip-remove {
  border: 0;
  background: transparent;
  color: #6c757d;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.tag-chip-remove:hover {
  color: var(--exam-red);
}

.tag-input-editor {
  position: relative;
}

.tag-input-suggestions {
  position: absolute;
  top: calc(100% + 0.15rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.user-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--exam-red);
  color: #fff;
  font-weight: 600;
  line-height: 1;
}

.user-avatar.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.7rem;
}

.user-avatar.avatar-md {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.95rem;
}

.user-avatar.avatar-lg {
  width: 5rem;
  height: 5rem;
  font-size: 1.35rem;
}

.user-avatar-initials {
  user-select: none;
}

.user-avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.metadata-checklist {
  max-height: 220px;
  overflow-y: auto;
}

.metadata-checklist .form-check {
  margin-bottom: 0.35rem;
}

.row-actions {
  white-space: nowrap;
}

.row-action-icon {
  line-height: 1;
  border: none;
  text-decoration: none;
}

.row-action-icon:hover,
.row-action-icon:focus {
  opacity: 0.85;
}

.dropdown-form {
  margin: 0;
}

.dropdown-form .dropdown-item {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
}

.exam-save-status.is-saving {
  color: var(--bs-secondary);
}

.exam-save-status.is-saved {
  color: var(--bs-success);
}

.session-calendar {
  --calendar-border: var(--bs-border-color, #dee2e6);
}

.session-calendar-weekdays,
.session-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.session-calendar-weekday {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: var(--bs-secondary);
  padding-bottom: 0.25rem;
}

.session-calendar-cell {
  min-height: 5.5rem;
  border: 1px solid var(--calendar-border);
  border-radius: 0.375rem;
  padding: 0.35rem;
  background: #fff;
}

.session-calendar-cell-empty {
  background: var(--bs-light);
  border-style: dashed;
}

/* Die Tage aus dem Vor- und Folgemonat füllen nur die Wochen auf. */
.session-calendar-cell-outside {
  background: var(--bs-light);
  color: var(--bs-secondary);
}

.session-calendar-cell.has-sessions {
  border-color: var(--exam-red, #c41e3a);
}

.session-calendar-day {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.session-calendar-pill {
  display: block;
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 0.15rem 0.35rem;
  margin-bottom: 0.2rem;
  border-radius: 0.25rem;
  background: rgba(196, 30, 58, 0.1);
  color: inherit;
  text-decoration: none;
}

.session-calendar-pill:hover {
  background: rgba(196, 30, 58, 0.2);
  text-decoration: none;
}

/* Der öffentliche Kalender steht in der schmaleren Spalte und führt nirgendwo hin. */
.course-calendar-month .session-calendar-cell {
  min-height: 4.25rem;
}

.course-calendar .session-calendar-pill {
  cursor: default;
}

.course-calendar .session-calendar-pill:hover {
  background: rgba(196, 30, 58, 0.1);
}

/* Auf dem Telefon passt keine Uhrzeit mehr in eine Zelle — dort bleibt ein Balken als Merker,
   die Zeiten stehen in der Listenansicht. */
@media (max-width: 575.98px) {
  .course-calendar .session-calendar-pill {
    height: 0.35rem;
    padding: 0;
    font-size: 0;
    border-radius: 999px;
    background: var(--exam-red, #c41e3a);
  }

  .course-calendar-month .session-calendar-cell {
    min-height: 3rem;
    padding: 0.2rem;
  }
}

/* ---- Öffentlicher Bereich: Aufmacher, zwei Spalten, Seitenspalte ---- */

/* Das Kopfbild läuft über die volle Breite und steht auf Weiß — der Seitengrund ist es nicht,
   deshalb bringt der Aufmacher seine eigene Fläche mit. */
.landing-hero {
  position: relative;
  background: #fff;
}

.landing-hero img {
  display: block;
  width: 100%;
  height: auto;
}

.landing-intro-title {
  margin-bottom: 0.5rem;
  color: var(--aachtal-graphit);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
}

.landing-intro-lead {
  margin-bottom: 1rem;
  color: #495057;
  font-size: 0.95rem;
}

.landing-intro-lead:last-child {
  margin-bottom: 0;
}

.landing-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.75rem;
}

.public-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.aside-block {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.aside-heading {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--exam-red);
  color: var(--aachtal-graphit);
  font-size: 1rem;
  font-weight: 700;
}

.aside-empty {
  color: #6c757d;
  font-size: 0.9rem;
}

#upcoming-courses {
  scroll-margin-top: 1.5rem;
}

.course-list-item {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.course-list-item:first-child {
  border-top: 0;
}

/* Der Eintrag ist als Ganzes die Schaltfläche; der Innenabstand sitzt deshalb im Link und
   nicht im Listenpunkt, sonst bliebe ein toter Rand um die Trefferfläche. */
.course-list-link {
  display: flex;
  gap: 0.85rem;
  margin: 0 -0.6rem;
  padding: 0.75rem 0.6rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.course-list-link:hover,
.course-list-link:focus-visible {
  background: rgba(196, 30, 58, 0.06);
  color: inherit;
}

.course-list-link:hover .course-list-name,
.course-list-link:focus-visible .course-list-name {
  color: var(--exam-red);
  text-decoration: underline;
}

.course-list-date {
  flex: 0 0 2.9rem;
  height: fit-content;
  padding: 0.3rem 0;
  border-radius: 0.5rem;
  background: rgba(196, 30, 58, 0.09);
  color: var(--exam-red-dark);
  text-align: center;
  line-height: 1.1;
}

.course-list-day {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
}

.course-list-month {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.course-list-body {
  min-width: 0;
}

.course-list-name {
  display: block;
  margin-top: 0.3rem;
  color: var(--aachtal-graphit);
  font-weight: 600;
}

.course-list-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: #6c757d;
}

.course-list-status {
  display: inline-block;
  margin-top: 0.5rem;
}

.course-list-proofs {
  display: inline-block;
  margin-bottom: 0.75rem;
  margin-left: 3.75rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.landing-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}

.landing-steps li:last-child {
  margin-bottom: 0;
}

.landing-step-number {
  flex: 0 0 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--exam-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.course-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  transition: box-shadow 0.15s ease;
}

.course-card:hover {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}

.course-card-date {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--exam-red-dark);
  white-space: nowrap;
}

.course-card-description {
  margin-bottom: 1rem;
  color: #495057;
  font-size: 0.9rem;
  white-space: pre-line;
}

.course-card-type {
  background: rgba(196, 30, 58, 0.12);
  color: var(--exam-red-dark);
  font-weight: 600;
}

.course-card-meta {
  margin: 0;
  font-size: 0.875rem;
}

.course-card-meta > div {
  display: flex;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.course-card-meta dt {
  flex: 0 0 7.5rem;
  font-weight: 500;
  color: #6c757d;
}

.course-card-meta dd {
  margin: 0;
}

/* Angaben, Voraussetzungen und Hinweise sind je eine eigene Karte; zusammengehalten werden sie
   vom Abstand dazwischen, nicht von einem gemeinsamen Rahmen. */
.course-summary {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 1rem;
}

.course-summary-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
}

.registration-success-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
  font-size: 1.75rem;
  line-height: 3.5rem;
}

@media (max-width: 767.98px) {
  .course-card-meta dt {
    flex-basis: 6rem;
  }
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #6c757d;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.registration-steps {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.registration-steps li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9aa0a6;
}

.registration-steps li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.8rem;
  font-weight: 600;
}

.registration-steps li.is-current {
  color: var(--exam-red-dark);
  font-weight: 600;
}

.registration-steps li.is-current span {
  background: var(--exam-red-dark);
  border-color: var(--exam-red-dark);
  color: #fff;
}

.registration-steps li.is-done {
  color: #198754;
}

.setup-body {
  background: linear-gradient(160deg, #fdf5f5 0%, #fafafa 60%);
  min-height: 100vh;
}

.setup-shell {
  display: flex;
  justify-content: center;
  padding: 2.5rem 1rem 4rem;
}

.setup-card {
  width: 100%;
  max-width: 40rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.75rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.06);
  padding: 2rem;
}

.setup-card .landing-eyebrow {
  color: var(--exam-red-dark);
  opacity: 1;
}

@media (max-width: 575.98px) {
  .setup-card {
    padding: 1.25rem;
  }
}

.course-notes {
  background: #fff8e1;
  white-space: pre-line;
}

.course-summary-card .card-body p.small {
  white-space: pre-line;
}

.site-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  padding: 1.25rem 0;
}

.site-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.site-footer-name {
  color: var(--aachtal-graphit);
  font-weight: 600;
  font-size: 0.9rem;
}

.site-footer-mark {
  width: auto;
  height: 34px;
}

.site-footer a {
  color: #6c757d;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--exam-red);
  text-decoration: underline;
}

.content-page {
  max-width: 48rem;
}

.content-body h2 {
  font-size: 1.35rem;
  margin-top: 1.75rem;
}

.content-body h3 {
  font-size: 1.15rem;
  margin-top: 1.25rem;
}

.content-body > :first-child {
  margin-top: 0;
}

.content-body table {
  width: 100%;
  margin-bottom: 1rem;
}

.content-body table th,
.content-body table td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.4rem 0.6rem;
}

.news-date {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--exam-red-dark);
}

.news-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.news-item:first-child {
  border-top: 0;
}

/* Wie bei den Terminen ist der ganze Eintrag die Schaltfläche, nicht nur die Überschrift. */
.news-item-link {
  display: block;
  margin: 0 -0.75rem;
  padding: 1.1rem 0.75rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.news-item-link:hover,
.news-item-link:focus-visible {
  background: rgba(196, 30, 58, 0.06);
  color: inherit;
}

.news-item-link:hover .news-item-title,
.news-item-link:focus-visible .news-item-title {
  color: var(--exam-red);
  text-decoration: underline;
}

.news-item-title {
  margin: 0.25rem 0 0.5rem;
  color: var(--aachtal-graphit);
  font-size: 1.2rem;
  font-weight: 600;
}

.news-item-teaser {
  color: #495057;
}

.news-teaser-item {
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.news-teaser-item:first-child {
  border-top: 0;
}

.news-teaser-link {
  display: block;
  margin: 0 -0.6rem;
  padding: 0.7rem 0.6rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.news-teaser-link:hover,
.news-teaser-link:focus-visible {
  background: rgba(196, 30, 58, 0.06);
  color: inherit;
}

.news-teaser-title {
  display: block;
  margin-top: 0.2rem;
  color: var(--aachtal-graphit);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
}

.news-teaser-link:hover .news-teaser-title,
.news-teaser-link:focus-visible .news-teaser-title {
  color: var(--exam-red);
  text-decoration: underline;
}

.aside-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.9rem;
  color: var(--exam-red);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.aside-more::after {
  content: "›";
  font-weight: 700;
  transition: transform 0.15s ease;
}

.aside-more:hover,
.aside-more:focus-visible {
  color: var(--exam-red-dark);
  text-decoration: underline;
}

.aside-more:hover::after,
.aside-more:focus-visible::after {
  transform: translateX(0.15rem);
}

.requirement-explanation summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--exam-red);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.requirement-explanation summary::-webkit-details-marker {
  display: none;
}

.requirement-explanation summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s ease;
  font-weight: 700;
}

.requirement-explanation[open] summary::before {
  transform: rotate(90deg);
}

.requirement-explanation p {
  font-size: 0.875rem;
  color: #495057;
  white-space: pre-line;
  padding-left: 0.9rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1080;
  padding: 0.6rem 1rem;
  background: #fff;
  color: var(--exam-red-dark);
  font-weight: 600;
  border-radius: 0 0 0.375rem 0;
}

.skip-link:focus {
  left: 0;
}

/* Touch targets on phones: Bootstrap's small buttons are below the comfortable minimum. */
@media (max-width: 767.98px) {
  .row-actions .btn,
  .dropdown-item {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
  }

  .dropdown-item {
    display: flex;
  }

  .navbar-nav .nav-link,
  .navbar-nav .dropdown-toggle {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

@media (max-width: 575.98px) {
  /* Three options side by side leave no room for their labels. */
  .signin-mode-group {
    flex-direction: column;
    width: 100%;
  }

  .signin-mode-group > .btn {
    width: 100%;
    border-radius: 0.375rem !important;
  }

  .signin-mode-group > .btn + .btn,
  .signin-mode-group > .btn-check + .btn {
    margin-top: 0.35rem;
  }
}

@media (max-width: 767.98px) {
  /* Seven columns are unreadable on a phone; the session list below carries the same content. */
  .registration-steps {
    gap: 1rem;
    font-size: 0.85rem;
  }

  .course-card-meta > div {
    flex-direction: column;
    gap: 0;
  }

  .course-card-meta dt {
    flex-basis: auto;
    font-size: 0.8rem;
  }
}

.attendance-row .form-check {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .attendance-row {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

.exam-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--exam-red-dark);
  margin-bottom: 0;
}

.exam-countdown.is-urgent {
  color: #b30000;
}

.exam-countdown.is-over {
  color: #6c757d;
  font-weight: 500;
}

.exam-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  font-size: 1.05rem;
}

.exam-verdict.is-passed {
  background: rgba(25, 135, 84, 0.12);
  color: #146c43;
}

.exam-verdict.is-failed {
  background: rgba(179, 0, 0, 0.1);
  color: #b30000;
}

.exam-verdict-mark {
  font-size: 1.3rem;
  line-height: 1;
}

.course-requirement-list li + li,
.course-session-list li + li {
  margin-top: 0.6rem;
}

.course-session-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  font-size: 0.9rem;
}

.course-session-list li:first-child {
  border-top: 0;
}

.course-session-date {
  min-width: 11rem;
  font-weight: 600;
  color: var(--aachtal-graphit);
}

.course-session-time {
  min-width: 7rem;
  font-variant-numeric: tabular-nums;
}

.course-session-venue {
  color: #6c757d;
}

.course-notes-text {
  white-space: pre-line;
}

.answer-solution {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #198754;
  border-radius: 0.25rem;
  background: rgba(25, 135, 84, 0.07);
  font-size: 0.92rem;
}

.answer-solution-label {
  display: block;
  margin-bottom: 0.15rem;
  color: #146c43;
  font-weight: 600;
  font-size: 0.8rem;
}

/* ---- Auswertung der Bewertungen ---- */

.analytics-tile-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary);
  margin-bottom: 0.25rem;
}

.analytics-tile-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.analytics-tile-unit {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--bs-secondary);
}

.review-score {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grade-distribution-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.85rem;
}

.grade-distribution-label,
.grade-distribution-count {
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary);
}

/* Die Notenzahlen unter den Namen: der Name sagt, was gemeint ist, die Spanne, woher sie kommt. */
.grade-distribution-range {
  display: block;
  font-size: 0.72rem;
  opacity: 0.7;
}

.grade-distribution-count {
  text-align: right;
}

.grade-distribution-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
  height: 1.1rem;
  overflow: hidden;
}

.grade-distribution-bar {
  display: block;
  height: 100%;
  min-width: 0.15rem;
  border-radius: 0.25rem;
  background: var(--exam-red, #b71c1c);
}

/* Durchgefallen hebt sich ab, sonst liest man die Verteilung als eine Fläche. */
.grade-distribution-bar.is-fail {
  background: #6c757d;
}

.question-difficulty-text {
  display: inline-block;
  max-width: 32rem;
  vertical-align: middle;
}

.question-success {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.question-success.is-hard {
  color: #b30000;
}

.question-success.is-easy {
  color: #198754;
}

/* ---- Letzte Änderungen ---- */

.changelog-day + .changelog-day {
  margin-top: 2rem;
}

.changelog-date {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 1rem;
}

.changelog-entry + .changelog-entry {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.changelog-subject {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.changelog-body {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.changelog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0;
  font-size: 0.8rem;
  color: var(--bs-secondary);
}

.changelog-meta code {
  color: var(--exam-red, #b71c1c);
  background: rgba(183, 28, 28, 0.07);
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
}

/* ---- Punktestand beim Bewerten ---- */

.review-score-bar {
  border-color: rgba(183, 28, 28, 0.25);
  background: #fdf5f5;
}

.review-score-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bs-secondary);
}

.review-score-value {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.review-score-max {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--bs-secondary);
}

/* Aktionen der Bewertungsseite: eine Spalte, alle Knöpfe gleich breit und gleich hoch.
   Als Raster mit gleich hohen Zeilen — eine lange Beschriftung bricht um und machte den Knopf
   sonst höher als seine Nachbarn. */
.review-actions {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 0.5rem;
  /* Breit genug, dass die längste Beschriftung auf eine Zeile passt — sonst wäre jeder Knopf so
     hoch wie der umbrechende. */
  min-width: 21rem;
  max-width: 100%;
}

.review-actions form {
  margin: 0;
}

.review-actions .btn {
  width: 100%;
  height: 100%;
}

/* Die Bewertung einer Textfrage hebt sich vom Vorschlag darüber ab. */
.review-grading {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Anklickbare Tabellenzeilen. Der Link in der Zeile trägt weiterhin das Ziel; die Fläche daneben
   folgt ihm nur nach. */
tr[data-row-href] {
  cursor: pointer;
}

.row-link {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}

tr[data-row-href]:hover .row-link,
.row-link:focus-visible {
  color: var(--exam-red);
  text-decoration: underline;
}

/* Notenname und Bestehensgrenze stehen als Beiwerk neben ihrer Zahl. */
.review-score-note-name {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--bs-secondary);
}

/* ---- Einklappbare Fragen beim Bewerten ---- */

.review-question-list > summary,
.review-question > summary,
.exam-answer > summary {
  cursor: pointer;
  list-style: none;
}

.review-question-list > summary::-webkit-details-marker,
.review-question > summary::-webkit-details-marker,
.exam-answer > summary::-webkit-details-marker {
  display: none;
}

/* Eigenes Dreieck, das sich beim Aufklappen dreht — das eingebaute sitzt je nach Browser anders. */
.review-question-list > summary::before,
.review-question > summary::before,
.exam-answer > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--bs-secondary);
  transition: transform 0.15s ease;
}

.review-question-list[open] > summary::before,
.review-question[open] > summary::before,
.exam-answer[open] > summary::before {
  transform: rotate(90deg);
}

.review-question-list-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 1rem;
}

.review-question-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.review-question-summary,
.exam-answer-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.review-question-index,
.exam-answer-index {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f3f5;
  font-size: 0.8rem;
  font-weight: 600;
}

.review-question-title,
.exam-answer-title {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

/* Eine noch unbewertete Frage soll auch zugeklappt ins Auge fallen. */
.review-question[data-graded="false"] {
  border-color: rgba(255, 193, 7, 0.65);
}

/* Der Vorschlag steht unter einem schmalen Zahlenfeld — umbrechen soll er dort nicht. */
.use-suggested-btn {
  white-space: nowrap;
}

/* Punktzahl einer Frage: auf einen Blick erkennbar, ob sie gesessen hat. */
.question-score {
  font-variant-numeric: tabular-nums;
}

.question-score.is-full {
  background: rgba(25, 135, 84, 0.14);
  color: #146c43;
}

/* Teilpunkte sind nicht richtig, aber auch nicht nichts — heller als die glatte Null. */
.question-score.is-partial {
  background: rgba(183, 28, 28, 0.08);
  color: #b30000;
}

.question-score.is-zero {
  background: rgba(183, 28, 28, 0.18);
  color: #b30000;
}

.question-score.is-open {
  background: #f1f3f5;
  color: var(--bs-secondary);
}

/* ---- Sammelaktionen in der Abgabenliste ---- */

.review-select-cell {
  width: 2.5rem;
}

.review-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(183, 28, 28, 0.25);
  border-radius: 0.5rem;
  background: #fdf5f5;
}

.review-bulk-count {
  font-weight: 600;
  margin-right: 0.5rem;
}

/* Archivierte stehen nur in der Liste, wenn man sie verlangt — dann aber zurückgenommen. */
.review-row-archived {
  opacity: 0.65;
}

/* Die Filterkarte über einer Liste — überall gleich aufgebaut: Suche, zwei Auswahlfelder, Knopf. */
.list-filter .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-secondary);
}

/* Dateibrowser: Symbol und Name gehören zusammen und sollen nicht umbrechen. */
.doc-icon {
  display: inline-block;
  width: 1.5rem;
  text-align: center;
}

/* Der Baum: verschachtelte Listen ohne Aufzählungszeichen, jede Ebene eine Stufe weiter rechts. */
.doc-tree,
.doc-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.doc-children {
  padding-left: 1.5rem;
}

.doc-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.doc-line:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Markiert wird durch Anklicken der Zeile — das muss man ihr auch ansehen. */
.doc-line:has(.doc-check:checked) {
  background-color: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.12));
}

.doc-link {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.doc-link:hover {
  text-decoration: underline;
}

/* Größe, Datum und Sichtbarkeit stehen am rechten Rand beieinander. */
.doc-meta,
.doc-audience {
  margin-left: auto;
  white-space: nowrap;
}

.doc-meta + .doc-audience {
  margin-left: 0;
}

.doc-expander {
  flex: 0 0 auto;
  width: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--bs-secondary-color, #6c757d);
  line-height: 1;
}

.doc-caret {
  display: inline-block;
  font-size: 1.1rem;
  transition: transform 0.15s ease-in-out;
}

[aria-expanded="true"] > .doc-caret {
  transform: rotate(90deg);
}

/* Hält die Namen in einer Flucht, auch wo es nichts aufzuklappen gibt. */
.doc-expander-empty {
  visibility: hidden;
}

/* Die Angaben zum Gewählten: Begriff und Wert nebeneinander. */
.doc-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
}

.doc-facts dt {
  font-weight: 600;
  color: var(--bs-secondary-color, #6c757d);
}

.doc-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ---- „Für dich": der nächste eigene Termin in der Seitenspalte ---- */

.next-session-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.next-session {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

/* Datum und Uhrzeit als schmale Spalte, damit die Zeilen untereinander fluchten. */
.next-session-date {
  flex: 0 0 3.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.25rem 0;
  border-radius: 0.4rem;
  background: #f1f3f5;
  line-height: 1.2;
}

.next-session-day {
  font-weight: 700;
  font-size: 0.9rem;
}

.next-session-time {
  font-size: 0.75rem;
  color: var(--bs-secondary);
}

.next-session-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.next-session-course {
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Wozu jemand eingeteilt ist — die Rolle steht über dem Ort, sie entscheidet die Vorbereitung. */
.next-session-role {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--exam-red, #7f0000);
}

.next-session-topic,
.next-session-venue {
  font-size: 0.85rem;
  color: var(--bs-secondary);
  overflow-wrap: anywhere;
}

/* Der nächste Termin auf einer Lehrgangskarte — die Zeile, auf die zuerst geschaut wird. */
.course-next-session {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--exam-red, #7f0000);
  background: rgba(0, 0, 0, 0.03);
  border-radius: 0 0.25rem 0.25rem 0;
}

.course-next-session-label {
  display: block;
  font-size: 0.8rem;
  color: var(--bs-secondary);
}

/* ---- Eigene Anwesenheit am Lehrgang ---- */

.attendance-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.attendance-entry {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-left: 3px solid transparent;
  border-radius: 0 0.25rem 0.25rem 0;
  background: rgba(0, 0, 0, 0.02);
}

.attendance-entry.is-present {
  border-left-color: #198754;
}

/* Entschuldigt ist kein Versäumnis, aber auch keine Anwesenheit. */
.attendance-entry.is-excused {
  border-left-color: #0dcaf0;
}

.attendance-entry.is-absent {
  border-left-color: #b30000;
}

.attendance-date {
  flex: 0 0 5rem;
  font-variant-numeric: tabular-nums;
}

.attendance-topic {
  flex: 1;
  min-width: 0;
  color: var(--bs-secondary);
  overflow-wrap: anywhere;
}

.attendance-status {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Die Unterlagen am Lehrgang — dieselbe Zeilenform wie im Dokumentenbaum. */
.course-document-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.course-document {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.course-document a {
  text-decoration: none;
  overflow-wrap: anywhere;
}

.course-document a:hover {
  text-decoration: underline;
}

/* Zwischenüberschrift in der Seitenspalte, wenn ein Kasten zwei Teile hat. */
.aside-subheading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bs-secondary);
  margin-bottom: 0.5rem;
}

/* ---- Anwesenheit über den ganzen Lehrgang ---- */

.attendance-matrix th {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.attendance-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
}

.attendance-mark.is-present {
  background: rgba(25, 135, 84, 0.14);
  color: #146c43;
}

.attendance-mark.is-excused {
  background: rgba(13, 202, 240, 0.18);
  color: #087990;
}

.attendance-mark.is-absent {
  background: rgba(183, 28, 28, 0.16);
  color: #b30000;
}