:root {
  --sap-blue: #0a6ed1;
  --sap-blue-dark: #0854a0;
  --sap-dark: #32363a;
  --sap-navy: #1c2b3a;
  --bg: #f5f6f7;
  --border: #d9d9d9;
  --hot: #bb0000;
  --high: #e9730c;
  --med: #e9730c;
  --low: #6a6d70;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 6px rgba(0,0,0,0.04);
  --surface: #ffffff;
  --surface-alt: #fafcff;
  --surface-hover: #f0f2f4;
  --table-header-bg: #f7f8f9;
  --text: #1a1a1a;
  --text-muted: #6a6d70;
}

[data-theme="dark"] {
  --sap-dark: #e4e7ea;
  --bg: #14171a;
  --border: #3a4048;
  --surface: #20242a;
  --surface-alt: #262b32;
  --surface-hover: #2b313a;
  --table-header-bg: #262b32;
  --text: #e4e7ea;
  --text-muted: #9aa3ad;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 6px rgba(0,0,0,0.25);
}
[data-theme="dark"] details summary:hover { background: var(--surface-hover); }
[data-theme="dark"] tr:hover td { background: var(--surface-hover); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "72", "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Platz fuer die fest stehende Kopfzeile samt Reiterleiste. */
  padding-top: calc(var(--kopf-hoehe, 70px) + var(--reiter-hoehe, 48px));
}

main { flex: 1 0 auto; }
footer.site-footer { flex-shrink: 0; }

/* Die Seitenbreite.
   Sie waechst mit dem Fenster, statt bei 1200 Pixeln stehenzubleiben: Auf einem
   breiten Bildschirm sollen Tabellen wie die Fortschrittsmatrix oder die
   Benutzerliste ihre Spalten zeigen koennen, ohne zu scrollen.
   Nach oben ist trotzdem eine Grenze noetig — sonst zieht sich eine Kopfzeile
   auf einem 34-Zoll-Bildschirm ueber die ganze Breite auseinander und das Auge
   findet den Weg von links nach rechts nicht mehr.
   Die Innenabstaende wachsen mit (clamp), damit der Inhalt auf dem Telefon nicht
   am Rand klebt und auf dem grossen Schirm nicht direkt an der Kante beginnt.

   Lesetexte bleiben davon unberuehrt: Lektion, Quiz und Anhang haben ihre eigene
   Hoechstbreite fuer eine angenehme Zeilenlaenge (siehe .lektion-text und
   .lese-breite). Breiter wird also nur, was von Breite profitiert. */
.page-container {
  /* Der Seitenrand steht als eigene Groesse zur Verfuegung, weil sich die
     Reiterleiste daran ausrichten muss: Ihre Knoepfe bringen eigenen
     Innenabstand mit, den sie vom Rand abziehen, damit die Beschriftung des
     ersten Reiters genau ueber dem Inhalt darunter steht. */
  --seitenrand: clamp(16px, 2.2vw, 40px);
  width: 100%;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--seitenrand);
}

/* Ansichten, bei denen es ums Lesen geht und nicht um Tabellen: Sie bleiben
   schmal, auch wenn die Seite ringsum breiter geworden ist. Quiz, Ergebnis und
   Profil gewinnen nichts durch Breite — eine Frage ueber 1700 Pixel zu lesen
   ist anstrengender, nicht bequemer. */
.lese-breite { max-width: 1100px; }

/* ---------------- Header (Fiori Shell Bar Style) ---------------- */
/* Kopfbereich und Reiterleiste bleiben beim Scrollen stehen.
   "fixed" und nicht "sticky": Der Seitenkoerper ist ein Flex-Behaelter in
   Spaltenrichtung, und darin bleibt ein klebendes Element nicht zuverlaessig
   haengen — im Browser scrollte die Kopfzeile trotz "position: sticky" mit.
   Fest positioniert ist das Verhalten eindeutig; den Platz, der dadurch oben
   fehlt, gleicht der Innenabstand des Koerpers aus.
   Die Hoehen misst portal-kopf.js, weil die Kopfzeile umbricht: Ein langer
   Name oder ein schmales Fenster macht sie zweizeilig, und mit einem festen
   Wert schoebe sich die Reiterleiste dann darueber. Die Vorgabewerte greifen
   nur, bis das Skript einmal gemessen hat. */
/* NUR das Seiten-header, nicht jedes <header>-Element: Die Karten des
   Lern-Dashboards haben ihre eigene Kopfzeile, und die darf nicht oben am
   Fensterrand kleben bleiben. */
body > header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* Die Kopfzeile darf umbrechen, sobald Logo, Titel und die Knöpfe rechts nicht
   mehr nebeneinander passen — sonst schiebt sie die ganze Seite nach rechts.
   Das trat ab etwa 850 Pixeln auf, also schon auf dem Tablet im Querformat,
   und nicht erst auf dem Telefon: Ein langer Name plus "Zur Lernansicht" plus
   "Abmelden" braucht mehr Platz, als so ein Gerät hat. */
.header-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  /* Nur oben und unten — der seitliche Rand kommt von .page-container, sonst
     klebte das Logo am linken Fensterrand. */
  padding-block: 14px;
}
body > header .logo { height: 40px; width: auto; display: block; }
body > header .header-text { border-left: 1px solid var(--border); padding-left: 20px; }
body > header h1 { margin: 0; font-size: 19px; font-weight: 700; color: var(--sap-dark); }
.subtitle { margin: 2px 0 0; opacity: 0.65; font-size: 12.5px; }

.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-muted);
}
/* Nur die einzelnen Elemente bleiben in einer Zeile, nicht die ganze Gruppe —
   sonst kann sie nicht umbrechen. */
