/* ==========================================================================
   Thinkmedia LMS — Shell-Design-System
   Eigenstaendig entwickelt, Farbwelt/Formensprache an das ThinkMedia-
   E-Learning-Kursvorlagen-Skill angelehnt (Navy + Rot, Karten mit weichem
   Schatten, grosse abgerundete Ecken), damit LMS-Oberflaeche und die darin
   ausgelieferten SCORM-Kurse eine durchgaengige Markenwirkung haben.
   ========================================================================== */

:root {
  --navy-950: #0a1526;
  --navy-900: #0d1d33;
  --navy-800: #122642;
  --navy-700: #1a3355;
  --navy-600: #24456f;

  --red-500: #e63946;
  --red-600: #d1293a;
  --red-100: #fbe0e2;

  --green-500: #2e9e5b;
  --green-100: #e2f5ea;
  --gold-500: #d9a441;

  --ink-900: #16202e;
  --ink-700: #33404f;
  --ink-600: #4c596b;
  --ink-400: #8493a6;

  --paper: #f4f7fb;
  --page-bg: #f4f7fb;
  --card: #ffffff;
  --border: #e3e8f0;

  --radius-lg: 9px;
  --radius-md: 6px;
  --radius-sm: 4px;
  --shadow-card: 0 10px 30px rgba(10, 21, 38, 0.10);
  --shadow-pop: 0 18px 44px rgba(10, 21, 38, 0.20);
  --topbar-h: 68px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--page-bg);
  color: var(--ink-900);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.25; color: var(--navy-900); }
p { margin: 0 0 0.8em; line-height: 1.55; }
a { color: var(--red-600); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--paper); border-radius: 4px; padding: 2px 6px; }

