: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;
}

/* Keine eigene Grundschriftgröße: Es gilt, was der Browser vorgibt — 16px, und mehr, wenn
   jemand seine Schrift größer gestellt hat. Vorher stand hier 14px für Handys und 16px ab 768
   Pixeln, also ausgerechnet dort die kleinere Schrift, wo ohnehin am schlechtesten zu lesen ist.
   Dazu hängen Eingabefelder an dieser Größe, und unter 16px zoomt iOS beim Antippen von sich aus
   hinein — die Seite springt, und man zoomt von Hand zurück. Zum Vergleich gemessen: Wikipedia,
   Spiegel und die Bootstrap-Dokumentation setzen auf dem Handy alle 16px. */

/* Höhe der klebenden Kopfzeile. Sprungziele setzen ihren Abstand davon ab, damit sie beim
   Anspringen nicht darunter verschwinden. In Pixeln, weil die Höhe der Leiste 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;
}

/* Zwischen 992 und 1199 px steht die Leiste schon aufgeklappt, hat aber wenig Platz: engere
   Abstände, ein schmaleres Logo und keine zweizeiligen Einträge — sonst ragte die Suche über den
   rechten Rand, seit die Dateien einen eigenen Punkt haben. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-exam {
    --bs-navbar-nav-link-padding-x: 0.35rem;
  }

  .navbar-exam .nav-link {
    white-space: nowrap;
  }

  .navbar-exam .site-brand-logo {
    width: 170px;
    height: auto;
  }

  .navbar-exam .site-search {
    margin-left: 0.25rem !important;
  }
}

/* Wo man steht. Die Farbe allein reicht nicht — sie ist dieselbe wie beim Überfahren, und auf
   dem roten Rand rechts gibt es sie gar nicht. Der Balken darunter trägt die Aussage. */
.navbar-exam .nav-link.active {
  font-weight: 600;
  position: relative;
}

.navbar-exam .nav-link.active::before {
  content: "";
  position: absolute;
  left: var(--bs-nav-link-padding-x, 0.5rem);
  right: var(--bs-nav-link-padding-x, 0.5rem);
  bottom: 0.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* Im aufgeklappten Menü sitzt kein Balken, sondern ein Strich am linken Rand — dort steht
   jeder Eintrag in einer Spalte, und ein Balken darunter läse sich als Trennlinie. */
.dropdown-menu .dropdown-item.active {
  background: rgba(127, 0, 0, 0.07);
  color: var(--exam-red);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--exam-red);
}

/* Kopf- und Fußbild eines Briefpapiers sind oft breite, flache Bänder und häufig transparent.
   Das Karomuster darunter zeigt, wo das Bild aufhört und wo Papier durchscheint. */
.letterhead-preview {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.25rem;
  padding: 0.4rem;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
    linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.05) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.letterhead-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 12rem;
  object-fit: contain;
}

/* In der Liste reicht ein Streifen, an dem man das Papier wiedererkennt. */
.letterhead-thumb {
  display: block;
  width: 100%;
  max-width: 14rem;
  height: auto;
  max-height: 2.5rem;
  object-fit: contain;
  object-position: left center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.2rem;
  background: #fff;
}