.header-user > * { white-space: nowrap; }
.header-user .btn-secondary { padding: 6px 12px; font-size: 13px; }
.header-user button:not(.btn-icon) { padding: 6px 12px; font-size: 13px; }
.btn-icon {
  background: transparent !important;
  color: var(--sap-dark);
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
}
.btn-icon:hover { background: var(--surface-hover) !important; }
.field-readonly {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ---------------- Tab Navigation ---------------- */
nav.tabs {
  position: fixed;
  top: var(--kopf-hoehe, 70px);
  left: 0;
  right: 0;
  z-index: 45;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* Die Reiterleiste.
   Das Admin-Portal hat sieben Reiter — auf einem Telefon passen die nicht
   nebeneinander. Statt sie umbrechen zu lassen (drei Zeilen Reiter über jedem
   Inhalt) oder die Seite waagrecht scrollen zu lassen (dann wandern Kopfzeile
   und Fusszeile mit), scrollt die Leiste in sich selbst. Das ist das übliche
   Verhalten auf kleinen Schirmen, und die Seite darunter bleibt ruhig.
   Die Scrollleiste wird ausgeblendet: Dass es weitergeht, zeigt der
   angeschnittene nächste Reiter deutlicher als ein grauer Balken. */
.tabs-inner {
  display: flex;
  padding: 0 max(0px, calc(var(--seitenrand) - 22px));
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tabs-inner::-webkit-scrollbar { display: none; }
.tab-btn {
  border: none;
  background: none;
  padding: 14px 22px;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--sap-dark);
  border-bottom: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
nav.tabs .tab-btn:hover { background: transparent; color: var(--sap-blue); }
nav.tabs .tab-btn.active {
  background: transparent;
  border-bottom-color: var(--sap-blue);
  color: var(--sap-blue);
  font-weight: 700;
}
.tab-btn:focus { outline: none; }
.tab-btn:focus-visible {
  outline: 2px solid var(--sap-blue);
  outline-offset: -3px;
  border-radius: 2px;
}

main { padding: 32px 0 calc(var(--fuss-hoehe, 44px) + 32px); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

h2 {
  color: var(--sap-dark);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}

/* ---------------- Forms / Panels ---------------- */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  background: var(--surface);
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Formulare mit mehreren Feldern stehen in einem echten Raster statt in einer
   umbrechenden Reihe: Damit sind alle Spalten gleich breit und beginnen oben,
   statt sich an der jeweils hoechsten Erklaerung auszurichten. Die Felder
   dehnen sich zwischen 260 Pixeln und einem gleichen Anteil — auf dem Telefon
   bleibt eine Spalte uebrig, ohne eigene Umbruchregel. */
.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
  gap: 16px 20px;
  margin-bottom: 16px;
  background: var(--surface);
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.grid-form fieldset {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  grid-column: 1 / -1;
}
/* Die Handlungszeile eines Formulars: durch eine Linie abgesetzt, ueber die
   volle Breite, damit der Knopf nicht als Rest hinter dem letzten Feld klemmt. */
.formular-fuss {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Fiori-style collapsible panels */
details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
details summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: var(--sap-dark);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: background 0.15s ease;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "▶";
  font-size: 10px;
  color: var(--sap-blue);
  transition: transform 0.15s ease;
  display: inline-block;
}
details[open] summary::before { transform: rotate(90deg); }
details summary:hover { background: var(--surface-hover); }
details > *:not(summary) { padding-left: 18px; padding-right: 18px; }
details > p.hint:last-child, details > form:last-child, details > .grid-form:last-child { padding-bottom: 18px; }
/* Ein Formular im Klappkasten braucht keinen eigenen Rahmen — der Kasten ist
   schon einer. Der seitliche Abstand muss aber bleiben: Ohne ihn klebten
   Felder und Knoepfe an der Kastenkante. (Genau das war der Fall, solange hier
   "padding: 0 0 4px" stand und damit den Abstand der Zeile darueber aushebelte.) */
details .inline-form, details .grid-form {
  box-shadow: none;
  border: none;
  background: transparent;
  margin-bottom: 0;
  padding: 4px 18px 18px;
}
details p.hint { margin: 8px 0; }

input, select, button, textarea {
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 2px rgba(10,110,209,0.15);
}
/* Checkboxen von der appearance:none-Regel oben ausnehmen — sonst ist ihr
   Häkchen unsichtbar (betraf u.a. "Mit NVD anreichern" und die neuen
   Administrator-/Aktiv-Haken im Admin-Tab: das Kästchen war da, zeigte aber
   nie an, ob es angehakt ist). */
input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--sap-blue);
  cursor: pointer;
}
button {
  background: var(--sap-blue);
  color: white;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.05s ease;
}
button:hover { background: var(--sap-blue-dark); }
button:active { transform: translateY(1px); }
button:focus { outline: none; }
button:focus-visible {
  outline: 2px solid var(--sap-blue-dark);
  outline-offset: 2px;
}
button.btn-secondary {
  background: var(--surface);
  color: var(--sap-dark);
  border: 1px solid var(--border);
}
button.btn-secondary:hover { background: var(--surface-hover); }
button.btn-danger {
  background: var(--surface);
  color: var(--hot);
  border: 1px solid var(--hot);
}
button.btn-danger:hover { background: #fdeaea; }
[data-theme="dark"] button.btn-danger:hover { background: #3a1c1c; }
button.btn-row-delete {
  background: transparent;
  color: var(--hot);
  border: none;
  padding: 6px 10px;
  font-weight: 500;
  font-size: 12.5px;
}
button.btn-row-delete:hover { background: #fdeaea; border-radius: 6px; }
/* Im Dunkelmodus wuerde der helle Warnton die rote Schrift verschlucken. */
[data-theme="dark"] button.btn-row-delete:hover { background: #3a1c1c; }

/* ---------------- Filter inputs ---------------- */
.filter-input {
  width: 320px;
  max-width: 100%;
  background: var(--surface);
}

/* ---------------- Tables (Fiori-style) ---------------- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
th, td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
th {
  background: var(--surface-hover);
  color: var(--sap-dark);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  user-select: none;
}
th.sortable { cursor: pointer; }
/* Fest eingetragene Hellwerte machen die Kopfzeile im Dunkelmodus unlesbar:
   heller Text auf fast weissem Grund. Deshalb die Variablen des Themas. */
th.sortable:hover { background: var(--surface-alt); color: var(--sap-blue); }
th.sort-asc::after { content: " ▲"; font-size: 9px; color: var(--sap-blue); }
th.sort-desc::after { content: " ▼"; font-size: 9px; color: var(--sap-blue); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
}
.pagination .pg-info { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.pagination button {
  background: var(--surface);
  color: var(--sap-dark);
  border: 1px solid var(--border);
  padding: 6px 14px;
  font-size: 13px;
}
.pagination button:hover:not(:disabled) { background: var(--surface-hover); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
tr:hover td { background: var(--surface-alt); }
tr[style*="display: none"] { display: none !important; }

.field-row { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.actions-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.prio-badge {
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}
.prio-hot { background: var(--hot); }
.prio-sehr-hoch { background: var(--high); }
.prio-hoch { background: #e9730c; }
.prio-mittel { background: #e9a800; color: #1a1a1a; }
.prio-niedrig { background: var(--low); }

.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sap-blue);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.result-card.prio-Hot-News { border-left-color: var(--hot); }
.result-card.prio-Sehr-hoch { border-left-color: var(--high); }
.result-card.prio-Hoch { border-left-color: #e9730c; }
.result-card.prio-Mittel { border-left-color: #e9a800; }
.result-card.prio-Niedrig { border-left-color: var(--low); }

.result-card .top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.empty-state { color: var(--text-muted); padding: 24px; text-align: center; }

#table-notes td a {
  color: var(--sap-blue);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
#table-notes td a:hover { text-decoration: underline; }

.range-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.range-block h4 { margin: 0 0 10px; color: var(--sap-dark); font-size: 14px; }

table.range-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}
table.range-table th, table.range-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
}
table.range-table th { color: var(--sap-dark); font-weight: 600; background: var(--table-header-bg); }
table.range-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
table.range-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--border);
  padding-top: 10px;
  vertical-align: middle;
}
table.range-table tfoot input,
table.range-table tfoot select {
  width: 100%;
  box-sizing: border-box;
}
table.range-table tfoot button { white-space: nowrap; }
.range-empty-row td {
  color: var(--text-muted);
  font-style: italic;
  padding: 6px 8px;
}

/* ---------------- Footer ----------------
   Die Fusszeile bleibt beim Scrollen stehen. Damit sie dabei nicht ein Sechstel
   des Bildschirms belegt, steht in der festen Leiste nur eine Zeile: Logo,
   Urhebervermerk und ein Schalter. Der vollstaendige rechtliche Hinweis klappt
   ueber die Leiste auf, statt in einem eigenen Fenster zu erscheinen — so geht
   nichts verloren und es liest sich an Ort und Stelle. */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--surface);
  color: var(--text);
  border-top: 1px solid var(--border);
  box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.05);
}
.footer-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 8px;
}
.footer-logo { height: 22px; width: auto; display: block; }
.footer-copyright { margin: 0; font-size: 12px; color: var(--text-muted); }
.footer-mehr {
  margin-left: auto;
  background: none;
  border: none;
  padding: 4px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--sap-blue);
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
}
.footer-mehr:hover { background: var(--surface-hover); text-decoration: underline; }

/* Der aufgeklappte Teil sitzt ueber der Leiste, nicht darunter — unten ist
   der Bildschirmrand. Er begrenzt seine Hoehe selbst, damit ein langer Text
   auf einem kleinen Schirm nicht die ganze Ansicht verdeckt. */
.footer-rechtliches {
  padding-block: 16px 4px;
  border-bottom: 1px solid var(--border);
  max-height: 40vh;
  overflow-y: auto;
}
.footer-rechtliches[hidden] { display: none; }
.footer-rechtliches h4 {
  margin: 0 0 10px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-rechtliches p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  max-width: 900px;
}

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
  /* Auf dem Telefon nimmt die Benutzerzeile die volle Breite und beginnt links,
     statt als Rest rechts zu kleben. */
  .header-user { margin-left: 0; width: 100%; }
  body > header .header-text { border-left: none; padding-left: 0; }
}

/* ==========================================================================
   SAP LERNPORTAL — Ergänzungen zum übernommenen Grundgerüst
   Ab hier stehen ausschliesslich neue Bausteine: Fortschrittsbalken,
   Unit-Karten, Lektionsleser, Quiz, Ergebnisansicht, Zertifikatskarten,
   Anhänge sowie die Gestaltung der Lektionsinhalte. Die Regeln oberhalb
   dieser Linie stammen unverändert aus dem SAP Patch Advisor.
   ========================================================================== */

/* Das hidden-Attribut muss auch dann greifen, wenn eine Regel weiter oben
   ein display setzt (z.B. bei Flex-Containern). */
[hidden] { display: none !important; }

/* Radioknöpfe von der appearance:none-Regel des Grundgerüsts ausnehmen —
   sonst sind sie im Quiz unsichtbar (dasselbe Problem wie seinerzeit bei den
   Checkboxen). */
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--sap-blue);
  cursor: pointer;
}

/* Knopf "Admin-Portal" in der Kopfzeile — sieht aus wie btn-secondary, ist
   aber ein Link auf admin.html. */