/* ---------- Topbar ---------- */
.topbar {
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950));
  color: #fff; height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-badge {
  width: 38px; height: 38px; border-radius: 10px; background: var(--red-500);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(230,57,70,0.35); color: #fff; font-weight: 800; font-size: 1rem;
}
.brand strong { font-size: 1.02rem; letter-spacing: 0.2px; }
.brand small { display: block; color: #aebbd0; font-size: 0.74rem; }

.topnav { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav a {
  color: #cdd7e6; text-decoration: none; font-size: 0.88rem; font-weight: 600;
  padding: 9px 13px; border-radius: 8px; transition: background 0.15s, color 0.15s;
}
.topnav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topnav a.active { background: rgba(230,57,70,0.18); color: #fff; }

.topbar-user { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: #cdd7e6; }
.topbar-user form { margin: 0; }
.topbar-locale-switcher { display: flex; gap: 6px; }
.topbar-locale-switcher a {
  color: rgba(255,255,255,0.5); font-size: 0.72rem; font-weight: 700; text-decoration: none;
  padding: 3px 6px; border-radius: 4px; letter-spacing: 0.02em;
}
.topbar-locale-switcher a:hover { color: #fff; }
.topbar-locale-switcher a.active { color: #fff; background: rgba(255,255,255,0.15); }
.profile-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.3); color: #fff; font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.profile-avatar:hover { background: rgba(255,255,255,0.22); }
.profile-avatar.active { background: var(--red-500); border-color: var(--red-500); }
.btn-ghost-light {
  background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  padding: 7px 14px; border-radius: 8px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}

/* ---------- Hamburger-Menü (mobil) ---------- */
.topbar-collapsible { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hamburger-btn {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 38px; background: none; border: none; cursor: pointer; padding: 8px;
  flex-shrink: 0;
}
.hamburger-btn span { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.hamburger-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.16); }

/* ---------- Page body ---------- */
.page { padding: 28px 28px 48px; max-width: 1360px; margin: 0 auto; }

/* ---------- Startseiten-Header (volle Breite, direkt an Navigation) ---------- */
.dashboard-header-banner { position: relative; width: 100%; line-height: 0; overflow: hidden; }
.dashboard-header-banner img {
  width: 100%; object-fit: cover; display: block;
  /* Nutzeranfrage: Header-Hoehe der Startseite in den Einstellungen
     konfigurierbar machen (siehe DECISIONS.md D123). Die mobile
     Media-Query weiter unten ueberschreibt dies bewusst unabhaengig
     von diesem Wert mit einer fest verdrahteten Hoehe - die dortige
     Bemessung war eigens auf den in D118 behobenen Ueberlappungsfehler
     zwischen Titel und Werkzeugleiste abgestimmt und soll durch eine
     zu klein gewaehlte Desktop-Einstellung nicht erneut gefaehrdet
     werden. */
  height: var(--header-height, 451px);
}
/* Nutzeranfrage: Headline/Subline linksbuendig mit der Kachelmatrix und
   vertikal mittig im Header-Bild (siehe DECISIONS.md D106). Verwendet
   dieselbe max-width/margin:auto/padding-Berechnung wie
   .dashboard-header-inner darunter - eine reine "left: 28px"-Angabe
   (vorherige Umsetzung, D101) driftet auf breiten Bildschirmen nach
   links von der tatsaechlichen, auf 1360px begrenzten und zentrierten
   Kachelmatrix weg. */
.dashboard-header-title-block {
  position: absolute; inset: 0; z-index: 2;
  max-width: 1360px; margin: 0 auto; padding: 0 28px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  text-shadow: 0 2px 12px rgba(10,21,38,0.55);
  /* Nutzeranfrage: die Kursfilter-Reiter, das Suchfeld und die
     Kategorie-Auswahl darunter waren nicht anklickbar (siehe
     DECISIONS.md D114). Ursache: dieser Block spannt (seit D106) die
     komplette Bannerhoehe auf und lag per z-index UEBER dem
     Overlay-Container, in dem sich diese Bedienelemente befinden - der
     Block selbst enthaelt aber nur Text (h1/p), keine eigenen
     interaktiven Elemente. Auch dort, wo nur der transparente,
     "leere" Bereich dieses Blocks sichtbar ist (ueber und unter dem
     zentrierten Text), fing er Klicks ab, bevor sie die Elemente
     darunter erreichen konnten. pointer-events: none gibt Klicks
     ungehindert an das darunterliegende .dashboard-header-overlay
     weiter. */
  pointer-events: none;
}
.dashboard-header-title-block h1 { color: #fff; font-size: 2.6rem; margin: 0; }
.dashboard-header-title-block .page-sub { color: rgba(255,255,255,0.92); margin: 6px 0 0; font-size: 1rem; }
.dashboard-header-overlay {
  position: absolute; inset: 0; line-height: normal;
  background: linear-gradient(180deg, rgba(10,21,38,0.1) 0%, rgba(10,21,38,0.78) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
}
/* Exakt dieselbe Box-Berechnung wie .page (max-width/margin/padding-links),
   damit Titel und Filterzeile links buendig mit den Kurskacheln stehen.
   Nutzeranfrage: die Reiter sollen direkt auf der Unterkante des
   Header-Bildes sitzen (siehe DECISIONS.md D124) - dafuer das bisherige
   untere Innenpolster (26px) entfernt, das dort einen sichtbaren Abstand
   erzeugte. Seitliches Polster bleibt fuer die Ausrichtung erhalten. */
.dashboard-header-inner { max-width: 1360px; margin: 0 auto; width: 100%; padding: 0 28px; box-sizing: border-box; }
.dashboard-header-overlay .page-header { margin-bottom: 16px; }
.dashboard-kpi-filter-row {
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.dashboard-kpi-filter-row::-webkit-scrollbar { display: none; height: 0; }
.kpi-filter-btn {
  /* Nutzeranfrage: echte Reiternavigation mit Outlines statt der
     bisherigen reinen Unterstreichung (siehe DECISIONS.md D114). Der
     aktive Reiter erhaelt links/oben/rechts eine sichtbare Outline mit
     gerundeten oberen Ecken (klassische "Reiterkarte"-Optik) und keine
     untere Kante, damit er optisch mit dem Bereich darunter verschmilzt;
     inaktive Reiter tragen eine dezente, kaum sichtbare Outline. */
  background: none; border: 1px solid rgba(255,255,255,0.18); border-bottom: none;
  border-radius: 10px 10px 0 0; padding: 8px 14px 10px; cursor: pointer; color: #fff;
  display: flex; align-items: center; gap: 8px; opacity: 0.8; flex-shrink: 0;
}
.kpi-filter-btn:hover { opacity: 1; }
.kpi-filter-btn.active {
  opacity: 1; border-color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.08);
}
.kpi-filter-btn span { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; color: rgba(255,255,255,0.85); white-space: nowrap; }
.kpi-filter-btn span strong { font-size: 1.1rem; font-weight: 800; color: var(--red-500, #e63946); }

/* ---------- Nutzeranfrage: Suchmaske und Kategorie-Auswahl in einer
   Zeile, gleiches transparentes/weisses Erscheinungsbild; Kursfilter
   ohne Icons mit roten Zahlen; responsives Hamburger-Menü fuer die
   Kursfilter (siehe DECISIONS.md D112). ---------- */
.dashboard-toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dashboard-transparent-input {
  background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: 999px;
  padding: 8px 16px; font-size: 0.92rem;
}
.dashboard-transparent-input::placeholder { color: rgba(255,255,255,0.75); }
.dashboard-transparent-input option { color: var(--ink-900); }
.dashboard-search-input {
  flex: 1 1 260px; max-width: 360px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cline x1='11' y1='11' x2='15' y2='15'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 15px; padding-left: 38px;
}
/* Suchfeld-Löschkreuz (native "x" bei Texteingabe) ebenfalls weiss faerben,
   soweit vom Browser unterstuetzt (WebKit-basierte Browser). */
.dashboard-search-input::-webkit-search-cancel-button { filter: invert(1) grayscale(1) brightness(2); }
select.dashboard-transparent-input {
  /* Nutzeranfrage: Suchfeld und Kategorie-Auswahl sollen in einer Zeile
     stehen (siehe DECISIONS.md D115) - ein echter Screenshot bestaetigte,
     dass die Auswahlliste stattdessen die volle Zeilenbreite einnahm.
     Ursache: die globale Basis-Regel fuer Formularfelder weiter unten
     ("input[type=text], ..., select, textarea { width: 100%; ... }",
     urspruenglich fuer Admin-Formulare gedacht) setzt eine EXPLIZITE
     Breite von 100% auf JEDES <select>-Element der gesamten Anwendung.
     Bei flex-basis:auto (aus "flex: 0 0 auto") greift aber genau diese
     explizite width-Angabe als Basis, nicht die inhaltsbasierte
     Eigenbreite - "flex: 0 0 auto" allein reichte deshalb nicht aus, es
     musste zusaetzlich "width: auto" gesetzt werden, um die globale
     Regel zu ueberschreiben. */
  flex: 0 0 auto; width: auto;
}

.kpi-hamburger-btn {
  display: none; background: none; border: 1px solid rgba(255,255,255,0.35); color: #fff;
  border-radius: 999px; padding: 8px 16px; font-size: 0.92rem; cursor: pointer; flex: 0 0 auto;
}
.kpi-hamburger-btn:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 720px) {
  .dashboard-kpi-filter-wrap { display: none; }
  .dashboard-kpi-filter-wrap.open { display: block; margin-top: 4px; }
  .kpi-hamburger-btn { display: inline-block; flex: 0 0 auto; padding: 8px 12px; }
  /* Nutzeranfrage: Suchfeld, Kategorie-Auswahl und Filter-Button sollen
     auch auf schmalen Bildschirmen in EINER Zeile stehen (siehe
     DECISIONS.md D118) - vorher erzwang "flex: 1 1 100%" eine eigene,
     volle Zeile fuer das Suchfeld, wodurch Auswahl und Filter-Button in
     eine zweite Zeile darunter umbrachen. Das Suchfeld darf jetzt
     schrumpfen (kein max-width mehr), behaelt aber eine sinnvolle
     Mindestbreite fuer Icon und ein paar Zeichen Platzhaltertext. */
  .dashboard-search-input { flex: 1 1 70px; min-width: 70px; max-width: none; }
  select.dashboard-transparent-input { padding-left: 12px; padding-right: 28px; }
}
@media (max-width: 720px) {
  /* Etwas hoeher als am Desktop, damit Headline+Subline UND die
     Werkzeugleiste (Suche/Kategorie/Filter bzw. Kursfilter-Reiter)
     trotz geringerer Bildschirmbreite beide ohne Ueberlappung Platz
     finden (siehe naechster Absatz zur Root Cause). */
  .dashboard-header-banner img { height: 320px; }
  /* Nutzeranfrage mit Screenshot: die Subline ueberlagerte sichtbar das
     Suchfeld (siehe DECISIONS.md D118). Root Cause: der Titel-Block
     zentriert seinen Inhalt vertikal ueber die GESAMTE Bannerhoehe
     (siehe .dashboard-header-title-block weiter oben, fuer Desktop
     gedacht - D106), waehrend die Werkzeugleiste in einem separaten,
     unabhaengigen Overlay-Container an dessen UNTEREM Rand verankert
     ist. Auf einem ausreichend hohen Desktop-Banner bleibt zwischen
     beiden genug Abstand; auf der niedrigeren mobilen Bannerhoehe
     reichte der Platz nicht mehr aus, sodass sich die vertikal
     zentrierte Subline mit dem am unteren Rand beginnenden Suchfeld
     ueberschnitt. Statt die exakten Hoehen beider unabhaengigen
     Bloecke aufeinander abzustimmen (fragil bei jeder Textaenderung),
     wird der Titel-Block auf Mobil stattdessen oben verankert statt
     zentriert - das schafft unabhaengig von der genauen Textlaenge
     immer einen klar getrennten Bereich fuer die Werkzeugleiste
     darunter. */
  .dashboard-header-title-block { padding: 20px 16px 0; justify-content: flex-start; }
  .dashboard-header-title-block h1 { font-size: 1.7rem; }
  .dashboard-header-inner { padding: 0 16px; }
  .dashboard-kpi-filter-row { gap: 14px; }
  /* Nutzeranfrage: Filter auf der Startseite responsiver gestalten
     (siehe DECISIONS.md D111). Die Zeile scrollt bereits horizontal
     (siehe .dashboard-kpi-filter-row weiter oben), war auf schmalen
     Bildschirmen aber ohne jeden visuellen Hinweis darauf - wirkte
     dadurch eher abgeschnitten/kaputt als bewusst scrollbar. Ein
     dezenter Verlauf am rechten Rand macht die Scrollbarkeit sichtbar.
     Bewusst nur unterhalb dieser Breite aktiv, da auf breiteren
     Bildschirmen ohnehin kein Ueberlauf entsteht. */
  .dashboard-kpi-filter-wrap { position: relative; }
  .dashboard-kpi-filter-wrap::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 2px; width: 32px;
    background: linear-gradient(to right, transparent, rgba(10,21,38,0.85));
    pointer-events: none;
  }
}
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-header h1 { font-size: 1.65rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.page-sub { color: var(--ink-400); font-size: 0.92rem; margin-top: -8px; }
.page-header .page-sub { color: rgba(255,255,255,0.8); }

.flash {
  background: var(--green-100); color: #1c6b3f; border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 18px; font-size: 0.92rem; font-weight: 600;
}

/* ---------- Cards / sections ---------- */
.card { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px; margin-bottom: 24px; }
.card > h2 { font-size: 1.1rem; margin-bottom: 16px; }

/* ---------- KPI tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi-tile { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 20px; }
.kpi-tile strong { display: block; font-size: 1.7rem; color: var(--navy-900); }
.kpi-tile span { color: var(--ink-400); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- Grosse Kurskacheln (Kursuebersicht) ---------- */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; margin-bottom: 28px; }
.course-tile {
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.15s, transform 0.15s;
}
.course-tile:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }
.course-tile-head {
  height: 96px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  position: relative; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px 16px;
}
.course-tile-head-link { display: block; text-decoration: none; }
.course-tile-title-link { color: inherit; text-decoration: none; display: block; }
.course-tile-title-link:hover h3 { color: var(--red-600); text-decoration: underline; }
.course-tile-head.is-inactive { background: linear-gradient(135deg, #5b6473, #7b8494); }
.course-tile-badge {
  background: var(--red-500); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.course-tile-badge.is-off { background: rgba(255,255,255,0.25); }
.course-tile-badge.is-passed { background: #2e9e5b; }
.course-tile-version { color: rgba(255,255,255,0.85); font-size: 0.78rem; font-weight: 600; }
.course-tile-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }
.course-tile-body h3 { font-size: 1.02rem; margin-bottom: 6px; }
.course-tile-meta { color: var(--ink-400); font-size: 0.82rem; margin-bottom: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.course-tile-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.course-tile-new {
  border: 2px dashed var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; color: var(--ink-400);
  min-height: 210px; background: #fff;
}
.course-tile-new:hover { border-color: var(--red-500); color: var(--red-600); text-decoration: none; }
.course-tile-new .plus { font-size: 2.2rem; line-height: 1; color: var(--red-500); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 9px;
  font-weight: 700; font-size: 0.88rem; border: none; cursor: pointer; text-decoration: none;
  transition: transform .1s ease, box-shadow .1s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--red-500); color: #fff; box-shadow: 0 6px 16px rgba(230,57,70,0.28); }
.btn-primary:hover { background: var(--red-600); }
.btn-secondary { background: var(--paper); color: var(--navy-900); border: 1px solid var(--border); }
.btn-secondary:hover { background: #eef1f6; }
.btn-danger { background: #fff; color: var(--red-600); border: 1px solid var(--red-100); }
.btn-danger:hover { background: var(--red-100); }
.btn-sm { padding: 7px 13px; font-size: 0.8rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--ink-700); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=file], input[type=number], input[type=color], select, textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  font-size: 0.92rem; font-family: inherit; background: #fff; color: var(--ink-900);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red-500); outline-offset: 1px; }
.field-hint { color: var(--ink-400); font-size: 0.78rem; margin-top: 4px; }
.error-log-viewer {
  max-height: 360px; overflow-y: auto; background: #0d1524; color: #d7e2f2;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.78rem; line-height: 1.55; padding: 14px 16px; border-radius: var(--radius-sm);
  white-space: pre-wrap; word-break: break-word;
}
/* Nutzeranfrage: Suchfunktion in Kurs-/Benutzerübersicht (siehe
   DECISIONS.md D101) - eigene, etwas kompaktere Optik statt der
   vollen Formularfeldbreite, da die Suche meist neben einer Überschrift
   sitzt statt in einem Formular. */
.admin-search-input {
  width: 100%; max-width: 320px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); font-size: 0.88rem; margin: 4px 0 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7480' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5.5'/%3E%3Cline x1='11' y1='11' x2='15' y2='15'/%3E%3C/svg%3E") no-repeat 12px center;
  background-size: 15px; padding-left: 36px;
}
.checkbox-label { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 8px; }
.checkbox-label input[type=checkbox] { width: auto; }
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 200px; }

/* ---------- Einstellungen: zweispaltiges Vollbild-Layout ---------- */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 960px) {
  .settings-grid { grid-template-columns: 1fr; }
}

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--ink-400); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---------- WYSIWYG-Editor ---------- */
.wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.wysiwyg-btn {
  background: var(--paper); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 0.78rem; cursor: pointer; color: var(--ink-700);
}
.wysiwyg-btn:hover { background: #eef1f6; }
.wysiwyg-editable {
  min-height: 140px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 0.92rem; background: #fff; color: var(--ink-900);
}
.wysiwyg-editable:focus { outline: 2px solid var(--red-500); outline-offset: 1px; }
.wysiwyg-editable p { margin: 0 0 0.6em; }
.wysiwyg-editable ul, .wysiwyg-editable ol { margin: 0 0 0.6em; padding-left: 1.4em; }

/* ---------- Einstellungen: aufklappbare Rechtstext-Felder ---------- */
.settings-collapse {
  border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 16px; overflow: hidden;
}
.settings-collapse summary {
  cursor: pointer; padding: 10px 14px; font-weight: 600; font-size: 0.92rem; color: var(--ink-900);
  background: var(--paper); list-style: none; display: flex; align-items: center; justify-content: space-between;
}
.settings-collapse summary::-webkit-details-marker { display: none; }
.settings-collapse summary::after { content: '+'; font-size: 1.1rem; color: var(--ink-400); }
.settings-collapse[open] summary::after { content: '−'; }
.settings-collapse > div, .settings-collapse > textarea { margin: 12px 14px 14px; }
.settings-collapse > p { margin: 0 14px 14px; }
.settings-collapse > textarea { width: calc(100% - 28px); }

/* ---------- Ankündigungen (Startseite) ---------- */
.announcement-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.announcement-card {
  background: linear-gradient(135deg, #fff8e8, #fff); border: 1px solid #f0dfb0;
  border-radius: var(--radius-md); padding: 18px 22px;
}
.announcement-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--navy-900); }
.announcement-card .announcement-body { font-size: 0.9rem; color: var(--ink-700); }
.announcement-body p:last-child { margin-bottom: 0; }
.announcement-admin-item { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; }
.announcement-admin-item.is-inactive { opacity: 0.55; }
.announcement-admin-toolbar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.pill-green { background: var(--green-100); color: #1c6b3f; }
.pill-red { background: var(--red-100); color: var(--red-600); }
.pill-gray { background: #eef1f6; color: var(--ink-600); }
.pill-gold { background: #faf1de; color: #8a6415; }

/* ---------- Große KPI-Karten mit Icon (Reporting) ---------- */
.kpi-card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.kpi-card {
  background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 12px; display: flex; align-items: center; gap: 10px; min-width: 0;
  border: none; text-align: left; font: inherit; width: 100%; cursor: pointer; transition: box-shadow 0.15s, transform 0.1s;
}
.kpi-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.kpi-icon {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.kpi-icon svg { width: 17px; height: 17px; }
.kpi-text { font-size: 0.68rem; color: var(--ink-600); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-text strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--ink-900); margin-top: 1px; line-height: 1.1; }

@media (max-width: 900px) {
  .kpi-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .kpi-card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Kreisdiagramm (Statusverteilung) ---------- */
.donut-row { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.donut {
  width: 160px; height: 160px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.donut-hole {
  width: 100px; height: 100px; border-radius: 50%; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--border);
}
.donut-hole strong { font-size: 1.5rem; color: var(--navy-900); line-height: 1.1; }
.donut-hole span { font-size: 0.7rem; color: var(--ink-400); }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.donut-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-700); }
.donut-legend strong { margin-left: auto; color: var(--ink-900); }
.donut-percent { color: var(--ink-400); font-size: 0.78rem; min-width: 42px; text-align: right; }
.donut-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

/* ---------- Scrollbare Tabellen (verhindert horizontalen Überlauf) ---------- */
.table-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; max-width: 100%; }
.table-scroll table { min-width: 720px; }

/* ---------- Kurs-Bestehensquote-Kreisdiagramme ---------- */
.course-gauge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px; }
.course-gauge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.course-gauge-ring { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.course-gauge-hole { width: 62px; height: 62px; border-radius: 50%; background: var(--card); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--border); }
.course-gauge-hole strong { font-size: 1rem; color: var(--navy-900); }
.course-gauge-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-700); }
.course-gauge-sub { font-size: 0.72rem; color: var(--ink-400); }

@media (max-width: 720px) {
  .topbar { flex-direction: row; flex-wrap: nowrap; height: auto; min-height: var(--topbar-h); padding: 12px 16px; align-items: center; position: relative; }
  .hamburger-btn { display: flex; }
  .topbar-collapsible {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    background: var(--navy-950); flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px 16px 18px; box-shadow: 0 12px 24px rgba(10,21,38,0.3);
  }
  .topbar-collapsible.is-open { display: flex; }
  .topnav { flex-direction: column; gap: 2px; }
  .topnav a { padding: 12px 14px; }
  .topbar-user { justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); }
  .page { padding: 20px 16px 40px; }
}

/* ---------- Footer + Rechtstexte-Popup ---------- */
.site-footer {
  max-width: 1360px; margin: 0 auto; padding: 20px 28px 32px; text-align: center;
  color: var(--ink-400); font-size: 0.8rem;
}
.site-footer a { color: var(--ink-600); }
.site-footer span { margin: 0 8px; }
.admin-version-footer { text-align: center; color: var(--ink-400); font-size: 0.72rem; margin: 24px 0 0; }
.legal-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10, 21, 38, 0.55);
  align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.legal-modal {
  background: #fff; border-radius: var(--radius-md); max-width: 640px; width: 100%;
  max-height: 80vh; overflow-y: auto; padding: 32px 28px; position: relative;
}
.legal-modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-400);
}
.legal-modal-close:hover { color: var(--ink-900); }
/* Rechtstexte (Impressum/Datenschutz/AGB): Schriftgröße um 30% reduziert
   gegenüber dem Basiswert von 1rem (Nutzeranfrage). */
#legal-modal-body { font-size: 0.7rem; line-height: 1.5; }
#legal-modal-body h1, #legal-modal-body h2, #legal-modal-body h3, #legal-modal-body h4 { font-size: 1.1em; }
.on-dark .site-footer, .on-dark .site-footer a { color: rgba(255,255,255,0.65); }
.on-dark .site-footer a:hover { color: #fff; }

/* ---------- Reporting: KPI-Detail-Modal ---------- */
.reporting-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(10, 21, 38, 0.55);
  align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.reporting-modal-overlay.is-open { display: flex; }
.reporting-modal {
  background: #fff; border-radius: var(--radius-md); max-width: 1100px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: 28px; position: relative;
}
.reporting-modal-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-400);
}
.reporting-modal-close:hover { color: var(--ink-900); }
.reporting-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-right: 32px; }
.reporting-modal-header h2 { margin: 0; }

/* ---------- Kursübersicht: Fortschrittsbalken ---------- */
.progress-bar { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; margin-bottom: 12px; }
.progress-bar-fill { height: 100%; border-radius: 999px; transition: width 0.2s; }