.letterhead-preview figcaption {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: var(--aachtal-graphit, #6c757d);
  /* Auf dem Karomuster wäre die Zeile schlecht zu lesen. */
  background: #fff;
  display: inline-block;
  padding: 0 0.3rem;
  border-radius: 0.15rem;
}

/* Die Suche sitzt zwischen den Arbeitsbereichen und dem Profil. Eingeklappt ist sie nur eine Lupe:
   Ein dauerhaft offenes Feld nahm Breite weg, die die Menüpunkte besser gebrauchen. */
.site-search {
  display: flex;
  align-items: center;
  /* Umgekehrte Richtung: Die Lupe steht am rechten Rand und bleibt dort, das Feld wächst nach
     links in den freien Platz. Andersherum schöbe das Aufklappen über die Blattkante hinaus —
     und beschnitten würde das Feld, nicht die Lupe, weil hier von rechts nach links gefüllt wird. */
  flex-direction: row-reverse;
  /* Die Breite trägt das Formular, nicht das Feld darin: Ließe man sie sich aus dem Inhalt ergeben,
     hinge die Breite des Feldes am Formular und die des Formulars am Feld — und beide blieben klein.
     Gesetzt wird sie über die Flex-Basis; als Flex-Element richtet sich das Formular danach und
     nicht nach `width`. Eingeklappt ist das genau die Lupe, der Rest liegt hinter overflow. */
  flex: 0 0 2rem;
  width: 2rem;
  overflow: hidden;
  transition: flex-basis 0.18s ease, width 0.18s ease;
}

.site-search.is-open {
  flex-basis: 16.5rem;
  width: 16.5rem;
}

.site-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  /* Dieselben Farben wie die Menüpunkte daneben — geerbt wird hier nichts Brauchbares, weil die
     Leiste ihre Schriftfarbe auf den Links trägt und nicht auf allem, was in ihr steht. */
  color: var(--bs-navbar-color, #fff);
  cursor: pointer;
}

.site-search-toggle:hover,
.site-search-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  color: var(--bs-navbar-hover-color, #fff);
}

.site-search-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

/* Eingeklappt nimmt das Feld keine Breite ein — und keinen Tabstopp: Ein unsichtbares Feld, in dem
   die Tastatur landet, wäre nirgends. Den Tabindex setzt das Skript, hier bleibt der Zeiger weg. */
.site-search .form-control {
  flex: 1 1 auto;
  min-width: 0;
  margin-right: 0.35rem;
  opacity: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.12);
  transition: opacity 0.18s ease;
}

.site-search.is-open .form-control {
  opacity: 1;
  pointer-events: auto;
}

.site-search .form-control:focus {
  background: #fff;
  border-color: var(--exam-red);
  box-shadow: 0 0 0 0.2rem rgba(183, 28, 28, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .site-search,
  .site-search .form-control {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  /* Aufgeklappt steht das Feld über den Menüpunkten und darf die volle Breite nehmen. */
  .site-search {
    margin-bottom: 0.6rem;
  }

  .site-search.is-open {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Die Überschriften in den Einstellungen tragen die Gliederung, die vorher namenlose
   Trennlinien andeuten mussten — sie sollen als Beschriftung lesbar sein, nicht als Eintrag. */
.dropdown-menu .dropdown-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 0.15rem;
}

.dropdown-menu .dropdown-header:not(:first-child) {
  margin-top: 0.3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.55rem;
}

.site-breadcrumb {
  margin-bottom: 1rem;
}

.site-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;

  /* Der Weg hierher ist Beiwerk, kein Text: Er steht kleiner und blasser als das, was folgt.
     Vorher stand hier --aachtal-graphit — fast Schwarz, der graue Ersatzwert dahinter kam nie zum
     Zug —, und die Kette las sich wie eine erste Zeile des Inhalts. */
  color: #6c757d;
}

.site-breadcrumb li {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

/* Das Trennzeichen gehört zum Weg, nicht zur Station — deshalb vor jedem Glied außer dem ersten. */
.site-breadcrumb li + li::before {
  content: "›";
  padding: 0 0.45rem;
  color: var(--aachtal-graphit, #6c757d);
  opacity: 0.6;
}

.site-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

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

/* Die Seite, auf der man steht: kein Verweis, und das dunkelste Glied der Kette — aber nicht fett.
   Fettdruck machte ausgerechnet die Station wichtig, die ohnehin als Überschrift darunter steht. */
.site-breadcrumb [aria-current="page"] {
  color: #495057;
}

.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) {
  /* Die Suche steht neben dieser Gruppe, also auf demselben roten Grund — und braucht dieselben
     Farben. Eingeklappt liegt das Menü dagegen auf Weiß, dort bleibt es bei der dunklen Schrift. */
  .navbar-exam .navbar-nav-end,
  .navbar-exam .site-search {
    --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;
}

.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;
}

/* Markdown in einer Karte oder Seitenspalte. Kein pre-line mehr: Die Umbrüche kommen jetzt aus
   dem Markdown selbst, und beides zusammen ergäbe doppelte Abstände. Überschriften bleiben klein,
   weil eine h2 in einer Lehrgangskarte größer wäre als deren eigene Überschrift. */
.markdown-tight > :last-child {
  margin-bottom: 0;
}

.markdown-tight > :first-child {
  margin-top: 0;
}

.markdown-tight p {
  margin-bottom: 0.5rem;
}

.markdown-tight h1,
.markdown-tight h2,
.markdown-tight h3,
.markdown-tight h4 {
  font-size: 1em;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

.markdown-tight ul,
.markdown-tight ol {
  margin-bottom: 0.5rem;
  padding-left: 1.25rem;
}

.markdown-tight table {
  width: 100%;
  margin-bottom: 0.5rem;
}

.markdown-tight table th,
.markdown-tight table td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.25rem 0.4rem;
}

.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;
}

.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;
  padding-left: 0.9rem;
}

/* Testumgebung: gestreift wie eine Absperrung, damit er sich von keinem Hinweis der Anwendung
   verwechseln lässt. Sitzt in der Kopfleiste und bleibt deshalb beim Scrollen stehen. */
.test-instance-banner {
  padding: 0.35rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #1a1a1a;
  background: repeating-linear-gradient(
    -45deg,
    #ffcc00 0,
    #ffcc00 14px,
    #ffe066 14px,
    #ffe066 28px);
  border-bottom: 3px solid #1a1a1a;
}

.test-instance-banner strong {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.test-instance-note::before {
  content: "·";
  margin: 0 0.5rem;
}

.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;
}

.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);
}