.btn-link-admin {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--sap-dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.btn-link-admin:hover { background: var(--surface-hover); }

/* ---------------- Leseverlaufsleiste ---------------- */
.leseleiste {
  position: fixed;
  /* Direkt unter der stehengebliebenen Reiterleiste statt am Fensterrand —
     dort liegt jetzt die Kopfzeile. */
  top: calc(var(--kopf-hoehe, 70px) + var(--reiter-hoehe, 48px));
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.leseleiste-balken {
  height: 100%;
  width: 0;
  background: var(--sap-blue);
  transition: width 0.1s linear;
}

/* ---------------- Fortschrittsbalken ---------------- */
.progress-bar {
  height: 8px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-gross { height: 14px; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sap-blue), var(--sap-blue-dark));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ---------------- Kursübersicht: Kopfbereich ---------------- */
.uebersicht-kopf {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  margin-bottom: 20px;
}
.fortschritt-zeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.fortschritt-beschriftung {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fortschritt-wert { font-size: 22px; font-weight: 700; color: var(--sap-blue); }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.kennzahl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.kennzahl-wert { font-size: 18px; font-weight: 700; color: var(--sap-dark); }
.kennzahl-label { font-size: 12px; color: var(--text-muted); }

.erfolg-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: #eaf6ec;
  border: 1px solid #b9dfc0;
  border-left: 5px solid #2E7D32;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.erfolg-banner strong { color: #1d5c22; font-size: 15px; }
.erfolg-banner p { margin: 4px 0 0; }

/* ---------------- Unit-Karten ---------------- */
.unit-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}
.unit-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sap-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}
.unit-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.unit-nr {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sap-blue);
}
.unit-titel { margin: 3px 0 0; font-size: 16px; font-weight: 700; color: var(--sap-dark); }