/* ---- Frage und Antworten ---- */

/* Eine Frage trägt die Antworten unter ihr. Steht sie im selben Gewicht wie sie, liest sich die
   Karte als eine Reihe gleichrangiger Zeilen, und das Auge muss jedes Mal von vorn suchen, wo
   die nächste Frage anfängt. Auf dem Handy fällt das zuerst auf: Dort sinkt die Grundschrift auf
   14px, und die Einrückung, die am Schreibtisch noch trägt, ist nur noch ein halber Buchstabe. */
.question-text {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.45;
}

/* Wo Antworten unter einer Frage stehen, sagt ein schmaler Strich, dass sie zu ihr gehören —
   deutlicher als eine Einrückung und ruhiger als ein Kasten. */
.question-options {
  margin-left: 0.125rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(27, 33, 39, 0.12);
}

/* Jede Antwort bekommt dasselbe Polster, damit die richtige ihren Grund bekommen kann, ohne
   dass ihre Zeile gegen die anderen verrutscht. */
.question-options > li {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

/* Dasselbe Grün, auf dem auch die Musterlösung liegt. Die Auszeichnung steht hinter der Antwort:
   davor schob sie den Text ein, und das Auge fand den Anfang der Zeile nicht mehr dort, wo er
   bei allen anderen steht. */
.question-options > li.is-correct {
  background: rgba(25, 135, 84, 0.07);
}

/* ---- Einklappbare Fragenkarte ---- */
/* Dieselbe Karte beim Bewerten und in der Auswertung: eine Frage, die sich aufklappen
   lässt, mit ihrer Nummer links und einer Kennzahl rechts. Zwei Namen für dasselbe Ding
   hiessen, jede Regel doppelt zu pflegen. */
.review-question-list > summary,
.question-card > summary {
  cursor: pointer;
  list-style: none;
}

.review-question-list > summary::-webkit-details-marker,
.question-card > 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,
.question-card > 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,
.question-card[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;
}

.question-card-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.question-card-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;
}

/* Dasselbe Gewicht wie .question-text: Eine Frage sieht überall gleich aus, ob sie in einer
   Prüfung steht, beim Bewerten aufklappt oder über der eigenen Antwort in der Auswertung. */