.status-badge {
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-offen { background: var(--surface-hover); color: var(--text-muted); border-color: var(--border); }
.status-arbeit { background: #fdf0e6; color: #99461a; border-color: #eccaad; }
.status-bestanden { background: #eaf4ea; color: #1d5c22; border-color: #b9dfc0; }

.unit-fortschritt { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.unit-fortschritt .progress-bar { flex: 1; }
.unit-fortschritt-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.lektion-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.lektion-zeile + .lektion-zeile { border-top: 1px solid var(--border); }
.lektion-link,
.nav-lektion {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 6px;
  padding: 9px 8px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.lektion-link:hover, .nav-lektion:hover { background: var(--surface-hover); color: var(--sap-blue); }
.lektion-haken {
  flex: 0 0 18px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.ist-fertig .lektion-haken, .nav-lektion.ist-fertig .lektion-haken { color: #2E7D32; font-weight: 700; }
.lektion-nr { flex: 0 0 34px; font-weight: 700; color: var(--text-muted); font-size: 12.5px; }
.lektion-name { flex: 1; }
.lektion-dauer { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.unit-fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.unit-fuss button:disabled { opacity: 0.45; cursor: not-allowed; }
.unit-fuss button:disabled:hover { background: var(--sap-blue); }
.unit-hinweis { width: 100%; margin: 2px 0 0; }

/* ---------------- Lektionsleser ---------------- */
.lektion-kopfzeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.lektion-nav-toggle { display: none; }

.lektion-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  /* Navigation plus Lesespalte (760 px) plus Abstand — mehr braucht der Leser
     nicht, und mehr waere schlechter: Der Text stuende sonst als schmaler
     Streifen in einer sehr breiten leeren Flaeche. */
  max-width: 1120px;
}
.lektion-nav {
  position: sticky;
  /* Unter Kopfbereich und Reiterleiste, sonst schoebe sie sich darunter. */
  top: calc(var(--kopf-hoehe, 70px) + var(--reiter-hoehe, 48px) + 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.lektion-nav-titel {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.5;
}
.lektion-nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-lektion { align-items: flex-start; font-size: 13px; }
.nav-lektion-text { flex: 1; line-height: 1.45; }
.nav-lektion.aktiv {
  background: var(--surface-alt);
  color: var(--sap-blue);
  box-shadow: inset 3px 0 0 var(--sap-blue);
  font-weight: 700;
}

.lektion-haupt { min-width: 0; }
.lektion-haupt h2 { font-size: 24px; line-height: 1.3; }

/* Angenehme Zeilenlänge: höchstens rund 72 Zeichen. */
.lektion-text {
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.lektion-text p { margin: 0 0 16px; }
.lektion-text h3 {
  margin: 32px 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--sap-dark);
  line-height: 1.35;
  scroll-margin-top: 20px;
}
.lektion-text h4 { margin: 24px 0 10px; font-size: 16px; color: var(--sap-dark); }
.lektion-text ul, .lektion-text ol { margin: 0 0 16px; padding-left: 24px; }
.lektion-text li { margin-bottom: 7px; }
.lektion-text strong { font-weight: 700; color: var(--sap-dark); }
.lektion-text code {
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 0.9em;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.lektion-text a { color: var(--sap-blue); }

.lektion-fuss {
  max-width: 760px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.lektion-fuss-aktionen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.lektion-fuss button:disabled { opacity: 0.45; cursor: not-allowed; }
.lektion-fuss button:disabled:hover { background: var(--sap-blue); }
.lektion-fuss .hint { margin: 10px 0 0; }
.hint.hinweis-offen { color: var(--high); font-weight: 600; }
.lektion-messwerte {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------------- Quiz ---------------- */
.quiz-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.quiz-kopf h2 { margin-bottom: 4px; }
.quiz-kopf-rechts { display: flex; align-items: center; gap: 12px; }
.quiz-uhr {
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--sap-dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
}
.quiz-zaehler {
  margin: 8px 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.quiz-uebersicht { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.quiz-sprung {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.quiz-sprung:hover { background: var(--surface-hover); color: var(--sap-blue); }
.quiz-sprung.beantwortet {
  background: #e7f1fb;
  border-color: var(--sap-blue);
  color: var(--sap-blue-dark);
}
.quiz-sprung.aktiv {
  background: var(--sap-blue);
  border-color: var(--sap-blue);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(10,110,209,0.2);
}

.quiz-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px;
  max-width: 820px;
}
.quiz-typ-hinweis {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.quiz-typ-hinweis.ist-multi { color: var(--high); }
.quiz-frage-text {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--sap-dark);
}
.quiz-optionen { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-alt);
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.5;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.quiz-option:hover { border-color: var(--sap-blue); background: var(--surface-hover); }
.quiz-option.gewaehlt {
  border-color: var(--sap-blue);
  background: #eef5fd;
  box-shadow: inset 3px 0 0 var(--sap-blue);
}
.quiz-option input { margin-top: 2px; flex: 0 0 auto; }
.quiz-option-ziffer {
  flex: 0 0 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
}
.quiz-option-text { flex: 1; }

.quiz-steuerung {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 820px;
  margin: 20px 0 8px;
}
.quiz-steuerung .hint { flex: 1; text-align: center; }
.quiz-steuerung button:disabled { opacity: 0.4; cursor: not-allowed; }
.quiz-steuerung button:disabled:hover { background: var(--sap-blue); }
#btn-quiz-abgeben { background: #2E7D32; }
#btn-quiz-abgeben:hover { background: #1d5c22; }

/* ---------------- Ergebnisansicht ---------------- */
.ergebnis-kopf {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.ergebnis-ring { position: relative; width: 160px; height: 160px; flex: 0 0 auto; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-spur { fill: none; stroke: var(--surface-hover); stroke-width: 12; }
.ring-wert {
  fill: none;
  stroke: var(--sap-blue);
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
.ergebnis-ring.ist-bestanden .ring-wert { stroke: #2E7D32; }
.ergebnis-ring.ist-durchgefallen .ring-wert { stroke: #B22222; }
.ring-mitte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ring-prozent { font-size: 30px; font-weight: 700; color: var(--sap-dark); }
.ring-label { font-size: 11.5px; color: var(--text-muted); }

.ergebnis-fakten { flex: 1; min-width: 260px; }
.ergebnis-status { margin: 0 0 14px; font-size: 22px; font-weight: 700; }
.ergebnis-status.ist-bestanden { color: #2E7D32; }
.ergebnis-status.ist-durchgefallen { color: #B22222; }
.ergebnis-liste, .zertifikat-daten { list-style: none; margin: 0 0 16px; padding: 0; }
.ergebnis-liste li, .zertifikat-daten li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
.ergebnis-liste li span, .zertifikat-daten li span { color: var(--text-muted); }
.ergebnis-liste li strong, .zertifikat-daten li strong { color: var(--sap-dark); }
.ergebnis-aktionen { display: flex; flex-wrap: wrap; gap: 10px; }

.empfehlung-box {
  background: #fdf5ea;
  border: 1px solid #eccaad;
  border-left: 4px solid #C05621;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.empfehlung-box strong { color: #99461a; }
.empfehlung-box .hint { margin: 6px 0 10px; }
.empfehlung-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.empfehlung-link {
  background: var(--surface);
  color: var(--sap-blue);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.empfehlung-link:hover { background: var(--surface-hover); }

.abschnitt-titel { margin: 28px 0 4px; font-size: 17px; font-weight: 700; color: var(--sap-dark); }
.durchsicht { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.durchsicht-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.durchsicht-karte.ist-richtig { border-left-color: #2E7D32; }
.durchsicht-karte.ist-falsch { border-left-color: #B22222; }
.durchsicht-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.durchsicht-nr {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.durchsicht-status { font-size: 13px; font-weight: 700; }
.ist-richtig .durchsicht-status { color: #2E7D32; }
.ist-falsch .durchsicht-status { color: #B22222; }
.durchsicht-frage { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; line-height: 1.5; color: var(--sap-dark); }
.durchsicht-optionen { list-style: none; margin: 0 0 12px; padding: 0; }
.durchsicht-optionen li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--surface-alt);
}
.durchsicht-optionen li.opt-richtig { border-color: #9ccb9f; background: #eaf4ea; }
.durchsicht-optionen li.opt-falsch { border-color: #e0a4a4; background: #fbeaea; }
.opt-text { flex: 1; }
.marke {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.marke-richtig { background: #2E7D32; color: #fff; }
.marke-loesung { background: #d5ecd6; color: #1d5c22; }
.marke-falsch { background: #B22222; color: #fff; }
.durchsicht-hinweis { margin: 0 0 10px; font-style: italic; }
.durchsicht-begruendung {
  background: var(--surface-alt);
  border-left: 4px solid var(--sap-blue);
  border-radius: 0 6px 6px 0;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.durchsicht-begruendung p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.6; }
.durchsicht-quelle { margin: 0; font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ---------------- Zertifikatskarten ---------------- */
.zertifikat-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.zertifikat-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--sap-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.zertifikat-karte.ist-kurs { border-top-color: #2E7D32; }
.zertifikat-art {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sap-blue);
}
.zertifikat-karte.ist-kurs .zertifikat-art { color: #2E7D32; }
.zertifikat-titel { margin: 4px 0 14px; font-size: 16px; font-weight: 700; color: var(--sap-dark); line-height: 1.4; }
.zertifikat-daten { margin-bottom: 16px; }
.serien-nr { font-family: "SF Mono", "Consolas", "Menlo", monospace; font-size: 12px; }
.btn-zertifikat-pdf { margin-top: auto; }

/* ---------------- Anhänge ---------------- */
.anhang-auswahl { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.anhang-knopf {
  background: var(--surface);
  color: var(--sap-dark);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.anhang-knopf:hover { background: var(--surface-hover); color: var(--sap-blue); }
.anhang-knopf.aktiv { background: var(--sap-blue); border-color: var(--sap-blue); color: #fff; }
#anhang-inhalt { max-width: 900px; }
#anhang-inhalt table.inhalt { max-width: none; }

/* ==========================================================================
   Gestaltung der Lektionsinhalte
   Diese Klassen bringen die HTML-Fragmente aus backend/content/ mit.
   ========================================================================== */

.box {
  --box-farbe: var(--sap-blue);
  --box-grund: #eef5fd;
  background: var(--box-grund);
  border: 1px solid var(--border);
  border-left: 4px solid var(--box-farbe);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 22px 0;
}
.box > *:first-child { margin-top: 0; }
.box > *:last-child { margin-bottom: 0; }
.box p { margin: 0 0 10px; }
.box p:last-child { margin-bottom: 0; }
.box ul, .box ol { margin: 0 0 6px; padding-left: 22px; }
.box li:last-child { margin-bottom: 0; }

.box-label {
  display: block;
  margin-bottom: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--box-farbe);
}

/* Leitfarben analog zum gedruckten Handbuch. */
.box-ziele    { --box-farbe: #156082; --box-grund: #e9f1f5; }
.box-analogie { --box-farbe: #0F9ED5; --box-grund: #e6f5fc; }
.box-merke    { --box-farbe: #0F4761; --box-grund: #e8eef2; }
.box-beispiel { --box-farbe: #2E7D32; --box-grund: #eaf4ea; }
.box-achtung  { --box-farbe: #B22222; --box-grund: #fbeaea; }
.box-tipp     { --box-farbe: #C05621; --box-grund: #fdf2e8; }

/* Inhaltstabellen: dunkle Kopfzeile, Zebrastreifen, auf schmalen Schirmen
   waagrecht scrollbar. */
.lektion-text table.inhalt,
.lektion-text table.tcode-tabelle {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 22px 0;
  font-size: 13.5px;
}
.lektion-text table.inhalt thead,
.lektion-text table.tcode-tabelle thead { display: table-header-group; }
.lektion-text table.inhalt tbody,
.lektion-text table.tcode-tabelle tbody { display: table-row-group; }
.lektion-text table.inhalt tr,
.lektion-text table.tcode-tabelle tr { display: table-row; }

table.inhalt th, table.tcode-tabelle th {
  background: var(--sap-navy);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: none;
  white-space: nowrap;
}
table.inhalt td, table.tcode-tabelle td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
  font-size: 13.5px;
}
table.inhalt tbody tr:nth-child(even) td,
table.tcode-tabelle tbody tr:nth-child(even) td { background: var(--surface-alt); }
table.inhalt tbody tr:hover td,
table.tcode-tabelle tbody tr:hover td { background: var(--surface-hover); }

/* Transaktionscode-Tabellen: erste Spalte schmal und dicktengleich. */
table.tcode-tabelle td:first-child,
table.tcode-tabelle th:first-child {
  width: 140px;
  min-width: 110px;
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-weight: 600;
  white-space: nowrap;
}
table.tcode-tabelle td:first-child { color: var(--sap-blue); }

/* Codeblöcke: dicktengleiche Schrift, heller Grund, waagrecht scrollbar,
   Zeilenumbrüche des Originals bleiben erhalten. */
pre.codeblock {
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sap-navy);
  border-radius: 0 6px 6px 0;
  padding: 14px 16px;
  margin: 22px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  tab-size: 4;
  color: var(--text);
}
pre.codeblock code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* Selbstkontrolle: aufklappbar und vom Fliesstext abgesetzt. */
details.selbstkontrolle {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sap-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: none;
  margin: 26px 0;
}
details.selbstkontrolle summary {
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sap-blue);
}
details.selbstkontrolle summary:hover { background: var(--surface-hover); }
details.selbstkontrolle > *:not(summary) { padding-left: 16px; padding-right: 16px; }
details.selbstkontrolle > *:last-child { padding-bottom: 14px; }
details.selbstkontrolle ol, details.selbstkontrolle ul { margin: 0 0 4px; padding-left: 38px; }
details.selbstkontrolle li { margin-bottom: 9px; line-height: 1.6; }

/* ==========================================================================
   Dunkelmodus für die neuen Bausteine
   ========================================================================== */

[data-theme="dark"] .box-ziele    { --box-farbe: #4fa6c6; --box-grund: #17303a; }
[data-theme="dark"] .box-analogie { --box-farbe: #4cc3ee; --box-grund: #16323e; }
[data-theme="dark"] .box-merke    { --box-farbe: #6ba3c2; --box-grund: #172a35; }
[data-theme="dark"] .box-beispiel { --box-farbe: #6cc070; --box-grund: #1a2e1c; }
[data-theme="dark"] .box-achtung  { --box-farbe: #e58080; --box-grund: #331c1c; }
[data-theme="dark"] .box-tipp     { --box-farbe: #e8a05c; --box-grund: #33261a; }
[data-theme="dark"] .box { border-color: var(--border); }

[data-theme="dark"] table.inhalt th,
[data-theme="dark"] table.tcode-tabelle th { background: #101923; color: #e4e7ea; }
[data-theme="dark"] pre.codeblock { border-left-color: #4a6b8a; }

[data-theme="dark"] .erfolg-banner { background: #1b2e1d; border-color: #2f5233; }
[data-theme="dark"] .erfolg-banner strong { color: #7fd184; }
[data-theme="dark"] .status-arbeit { background: #33261a; color: #e8a05c; border-color: #5a4126; }
[data-theme="dark"] .status-bestanden { background: #1a2e1c; color: #7fd184; border-color: #2f5233; }

[data-theme="dark"] .quiz-sprung.beantwortet { background: #1b2c3d; border-color: #3f78ad; color: #7fb6ea; }
[data-theme="dark"] .quiz-option.gewaehlt { background: #1b2c3d; }
[data-theme="dark"] .quiz-option input { accent-color: var(--sap-blue); }

[data-theme="dark"] .ergebnis-status.ist-bestanden,
[data-theme="dark"] .ist-richtig .durchsicht-status { color: #7fd184; }
[data-theme="dark"] .ergebnis-status.ist-durchgefallen,
[data-theme="dark"] .ist-falsch .durchsicht-status { color: #e58080; }
[data-theme="dark"] .ergebnis-ring.ist-bestanden .ring-wert { stroke: #7fd184; }
[data-theme="dark"] .ergebnis-ring.ist-durchgefallen .ring-wert { stroke: #e58080; }
[data-theme="dark"] .durchsicht-karte.ist-richtig { border-left-color: #7fd184; }
[data-theme="dark"] .durchsicht-karte.ist-falsch { border-left-color: #e58080; }
[data-theme="dark"] .durchsicht-optionen li.opt-richtig { background: #1a2e1c; border-color: #2f5233; }
[data-theme="dark"] .durchsicht-optionen li.opt-falsch { background: #331c1c; border-color: #5a2a2a; }
[data-theme="dark"] .marke-richtig { background: #2f5233; color: #d6f0d8; }
[data-theme="dark"] .marke-loesung { background: #24402a; color: #9ad79e; }
[data-theme="dark"] .marke-falsch { background: #5a2a2a; color: #f2cccc; }

[data-theme="dark"] .empfehlung-box { background: #33261a; border-color: #5a4126; }
[data-theme="dark"] .empfehlung-box strong { color: #e8a05c; }
[data-theme="dark"] .lektion-haken,
[data-theme="dark"] .ist-fertig .lektion-haken { color: #7fd184; }
[data-theme="dark"] .ist-fertig .lektion-haken { font-weight: 700; }
[data-theme="dark"] .btn-link-admin { background: var(--surface); color: var(--text); }
[data-theme="dark"] details.selbstkontrolle { background: var(--surface-alt); }
[data-theme="dark"] .lektion-text code { background: #101923; }

/* ==========================================================================
   Schmale Schirme: ab 900 Pixel einspaltig, Lektionsnavigation einklappbar
   ========================================================================== */

@media (max-width: 900px) {
  .page-container { --seitenrand: 16px; }
  .tab-btn { padding: 13px 15px; font-size: 13.5px; }
  .tabs-inner { padding: 0 max(0px, calc(var(--seitenrand) - 15px)); }
  .header-inner { padding-block: 12px; gap: 12px; }
  .header-user { gap: 8px; }

  .unit-liste { grid-template-columns: 1fr; }
  .zertifikat-liste { grid-template-columns: 1fr; }

  .lektion-layout { grid-template-columns: 1fr; gap: 18px; }
  .lektion-nav-toggle { display: inline-block; }
  .lektion-nav { display: none; position: static; max-height: none; }
  .lektion-nav.offen { display: block; }

  .lektion-text { max-width: none; font-size: 15px; }
  .lektion-fuss { max-width: none; }

  .quiz-kopf { flex-direction: column; align-items: stretch; }
  .quiz-karte { padding: 18px 16px; }
  .quiz-steuerung .hint { order: 3; flex-basis: 100%; text-align: left; }

  .ergebnis-kopf { gap: 20px; padding: 20px; }
  .ergebnis-ring { width: 130px; height: 130px; }
  .ring-prozent { font-size: 24px; }

  .durchsicht-optionen li { flex-direction: column; gap: 6px; }
  .marke { align-self: flex-start; }

  .footer-inner { padding-block: 28px; }
}

/* Kleine Struktur-Hüllen, damit lange Titel in den Flex-Zeilen umbrechen
   statt die Karte zu sprengen. */
.unit-kopf-text { min-width: 0; }
.zertifikat-kopf { min-width: 0; }

/* =========================================================================
   Kursliste — die Einstiegsansicht. Sie steht eine Ebene ÜBER den Units:
   zuerst die Kurse, die Lerneinheiten erst nach dem Klick auf einen Kurs.
   Gestaltung bewusst an den Unit-Karten angelehnt, nur eine Stufe grösser.
   ========================================================================= */
.kurs-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 20px;
  margin-top: 18px;
}
.kurs-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--sap-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kurs-karte:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 6px 18px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}
.kurs-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.kurs-kopf-text { min-width: 0; }
.kurs-stufe {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sap-blue);
}
.kurs-titel {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--sap-dark);
  cursor: pointer;
}
.kurs-titel:hover { color: var(--sap-blue); }
.kurs-untertitel { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.kurs-beschreibung { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }
.kurs-voraussetzung { margin: -6px 0 12px; font-style: italic; }

/* Eckdaten des Kurses als zweispaltige Definitionsliste. */
.kurs-daten {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 18px;
}
.kurs-daten li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.kurs-daten li span { color: var(--text-muted); }
.kurs-daten li strong { white-space: nowrap; }

.kurs-weiter {
  margin: 0 0 14px;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-left: 3px solid var(--sap-blue);
  border-radius: 4px;
}
.kurs-fuss {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Kursname in der Kopfzeile des Lektionslesers — damit beim direkten Aufruf
   einer Lektion sofort klar ist, in welchem Kurs man sich befindet. */
.lektion-kursname {
  flex: 1;
  text-align: center;
  font-weight: 600;
}

/* Zertifikate sind nach Kurs gruppiert, seit es mehrere Kurse gibt. */
.zertifikat-liste-gruppen { display: flex; flex-direction: column; gap: 28px; }
.zertifikat-gruppe-titel {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--sap-dark);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--sap-blue);
}
.zertifikat-gruppe .hint { margin: 6px 0 12px; }

@media (max-width: 900px) {
  .kurs-liste { grid-template-columns: 1fr; }
  .kurs-karte { padding: 18px 16px; }
  .kurs-daten { grid-template-columns: 1fr; }
  .lektion-kursname { display: none; }
}

/* =========================================================================
   Profil, Dialoge, Meldungen und der vorzeitige Abschluss
   ========================================================================= */

/* Ein Knopf, der wie ein Textlink aussieht — für Nebensächliches wie
   "Fehler melden", das nicht mit den Hauptaktionen konkurrieren soll. */
.link-knopf {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-knopf:hover { color: var(--sap-blue); }
.lektion-fehler-melden { margin: 18px 0 0; }
.durchsicht-melden { margin: 10px 0 0; }
/* In der Unit-Karte steht der Meldeknopf unter dem Hinweis und nimmt die ganze
   Breite ein, damit er nicht neben dem Quiz-Knopf als zweite Schaltflaeche
   missverstanden wird. */
.unit-melden { flex-basis: 100%; margin: 6px 0 0; }
.quiz-melden { margin: 16px 0 0; }

/* Vermerk im Lektionsfuss, wenn verkürzt abgeschlossen wurde. Bewusst sichtbar
   und nicht versteckt — der Abschluss ist gültig, aber er ist nicht derselbe. */
.vermerk-vorzeitig {
  color: #99461a;
  font-weight: 600;
}

/* ---------------- Dialoge ---------------- */
dialog.dialog {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 24px 26px;
  max-width: 560px;
  width: calc(100% - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}
dialog.dialog::backdrop { background: rgba(0,0,0,0.45); }
dialog.dialog h3 { margin: 0 0 14px; font-size: 17px; color: var(--sap-dark); }
dialog.dialog p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }
dialog.dialog textarea {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text);
  resize: vertical;
}
.dialog-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}
.vorzeitig-fehlzeit {
  background: var(--surface-alt);
  border-left: 3px solid var(--sap-blue);
  padding: 10px 12px;
  border-radius: 4px;
}
.hinweis-kasten {
  background: #fdf0e6;
  border-left: 3px solid #e9730c;
  color: #7a3a15;
  padding: 10px 12px;
  border-radius: 4px;
}
[data-theme="dark"] .hinweis-kasten { background: #3a2a1c; color: #e8c4a0; }
.bestaetigung-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 0;
  font-weight: 600;
  line-height: 1.5;
}
.bestaetigung-zeile input { margin-top: 3px; flex-shrink: 0; }

/* ---------------- Profil ---------------- */
.profil-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}
.profil-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
}
.profil-karte .abschnitt-titel { margin-top: 22px; }
.profil-karte .abschnitt-titel:first-child { margin-top: 0; }
.profil-karte .feld-block { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; }
.profil-karte .feld-block input {
  display: block;
  width: 100%;
  margin-top: 5px;
  font: inherit;
  font-weight: 400;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-alt);
  color: var(--text);
}
.profil-karte .feld-block .hint { display: block; margin-top: 4px; font-weight: 400; }
.profil-aktionen { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.profil-daten { list-style: none; margin: 0; padding: 0; }
.profil-daten li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.profil-daten li span { color: var(--text-muted); }

/* ---------------- Eigene Fehlermeldungen ---------------- */
.meldung-karte {
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: var(--surface-alt);
}
.meldung-karte.ist-offen { border-left-color: #e9730c; }
.meldung-karte.ist-bearbeitung { border-left-color: #0a6ed1; }
.meldung-karte.ist-geschlossen { border-left-color: #2E7D32; }
/* Archivierte Meldungen sieht nur die Schulungsleitung — der Vollstaendigkeit
   halber steht die Regel trotzdem hier, damit beide Oberflaechen gleich
   aussehen, wenn sie einmal doch gezeigt werden. */
.meldung-karte.ist-archiviert { border-left-color: var(--text-muted); opacity: 0.85; }
.meldung-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
}
.meldung-status { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ist-offen .meldung-status { color: #99461a; }
.ist-bearbeitung .meldung-status { color: #0a5aa8; }
.ist-geschlossen .meldung-status { color: #1d5c22; }
.ist-archiviert .meldung-status { color: var(--text-muted); }
/* Die Ticketnummer wird vorgelesen und abgetippt — deshalb Maschinenschrift. */
.ticket-nr {
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 12px; font-weight: 700; color: var(--sap-blue); letter-spacing: 0.02em;
}
.meldung-datum { font-size: 12px; color: var(--text-muted); }
.meldung-bezug { margin: 0 0 6px; font-size: 12px; color: var(--text-muted); }
.meldung-text { margin: 0; font-size: 13px; line-height: 1.55; }
.meldung-antwort {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}

/* Rückmeldungen in Formularen und Dialogen */
.meldung { margin: 0; font-size: 13px; font-weight: 600; }
.meldung-erfolg { color: #1d5c22; }
.meldung-fehler { color: var(--hot); }
.meldung-laufend { color: var(--text-muted); font-weight: 400; }

/* Schmalere Kacheln für die Anhangs-Kursauswahl — dort steht weniger drin. */
.kurs-liste-schmal { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

@media (max-width: 900px) {
  .profil-raster { grid-template-columns: 1fr; }
  .profil-karte { padding: 18px 16px; }
  .kurs-liste-schmal { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PROFILFOTO, KOPFZEILEN-MENÜ, GLOCKE UND LÄNDERAUSWAHL
   --------------------------------------------------------------------------
   Diese Bausteine benutzen BEIDE Oberflächen — Lernansicht und Admin-Portal.
   Sie stehen deshalb hier und nicht in admin.css. Das zugehörige Verhalten
   liegt gemeinsam in portal-kopf.js.
   ========================================================================== */

/* ------------------------------------------------------------------ Avatar */
/* Ein Kreis mit Foto oder, solange keines hinterlegt ist, mit den Initialen.
   Die Initialenfassung ist kein Notbehelf: Sie macht Listen lesbar, in denen
   die meisten Personen (noch) kein Bild haben. */
.avatar {
  --avatar-groesse: 32px;
  width: var(--avatar-groesse);
  height: var(--avatar-groesse);
  flex: 0 0 var(--avatar-groesse);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--avatar-groesse) * 0.4);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  user-select: none;
  overflow: hidden;
  /* Ein heller Ring trennt das Bild vom Hintergrund — ohne ihn verschwimmt
     ein helles Foto mit der Kopfzeile. */
  box-shadow: 0 0 0 1px var(--border);
}
.avatar.hat-foto { background-color: var(--surface); color: transparent; }
.avatar-gross  { --avatar-groesse: 40px; }
.avatar-riesig { --avatar-groesse: 96px; }
.avatar-klein  { --avatar-groesse: 26px; }

/* Acht Farben, aus dem Namen abgeleitet (siehe portal-kopf.js, farbklasse).
   Alle dunkel genug für weisse Schrift — geprüft auf Kontrast, auch im
   Dunkelmodus, wo sie unverändert bleiben. */
.avatar-farbe-0 { background-color: #0a6ed1; }
.avatar-farbe-1 { background-color: #0f7b6c; }
.avatar-farbe-2 { background-color: #8a4b9e; }
.avatar-farbe-3 { background-color: #b34a2d; }
.avatar-farbe-4 { background-color: #35618f; }
.avatar-farbe-5 { background-color: #7a6a1f; }
.avatar-farbe-6 { background-color: #9c3560; }
.avatar-farbe-7 { background-color: #3f6534; }

/* -------------------------------------------------------------- Klappmenüs */
.klapp { position: relative; }

.benutzer-knopf {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent !important;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px 4px 4px !important;
  cursor: pointer;
  color: var(--sap-dark);
  font-size: 13.5px;
  font-weight: 600;
  max-width: 260px;
}
.benutzer-knopf:hover,
.klapp.ist-offen .benutzer-knopf {
  background: var(--surface-hover) !important;
  border-color: var(--border);
}
.benutzer-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Das kleine Dreieck als reine Form statt als Schriftzeichen: So sieht es auf
   jedem Betriebssystem gleich aus. */
.klapp-pfeil {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  flex: 0 0 auto;
}

.klapp-menue {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Ein Klappmenü darf nie waagrecht scrollen: Ein Rollbalken unter einer
     Benachrichtigungsliste ist unbedienbar, und die halbe Zeile bleibt
     ungelesen. Langer Text bricht stattdessen um. */
  max-width: min(420px, calc(100vw - 32px));
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
.klapp-menue-breit { min-width: 340px; max-width: min(420px, calc(100vw - 32px)); }

.klapp-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  font-size: 13.5px;
}
.klapp-kopf-person { justify-content: flex-start; }
/* Eine lange Adresse darf das Menü nicht auseinanderziehen — min-width: 0
   erlaubt der Spalte, unter ihre Inhaltsbreite zu schrumpfen. */
.klapp-kopf-person > span { min-width: 0; }
.klapp-kopf-person strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.klapp-kopf-person .hint {
  display: block; margin: 0; font-size: 12px; overflow-wrap: anywhere;
}

.klapp-eintrag {
  display: block;
  width: 100%;
  overflow-wrap: anywhere;
  text-align: left;
  background: transparent !important;
  border: none;
  border-radius: 7px;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  font-weight: 500;
  color: var(--text) !important;
  cursor: pointer;
  text-decoration: none;
}
.klapp-eintrag:hover { background: var(--surface-hover) !important; }
.klapp-eintrag-abschluss {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 11px !important;
  color: var(--sap-red, #b00) !important;
}

/* ------------------------------------------------------------------ Glocke */
.btn-icon.glocke { position: relative; display: inline-flex; padding: 7px; }
.btn-icon.glocke svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Die Zahl sitzt am Rand der Glocke. Sie ist zugleich die einzige Stelle, an
   der eine Farbe allein etwas aussagt — deshalb steht die Zahl darin und der
   Knopf trägt zusätzlich einen Titel. */
.glocke-zahl {
  position: absolute;
  top: -1px; right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #c0392b;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.glocke-liste { max-height: 380px; overflow-y: auto; overflow-x: hidden; }
.glocke-leer { padding: 14px 12px; margin: 0; }
.glocke-eintrag {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  border-left: 3px solid transparent;
}
.glocke-eintrag:hover { background: var(--surface-hover); }
.glocke-eintrag.ist-neu { border-left-color: var(--sap-blue, #0a6ed1); background: var(--surface-hover); }
.glocke-zeile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
/* min-width: 0 ist der entscheidende Teil: Ohne ihn weigert sich ein
   Flex-Element, unter seine Inhaltsbreite zu schrumpfen, und ein langer Titel
   zieht das ganze Menü in die Breite. */
.glocke-zeile strong { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.glocke-zeit { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.glocke-eintrag p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.btn-mini {
  background: transparent !important;
  border: none;
  color: var(--sap-blue, #0a6ed1) !important;
  font-size: 12px !important;
  padding: 2px 4px !important;
  cursor: pointer;
}
.btn-mini:hover { text-decoration: underline; }

/* ---------------------------------------------------------- Foto im Profil */
.foto-zeile { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; }
.foto-knoepfe { display: flex; flex-direction: column; gap: 8px; min-width: 240px; flex: 1; }
.foto-knoepfe .hint { margin: 0; }
.foto-knoepfe > .btn-secondary { align-self: flex-start; }

/* ---------------------------------------------------- Handynummer mit Land */
.telefon-zeile { display: flex; gap: 8px; align-items: stretch; }
.telefon-zeile > input { flex: 1; min-width: 0; }
.land-wahl { position: relative; flex: 0 0 auto; }
.land-knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px !important;
  font-size: 13.5px !important;
  cursor: pointer;
  white-space: nowrap;
}
.land-knopf:hover { background: var(--surface-hover) !important; }
/* Die Flagge braucht einen Rahmen: Polen, Malta, San Marino, Zypern und
   Finnland sind überwiegend weiss und verschwänden sonst auf hellem Grund. */
.flagge {
  display: inline-block;
  width: 21px;
  height: 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  flex: 0 0 auto;
}
.flagge svg { display: block; width: 100%; height: 100%; }

.land-liste {
  position: absolute;
  z-index: 70;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  padding: 8px;
}
.land-suche { width: 100%; margin-bottom: 6px; }
.land-treffer { max-height: 300px; overflow-y: auto; }
.land-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent !important;
  border: none;
  border-radius: 6px;
  padding: 7px 8px !important;
  font-size: 13.5px !important;
  color: var(--text) !important;
  cursor: pointer;
}
.land-eintrag:hover { background: var(--surface-hover) !important; }
.land-eintrag.ist-gewaehlt { background: var(--surface-hover) !important; font-weight: 600; }
.land-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.land-vorwahl { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.land-leer { padding: 10px 8px; margin: 0; }

/* --------------------------------------------------- Zertifikat verschicken */
.zertifikat-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.zertifikat-meldung { display: block; margin-top: 8px; font-size: 12.5px; }
.zertifikat-meldung.erfolg { color: var(--sap-green, #107e3e); }
.zertifikat-meldung.fehler { color: var(--sap-red, #b00); }
.zertifikat-meldung.laufend { color: var(--text-muted); }

@media (max-width: 900px) {
  /* Auf schmalen Schirmen bleibt nur das Foto stehen — der Name würde die
     Kopfzeile sonst umbrechen lassen. */
  .benutzer-name { display: none; }
  .benutzer-knopf { padding: 4px !important; }
  .klapp-menue { right: 0; min-width: 220px; }
  .klapp-menue-breit { min-width: min(340px, calc(100vw - 32px)); }
}

/* ---- Wiederherstellungscodes (Anmeldeseite UND Profil) ---- */
.codes-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px 14px;
  margin: 10px 0 16px;
  padding-left: 22px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14.5px;
  letter-spacing: 0.06em;
}
.codes-liste li { padding: 2px 0; }

/* Beim Drucken der Codes soll nur die Liste auf das Papier, nicht die ganze
   Oberfläche mit Menüs und Knöpfen. */
@media print {
  body * { visibility: hidden; }
  #dialog-codes, #dialog-codes * { visibility: visible; }
  #dialog-codes { position: absolute; inset: 0; border: none; box-shadow: none; }
  .dialog-aktionen { display: none !important; }
}

/* Auswahlfelder und mehrzeilige Felder füllen in der Lernansicht dieselbe
   Breite wie die Eingabefelder. Ohne diese Regel wird ein <select> nur so
   breit wie sein längster Eintrag und steht schmal zwischen den anderen
   Feldern — das Admin-Portal hatte sie längst, die Lernansicht nicht. */
.feld-block > input,
.feld-block > select,
.feld-block > textarea { width: 100%; }
.feld-block > select { min-width: 0; }

/* ===================== Fragen zur Lektion =====================
   Ein Fragenfaden steht unter der Lektion, zu der er gehoert. Die Darstellung
   folgt bewusst einem Nachrichtenverlauf und nicht einem Formular: Bei einer
   Verstaendnisfrage ist die Rueckfrage die Regel, und ein Verlauf zeigt auf
   einen Blick, wer zuletzt geschrieben hat. */

.lektion-fragen {
  margin: 28px 0 0;
  padding: 18px 20px 20px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.fragen-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.fragen-kopf .abschnitt-titel { margin: 0; }
.lektion-fragen > .hint { margin: 8px 0 14px; }
.fragen-leer { margin: 0; font-style: italic; }

.fragen-liste { display: flex; flex-direction: column; gap: 10px; }

.frage-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius);
  overflow: hidden;
}
.frage-karte.status-offen { border-left-color: var(--high); }
.frage-karte.status-beantwortet { border-left-color: var(--sap-blue); }
.frage-karte.status-geschlossen { border-left-color: #107e3e; }

/* Die Kopfzeile ist der Schalter zum Auf- und Zuklappen. Ein <button> statt
   eines klickbaren <div>, damit die Tastaturbedienung ohne Zutun funktioniert. */
.frage-kopfzeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}
.frage-kopfzeile:hover { background: var(--surface-hover); }
.frage-betreff { font-weight: 700; color: var(--sap-dark); }
.frage-marken { display: flex; gap: 8px; align-items: center; justify-self: end; }
.frage-fuss { grid-column: 1 / -1; margin: 0; font-size: 12.5px; }

.frage-status {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-hover);
  color: var(--text-muted);
  white-space: nowrap;
}
.status-offen .frage-status { background: #fdf3e7; color: #a35300; }
.status-beantwortet .frage-status { background: #e8f1fb; color: var(--sap-blue-dark); }
.status-geschlossen .frage-status { background: #e8f5ec; color: #0b6631; }

[data-theme="dark"] .status-offen .frage-status { background: #3a2c17; color: #f0b26b; }
[data-theme="dark"] .status-beantwortet .frage-status { background: #16304c; color: #85b8ec; }
[data-theme="dark"] .status-geschlossen .frage-status { background: #16341f; color: #7cc596; }

.frage-neu {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--hot);
  color: #fff;
  white-space: nowrap;
}

.frage-verlauf:empty { display: none; }
.lektion-fragen .frage-karte:not(.ist-offen) .frage-verlauf { display: none; }
.frage-verlauf { padding: 0 14px 14px; border-top: 1px solid var(--border); }

.frage-nachrichten { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }

.frage-nachricht {
  padding: 10px 13px;
  border-radius: var(--radius);
  max-width: 86%;
}
.frage-nachricht p { margin: 4px 0 0; line-height: 1.55; }
.frage-nachricht-kopf {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}
.frage-nachricht-kopf .hint { margin: 0; font-size: 12px; }

/* Eigene Nachrichten links, die der Schulungsleitung rechts und farbig
   abgesetzt — so ist ohne Lesen erkennbar, von wem eine Zeile stammt. */
.frage-nachricht.von-mir { background: var(--surface-hover); align-self: flex-start; }
.frage-nachricht.von-leitung {
  background: #e8f1fb;
  align-self: flex-end;
  border: 1px solid #cfe1f5;
}
[data-theme="dark"] .frage-nachricht.von-leitung { background: #16304c; border-color: #27517d; }

.frage-antwortfeld textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
}
.frage-antwort-aktionen {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.frage-antwort-meldung { font-size: 13px; color: var(--text-muted); }
.frage-antwort-meldung.fehler { color: var(--hot); }
.frage-zu { margin: 12px 0 0; font-style: italic; }

@media (max-width: 640px) {
  .frage-nachricht { max-width: 100%; }
  .frage-kopfzeile { grid-template-columns: 1fr; }
  .frage-marken { justify-self: start; }
}

/* ===================== Anhang: Sprungleiste und Seiten =====================
   Ein Glossar mit über hundert Einträgen ist als eine einzige Seite nicht zu
   benutzen. Die Leiste oben nennt die Abschnitte — im Glossar sind das die
   Anfangsbuchstaben —, darunter steht jeweils nur eine überschaubare Seite. */

.anhang-sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 20px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.anhang-sprungleiste[hidden] { display: none; }

.sprung-marke {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
/* Buchstaben bekommen eine feste Breite, damit die Leiste ein ruhiges Raster
   ergibt und nicht wie eine Reihe verschieden breiter Kästchen aussieht. */
.sprung-kurz { min-width: 30px; text-align: center; font-weight: 600; }
.sprung-marke:hover { border-color: var(--sap-blue); color: var(--sap-blue); }
/* Was auf der gerade sichtbaren Seite steht, ist hervorgehoben — so sieht man
   der Leiste an, wo man sich befindet. */
.sprung-marke.ist-auf-seite {
  background: var(--sap-blue);
  border-color: var(--sap-blue);
  color: #fff;
}

.anhang-blaettern {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.anhang-blaettern[hidden] { display: none; }
.anhang-blaettern button:disabled { opacity: 0.4; cursor: not-allowed; }
.anhang-seiten { font-size: 13.5px; color: var(--text-muted); }

/* Sprungziele dürfen nicht unter der stehengebliebenen Kopfleiste landen. */
#anhang-inhalt h3,
.lektion-text h3[id] {
  scroll-margin-top: calc(var(--kopf-hoehe, 70px) + var(--reiter-hoehe, 48px) + 16px);
}

@media (max-width: 640px) {
  .anhang-blaettern { flex-wrap: wrap; }
  .anhang-seiten { order: 3; width: 100%; }
}

/* ===================== Aktivitäten in einer Lektion =====================
   Zuordnen, Wissenscheck zum Mitschreiben, Karteikarten und Fallszenario.
   Sie heben sich vom Lesetext ab, ohne ihn zu zerreissen: gleicher Rahmen,
   gleicher Radius wie die Boxen, aber ein durchgehender Streifen links, damit
   beim Durchblättern sofort auffällt, wo etwas zu tun ist. */

.aktivitaet {
  margin: 28px 0;
  padding: 18px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--sap-blue);
  border-radius: var(--radius);
}
.aktivitaet.ist-geloest,
.aktivitaet .zo-flaeche.ist-geloest,
.aktivitaet .kk-flaeche.ist-geloest { border-left-color: #107e3e; }

.aktivitaet-titel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sap-dark);
}
.aktivitaet h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.aktivitaet-marke {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #e8f1fb;
  color: var(--sap-blue-dark);
}
.aktivitaet-marke.ist-erledigt { background: #e8f5ec; color: #0b6631; }
[data-theme="dark"] .aktivitaet-marke { background: #16304c; color: #85b8ec; }
[data-theme="dark"] .aktivitaet-marke.ist-erledigt { background: #16341f; color: #7cc596; }

.aktivitaet-anleitung {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ---- Zuordnen ---- */
.zo-spalten { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 18px; }
.zo-vorrat { display: flex; flex-direction: column; gap: 8px; align-content: start; }

.zo-karte {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: grab;
}
.zo-karte:hover { border-color: var(--sap-blue); }
.zo-karte.ist-aufgenommen {
  border-color: var(--sap-blue);
  box-shadow: 0 0 0 2px rgba(10, 110, 209, 0.25);
}
.zo-karte.ist-gelegt { opacity: 0.3; cursor: default; }

.zo-ziele { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zo-ziel {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.zo-ziel.ist-ueber { border-color: var(--sap-blue); background: var(--surface-alt); }
.zo-ziel.ist-richtig { border-style: solid; border-color: #107e3e; background: #f2faf5; }
[data-theme="dark"] .zo-ziel.ist-richtig { background: #16341f; }
.zo-ziel.ist-falsch { border-color: var(--hot); animation: zoWackeln 0.35s; }
@keyframes zoWackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.zo-ablage {
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-hover);
  font-weight: 600;
  cursor: pointer;
}
.zo-ziel.ist-richtig .zo-ablage { background: transparent; cursor: default; }
.zo-erklaerung { font-size: 14px; line-height: 1.55; }
.zo-stand { margin: 14px 0 0; font-size: 13.5px; color: var(--text-muted); }
.zo-flaeche.ist-geloest .zo-stand { color: #0b6631; font-weight: 600; }

/* ---- Wissenscheck zum Mitschreiben ---- */
.ws-interaktiv > li { margin-bottom: 20px; }
.ws-interaktiv > li.ist-bearbeitet::marker { color: #107e3e; }
.ws-arbeit { margin-top: 10px; }
.ws-label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
.ws-feld {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
  resize: vertical;
}
.ws-feld[readonly] { opacity: 0.75; }
.ws-aktionen { margin-top: 8px; }
.ws-loesung {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid var(--sap-blue);
  background: var(--surface-alt);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ws-loesung-titel {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ws-loesung-text { font-size: 14px; line-height: 1.6; }
.ws-loesung-text p { margin: 0 0 8px; }
.ws-bewertung {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ws-frage-text { font-size: 13.5px; color: var(--text-muted); margin-right: 4px; }
.ws-wert {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.ws-wert:hover { border-color: var(--sap-blue); color: var(--sap-blue); }
.ws-wert.ist-gewaehlt {
  background: var(--sap-blue);
  border-color: var(--sap-blue);
  color: #fff;
  font-weight: 600;
}
.ws-alle { margin: 6px 0 0; }

/* ---- Karteikarten ---- */
.kk-flaeche { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kk-karte {
  width: 100%;
  max-width: 560px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: center;
}
.kk-karte:focus-visible { outline: 2px solid var(--sap-blue); outline-offset: 2px; }
.kk-vorne { font-size: 19px; font-weight: 700; color: var(--sap-dark); }
.kk-hinten {
  font-size: 14.5px;
  line-height: 1.6;
  text-align: left;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.kk-hinweis { margin: 0; font-size: 12.5px; color: var(--text-muted); }
.kk-aktionen { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.kk-stand { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.kk-flaeche.ist-geloest .kk-stand { color: #0b6631; font-weight: 600; }

/* ---- Fallszenario ---- */
.szenario-lage p { margin: 0 0 10px; line-height: 1.65; }
.szenario-wahlen { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.szenario-wahl {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.szenario-knopf {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.szenario-knopf:hover { color: var(--sap-blue); }
.szenario-knopf:disabled { cursor: default; }
.szenario-folge { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.szenario-wahl.wertung-richtig { border-color: #107e3e; }
.szenario-wahl.wertung-falsch { border-color: var(--hot); }
.szenario-wahl.wertung-teilweise { border-color: var(--high); }
.szenario-wahl.ist-gewaehlt { background: var(--surface-alt); }
.szenario-rueckmeldung {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
}
.szenario-rueckmeldung.wertung-richtig { background: #e8f5ec; color: #0b6631; }
.szenario-rueckmeldung.wertung-teilweise { background: #fdf3e7; color: #a35300; }
.szenario-rueckmeldung.wertung-falsch { background: #fdeaea; color: #a30000; }
[data-theme="dark"] .szenario-rueckmeldung.wertung-richtig { background: #16341f; color: #7cc596; }
[data-theme="dark"] .szenario-rueckmeldung.wertung-teilweise { background: #3a2c17; color: #f0b26b; }
[data-theme="dark"] .szenario-rueckmeldung.wertung-falsch { background: #3a1c1c; color: #f09b9b; }

@media (max-width: 720px) {
  .zo-spalten { grid-template-columns: 1fr; }
  .zo-vorrat { flex-direction: row; flex-wrap: wrap; }
  .zo-ziel { grid-template-columns: 1fr; }
}

/* ===================== Lern-Dashboard =====================
   Zwei Fragen: Was mache ich als Nächstes, und bis wann? Deshalb oben ein
   einzelner hervorgehobener Kasten und darunter die drei Fächer nach Frist.
   Es erscheint nur, wenn überhaupt eine Frist gesetzt ist. */

.lern-dashboard { margin: 4px 0 28px; display: grid; gap: 18px; }
.lern-dashboard[hidden] { display: none; }

.naechster-kurs {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--sap-blue);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.naechster-kurs.ist-dringend { border-left-color: var(--high); }
.naechster-kurs.ist-ueberfaellig { border-left-color: var(--hot); }
.naechster-kurs.ist-fertig { border-left-color: #107e3e; }

.nk-marke {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ist-ueberfaellig .nk-marke { color: var(--hot); }
.naechster-kurs h3 { margin: 0 0 8px; font-size: 20px; color: var(--sap-dark); }
.nk-frist { margin: 0 0 6px; font-size: 14.5px; }
.nk-weiter { margin: 0 0 12px; font-size: 14px; color: var(--text-muted); }
.naechster-kurs .progress-bar { margin: 4px 0 6px; }
.naechster-kurs .hint { margin: 0 0 14px; }
.btn-nk-oeffnen {
  padding: 9px 18px;
  font-size: 14px;
}

/* Die drei Fächer nebeneinander, auf schmalen Schirmen untereinander. */
.dringlichkeit-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.dringlichkeit-fach {
  padding: 14px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--text-muted);
  border-radius: var(--radius);
}
.dringlichkeit-fach.fach-dringend { border-top-color: var(--high); }
.dringlichkeit-fach.fach-bald { border-top-color: var(--sap-blue); }
.dringlichkeit-fach.fach-rest { border-top-color: var(--low); }
.dringlichkeit-fach header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.dringlichkeit-fach h3 { margin: 0; font-size: 13.5px; color: var(--sap-dark); }
.fach-zahl { font-size: 24px; font-weight: 700; color: var(--sap-dark); line-height: 1; }
.fach-leer { margin: 0; font-size: 13px; font-style: italic; color: var(--text-muted); }

.fach-kurs {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.fach-kurs:first-of-type { border-top: none; }
.fach-kurs:hover { background: var(--surface-hover); }
.fach-kurs:focus-visible { outline: 2px solid var(--sap-blue); outline-offset: 2px; }
.fach-kurs-kopf {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 5px;
}
.fach-kurs-titel { font-size: 13.5px; font-weight: 600; color: var(--text); }
.fach-kurs-frist { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.fach-kurs.ist-ueberfaellig .fach-kurs-frist { color: var(--hot); font-weight: 600; }
.fach-kurs.ist-fertig .fach-kurs-frist { color: #0b6631; }
.fach-kurs.ist-fertig .progress-fill { background: #107e3e; }
.fach-kurs.ist-ueberfaellig .progress-fill { background: var(--hot); }
.fach-kurs-zahl { font-size: 11.5px; color: var(--text-muted); }

/* ===================== Suche und allgemeine Frage =====================
   Beide Symbole sitzen links der Glocke. Sie verwenden dieselbe Grundform
   wie diese, damit die Kopfzeile eine Reihe bleibt und nicht drei
   verschiedene Knopfarten zeigt. */

.dialog-suche {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  padding: 18px 20px 20px;
}
.suche-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}
.suche-lupe { display: flex; color: var(--text-muted); }
.suche-lupe svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
#suche-feld {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text);
}
#suche-feld:focus { outline: 2px solid var(--sap-blue); outline-offset: 1px; }
.suche-hinweis { margin: 10px 2px 0; }

.suche-treffer { margin-top: 12px; max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
.suche-gruppe + .suche-gruppe { margin-top: 16px; }
.suche-gruppe h4 {
  margin: 0 0 6px;
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.suche-treffer-zeile {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 9px 11px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  overflow-wrap: anywhere;
}
.suche-treffer-zeile:hover { background: var(--surface-hover); }
.suche-treffer-zeile:focus-visible { outline: 2px solid var(--sap-blue); outline-offset: -2px; }
.st-titel { display: block; font-size: 14.5px; font-weight: 600; color: var(--sap-dark); }
.st-kurs { display: block; font-size: 11.5px; color: var(--sap-blue); margin-top: 1px; }
.st-text { display: block; font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

/* Die beiden neuen Kopfzeilensymbole übernehmen Form und Strichstärke der
   Glocke, damit die Kopfzeile eine Reihe bleibt. */
#btn-suche, #btn-chat { position: relative; display: inline-flex; padding: 7px; }
#btn-suche svg, #btn-chat svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---- Kursunterlagen als PDF ---- */
.kurs-pdf-knoepfe { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#pdf-meldung { margin: 4px 0 0; min-height: 1.2em; }
#pdf-meldung.pdf-laeuft { color: var(--sap-blue); }
#pdf-meldung.pdf-fehler { color: var(--hot); }