.question-card-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
}

/* Eine noch unbewertete Frage soll auch zugeklappt ins Auge fallen. */
.question-card[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);
}

/* ---- Dateien: aufgebaut wie Nextcloud — links die Bereiche, in der Mitte die Liste, rechts
   auf Wunsch die Details. ---- */

/* Das Symbol je Dateiart; es skaliert mit der Schrift der Zeile. */
.file-icon {
  flex: 0 0 auto;
  width: 1.9em;
  height: 1.9em;
}

.files-app {
  /* Die Markierungen im Ton der Anwendung, nicht in Bootstraps Blau. */
  --files-accent-bg: #fdecea;
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  min-height: 65vh;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  overflow: hidden;
}

.files-app.has-details {
  grid-template-columns: 13rem minmax(0, 1fr) 18rem;
}

.files-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  background: #f5f6f8;
  border-right: 1px solid var(--bs-border-color);
}

.files-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--bs-body-color);
  text-decoration: none;
  font-weight: 500;
}

.files-nav-link svg,
.files-crumb svg,
.files-view-toggle svg,
.files-shared svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

.files-nav-link:hover {
  background: rgba(0, 0, 0, 0.05);
}

.files-nav-link.active {
  background: var(--files-accent-bg);
  color: var(--exam-red-dark);
}

.files-main {
  position: relative;
  min-width: 0;
  padding: 0.75rem 1rem 1rem;
}

.files-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.files-crumbs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex-wrap: wrap;
  font-size: 1.05rem;
}

.files-crumb {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  color: var(--bs-body-color);
  text-decoration: none;
}

a.files-crumb:hover {
  background: rgba(0, 0, 0, 0.05);
}

.files-crumb-current {
  font-weight: 600;
}

.files-crumb-sep {
  color: var(--bs-secondary-color);
}

.files-new .file-icon,
.dropdown-item .file-icon {
  width: 1.4em;
  height: 1.4em;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.files-view-toggle .btn {
  display: inline-flex;
  align-items: center;
}

/* Die Liste: hohe Zeilen, feine Trennlinien, Name links, Angaben rechts. */
.files-table {
  width: 100%;
  border-collapse: collapse;
}

.files-list-wrap {
  overflow-x: auto;
}

.files-table th {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  white-space: nowrap;
}

.files-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}

.files-sort {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-weight: inherit;
}

[aria-sort="ascending"] > .files-sort::after {
  content: " ▲";
  font-size: 0.7em;
}

[aria-sort="descending"] > .files-sort::after {
  content: " ▼";
  font-size: 0.7em;
}

.files-col-check {
  width: 2.25rem;
}

.files-col-actions {
  width: 5rem;
  text-align: right;
  white-space: nowrap;
}

.files-col-name {
  min-width: 12rem;
}

.files-col-size,
.files-col-date {
  width: 7rem;
  text-align: right;
  white-space: nowrap;
  font-size: 0.9rem;
}

.files-col-location {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.files-row {
  height: 3.25rem;
}

.files-row:hover {
  background: #f7f8fa;
}

.files-row.is-selected,
.files-row.is-detailed {
  background: var(--files-accent-bg);
}

.files-name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bs-body-color);
  text-decoration: none;
  overflow-wrap: break-word;
}

/* Die Zeile für einen neuen Ordner: Feld und Knöpfe nebeneinander, die Knöpfe ungeteilt. */
.files-new-folder-row .files-name {
  display: flex;
  flex-wrap: wrap;
}

.files-new-folder-row .btn {
  white-space: nowrap;
}

a.files-name:hover .files-name-text {
  text-decoration: underline;
}

.files-inline-input {
  display: inline-block;
  width: min(24rem, 60%);
}

.files-shared {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 0.35rem;
  color: var(--exam-red);
}

.files-menu-toggle {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bs-secondary-color);
  font-size: 1.2rem;
  line-height: 1;
}

.files-menu-toggle:hover,
.files-menu-toggle[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.07);
}

/* Sobald etwas angehakt ist, wird die Kopfzeile zur Aktionsleiste. */
.files-selection-bar th {
  background: var(--files-accent-bg);
  color: var(--bs-body-color);
  white-space: normal;
}

.files-selection-count {
  display: inline-block;
  margin: 0.2rem 1rem 0.2rem 0;
}

.files-selection-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.files-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.files-empty .file-icon {
  width: 4rem;
  height: 4rem;
  opacity: 0.5;
  margin-bottom: 0.5rem;
}

.files-footnote {
  margin: 0.75rem 0 0;
}

/* Beim Ziehen von Dateien über die Liste: eine Fläche, die sagt, wohin es geht. */
.files-drop-overlay {
  position: absolute;
  inset: 0.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 3px dashed var(--exam-red);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  pointer-events: none;
  z-index: 5;
}

.files-drop-overlay .file-icon {
  width: 3.5rem;
  height: 3.5rem;
}

.files-main.is-dragging .files-drop-overlay {
  display: flex;
}

.files-progress {
  position: sticky;
  bottom: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}

/* Die Details rechts. */
/* Mit offenen Details wird es in der Mitte eng — wie bei Nextcloud treten Nebenspalten zurück. */
.files-app.has-details .files-col-size,
.files-app.has-details .files-col-location {
  display: none;
}

@media (max-width: 1199.98px) {
  .files-app.has-details .files-col-date {
    display: none;
  }
}

.files-details {
  position: relative;
  padding: 1.25rem 1rem;
  border-left: 1px solid var(--bs-border-color);
  background: #fff;
  overflow-wrap: anywhere;
}

.files-details-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

.files-details-icon .file-icon {
  width: 4.5rem;
  height: 4.5rem;
}

.files-details-name {
  margin: 0.5rem 0 1rem;
}

.files-details-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.files-details-facts dt {
  font-weight: 600;
  color: var(--bs-secondary-color);
}

.files-details-facts dd {
  margin: 0;
}

/* Kacheln: dieselben Zeilen, als Raster gelegt — nur Symbol, Name und Menü bleiben. */
.files-grid .files-table thead .files-head th:not(.files-col-check) {
  display: none;
}

.files-grid .files-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  padding-top: 0.75rem;
}

.files-grid .files-row {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  padding: 0.75rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}

.files-grid .files-row:hover {
  border-color: var(--bs-border-color);
}

.files-grid .files-row td {
  display: block;
  border: 0;
  padding: 0;
  text-align: center;
}

.files-grid .files-col-size,
.files-grid .files-col-date,
.files-grid .files-col-location {
  display: none !important;
}

.files-grid .files-col-check {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  width: auto;
}

.files-grid .files-col-actions {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: auto;
}

.files-grid .files-name {
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.files-grid .files-name .file-icon {
  width: 4rem;
  height: 4rem;
}

.files-grid .files-new-folder-row {
  grid-column: 1 / -1;
}

/* Schmalere Bildschirme: die Bereiche als Reiter oben, die Details als Leiste von unten. */
@media (max-width: 991.98px) {
  /* Übereinander statt nebeneinander. Die Mindesthöhe gehört der Liste — ohne „start" teilte das
     Raster sie auf beide Zeilen auf, und die Reiter blähten sich zu Kreisen auf. */
  .files-app,
  .files-app.has-details {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
  }

  .files-nav {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .files-nav-link {
    white-space: nowrap;
  }

  .files-col-location {
    display: none;
  }

  .files-details {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1040;
    border-left: 0;
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  }
}

@media (max-width: 575.98px) {
  .files-col-date {
    display: none;
  }
}

/* ---- „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 — Symbol und Name wie in den Dateien. */
.course-document-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.course-document a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  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;
}


/* Mehrfachauswahl: zugeklappt eine Zeile, aufgeklappt eine Liste mit Kästchen. Die Höhe ist
   begrenzt, damit zwanzig Themen das Fenster nicht überlaufen lassen. */
.multi-select-menu {
  max-height: 16rem;
  overflow-y: auto;
}

/* Das Suchfeld bleibt beim Blättern oben stehen. Bei fünfzig Themen scrollt man sonst nach unten
   und hat den Schlitz, in den man tippen will, nicht mehr vor Augen. */
.multi-select-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.25rem 0.5rem 0.5rem;
  background-color: var(--bs-dropdown-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Das Gewählte unter dem Knopf. Der trägt ab vier Einträgen nur noch deren Anzahl — hier steht,
   welche es sind. */
.multi-select-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.multi-select-chips:empty {
  display: none;
}

.multi-select .dropdown-toggle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-select-menu .dropdown-item {
  cursor: pointer;
}

.multi-select-menu .dropdown-item:active {
  color: inherit;
  background-color: var(--bs-tertiary-bg);
}

/* Der Farbpunkt eines Themas. Ein Rand hält ihn auch dann sichtbar, wenn seine Farbe fast die
   des Hintergrunds ist. */
.topic-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Ein Thema als Schildchen, in seiner eigenen Farbe. Die Schriftfarbe kommt aus der Anwendung,
   nicht aus dem Stylesheet: Sie hängt davon ab, wie hell die gewählte Farbe ist. */
.topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  background-color: var(--bs-secondary-bg);
}

/* Die Themenspalte der Terminliste. Ohne Begrenzung schiebt ein Thema wie
   „Löscheinsatz: Lager-/Industriehalle (Abriegeln, Brandabschnitte, Bedachung)“ die übrigen
   Spalten aus dem Bild; mit ihr bricht die Reihe der Schildchen stattdessen um. */
.session-topic-cell {
  max-width: 24rem;
  white-space: normal;
}

/* Farbauswahl: ein Raster aus Kacheln, ein Klick genügt. */
.color-picker-menu {
  min-width: auto;
}

.color-picker-grid {
  display: grid;
  /* Sechs je Reihe: Die Palette hat zwei Helligkeitsstufen, und so bleibt jede in sich geschlossen,
     ohne dass die Auswahl in die Länge wächst. */
  grid-template-columns: repeat(6, 1.5rem);
  gap: 0.35rem;
}

.color-swatch {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0.25rem;
}

button.color-swatch:hover,
button.color-swatch:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

/* „Keine Farbe“ als durchgestrichenes Feld, damit sie sich von einem weißen Ton unterscheidet. */
.color-swatch.is-empty {
  background-color: var(--bs-body-bg);
  background-image: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(180, 60, 60, 0.9) 50%,
    transparent calc(50% + 1px)
  );
}

.color-picker-toggle {
  line-height: 1;
  padding: 0.25rem;
}

/* Was als hidden ausgezeichnet ist, bleibt verborgen — auch wenn daneben eine Anzeigeklasse steht.
   Bootstraps d-flex setzt `display: flex !important` und schlägt damit die Regel des Browsers, die
   dafür kein !important mitbringt; ohne diese Zeile stünde eine ausgeblendete Leiste sichtbar da. */
[hidden] {
  display: none !important;
}

/* Die Leiste, die erscheint, sobald etwas geändert und noch nicht gespeichert ist. */
.pending-bar {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  padding: 0.75rem 0;
}

/* Die Rollenkreise an Knöpfen und Menüeinträgen. Sie stehen nur in der Ansicht des
   Administrators — er ist der einzige, der alles sieht und deshalb nicht erkennen kann, was den
   anderen davon bleibt. Klein und blass genug, um beim Arbeiten nicht im Weg zu stehen. */
.role-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    margin-left: .2em;
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
    opacity: .75;
    user-select: none;
}

.role-mark-s {
    background-color: #0d6efd;
}

.role-mark-t {
    background-color: #198754;
}

.role-mark-a {
    background-color: #dc3545;
}

/* Im Ausdruck haben sie nichts zu suchen — auf Papier gibt es keine Rollen. */
@media print {
    .role-mark {
        display: none;
    }
}