/* ============================================================
   SHAH CONSULTING GmbH — Anwendungs-Schalen
   ------------------------------------------------------------
   Rein ADDITIVE Bereichs-Komponenten: .learn-* (Lern-Hub), .admin-*
   (Verwaltung), .studio-* (Authoring). Sie komponieren ausschliesslich
   Tokens aus sc-tokens.css (uebersetzt in sc-bridge.css) -- Dark- und
   Hell-Theme funktionieren dadurch automatisch mit.

   Bricht KEINE .sc-*-Klassen und laesst die stabilen Test-/Flow-
   Selektoren unberuehrt.

   LADEREIHENFOLGE (verbindlich):
     sc-fonts.css -> sc-tokens.css -> sc-bridge.css -> sc.css
     -> sc-components.css -> sc-app.css
   ============================================================ */

/* ============================================================
   SHAH ACADEMY — Lern-Hub App-Shell (/learn) im LearningSuite-Stil
   ------------------------------------------------------------
   Rein ADDITIVE Komponenten (Klassen-Praefix .learn-*). Bricht KEINE
   bestehenden .sc-*-Klassen und belaesst die stabilen Test-/Flow-
   Selektoren unberuehrt: #learn-hub, #compliance-status (data-state),
   .learn-course-card, .learn-course-card a.sc-btn--secondary
   ("Kurs öffnen"), .learn-test-cta. Komponiert ausschliesslich DS-
   Tokens -> Dark-Theme & Light-Theme funktionieren automatisch.
   Mobile-first; ab 920px erscheint die feste linke Sidebar.
   ============================================================ */
:root { --learn-sidebar-w: 264px; }

.learn-shell { min-height: 100vh; }

/* ---- Zweispaltiges Grundlayout: Sidebar | Hauptbereich ---- */
.learn-layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 820px) {
  .learn-layout { grid-template-columns: var(--learn-sidebar-w) 1fr; }
}

/* ---- Linke Sidebar ---- */
.learn-sidebar {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-5);
  background: var(--bg-base); border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 820px) {
  .learn-sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-bottom: none; border-right: 1px solid var(--border-subtle);
  }
}
.learn-sidebar__top { display: flex; flex-direction: column; gap: var(--space-6); }
.learn-sidebar__foot { display: flex; flex-direction: column; gap: var(--space-3); }

/* Marke */
.learn-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.learn-brand__name {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); letter-spacing: var(--ls-tight); color: var(--text-primary);
}

/* Nutzer-Chip (Avatar mit Initialen + Name + Rolle) */
.learn-userchip {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border-subtle);
}
.learn-userchip__avatar { --size: 38px; background: var(--brand-soft); color: var(--accent-300); font-weight: var(--fw-bold); }
.learn-userchip__meta { display: flex; flex-direction: column; min-width: 0; }
.learn-userchip__name {
  font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.learn-userchip__role { font-size: var(--fs-xs); color: var(--text-tertiary); }

/* Navigation */
.learn-nav { display: flex; flex-direction: column; gap: 2px; }
.learn-nav__section {
  margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--text-tertiary); font-weight: var(--fw-bold);
}
.learn-nav__section:first-child { margin-top: 0; }
.learn-navlink {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--r-md); border: 1px solid transparent;
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.learn-navlink:hover { background: var(--surface-2); color: var(--text-primary); }
.learn-navlink--active { background: var(--brand-soft); color: var(--accent-300); border-color: var(--border-subtle); }
.learn-navlink--disabled { color: var(--text-disabled); cursor: not-allowed; }
.learn-navlink--disabled:hover { background: none; color: var(--text-disabled); }
.learn-navlink__badge {
  margin-left: auto; font-size: 10px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--accent-300);
  background: var(--brand-soft); border-radius: var(--r-pill); padding: 2px var(--space-2);
}
.learn-ic { width: 18px; height: 18px; flex: none; }

.learn-poweredby { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--text-tertiary); }

/* ---- Mobile-Sidebar: Off-Canvas < 820px (T-UX-6) ----
   Vorher stapelte .learn-layout die volle ~20-Link-Navigation einfach ueber
   den Inhalt (grid-template-columns:1fr, siehe oben) -- kein Kollaps, keine
   Bedienung. #sidebar-toggle + mobile-sidebar.js schalten data-sidebar-open
   auf .learn-layout; ab 820px bleibt die Sidebar wie bisher fest sichtbar. */
.learn-sidebar-toggle { display: inline-flex; }
.learn-sidebar-backdrop { display: none; }
@media (min-width: 820px) {
  .learn-sidebar-toggle { display: none; }
}
@media (max-width: 819px) {
  .learn-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: min(300px, 84vw); height: 100vh; height: 100dvh;
    /* T-UX-20: fehlte hier (nur die Desktop->=820px-Regel oben hat sie) --
       fuer jeden Nutzer mit genug Nav-Links, die Navigation laenger als der
       Viewport (jeder Admin: die ganze "Verwaltung"-Sektion), lief die Liste
       ohne Scroll-Moeglichkeit einfach unten aus dem fixed-positionierten
       Sidebar-Container heraus und ueberlagerte Backdrop + Seiteninhalt
       darunter -- der eigentliche Grund fuer den "alles ueberlappt sich"-
       Effekt auf dem Handy. */
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease-out);
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.35);
  }
  .learn-layout[data-sidebar-open="true"] .learn-sidebar { transform: none; }
  .learn-layout[data-sidebar-open="true"] .learn-sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 75;
    background: rgba(0, 0, 0, 0.45);
  }
}

/* ---- Hauptbereich ---- */
.learn-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }

/* Schlanke Topbar (echte Kurssuche + Avatar; I10c: Platzhalter-Icons entfernt) */
.learn-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--bg-canvas) 85%, transparent);
  backdrop-filter: blur(var(--blur-panel)); border-bottom: 1px solid var(--border-subtle);
}
.learn-topbar__search {
  display: flex; align-items: center; gap: var(--space-2);
  flex: 1; max-width: 420px; height: 40px; padding: 0 var(--space-4);
  background: var(--surface-2); border: 1px solid var(--border-default);
  border-radius: var(--r-md); color: var(--text-tertiary);
}
.learn-topbar__search .learn-ic { width: 16px; height: 16px; flex: none; }
.learn-topbar__search:focus-within {
  border-color: var(--border-strong); color: var(--text-secondary);
  /* Der sitewide :focus-visible-Ring (sc-components.css) sitzt auf DIESEM
     Element statt auf dem Input (siehe darunter) -- er folgt so dem
     eigenen border-radius der Pille (abgerundet) statt dem des Inputs
     (kein eigener Radius, daher ein scharfes Rechteck quer ueber der
     runden Pille, unabhaengig vom Theme). */
  box-shadow: 0 0 0 2px var(--sc-bg), 0 0 0 4px var(--sc-accent);
}
.learn-topbar__search-input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  background: transparent; border: 0; outline: none;
  color: var(--text-primary); font: inherit; font-size: var(--fs-sm);
  -webkit-appearance: none; appearance: none;
}
.learn-topbar__search-input:focus-visible { box-shadow: none; }
.learn-topbar__search-input::placeholder { color: var(--text-tertiary); }
.learn-topbar__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
/* Suchfilter (learn-search.js): [hidden] muss das display:flex der Karte schlagen. */
.learn-course-card[hidden] { display: none; }
.learn-topbar__email { display: none; color: var(--text-tertiary); }
@media (min-width: 640px) { .learn-topbar__email { display: inline; } }
/* T-UX-19: #theme-toggle wird unter 640px ikonenlos zu breit fuer die
   Topbar (feste ~311px Aktionsleiste + Hamburger + Suche passen unter
   ~440px nicht mehr nebeneinander) -- die Wort-Beschriftung faellt weg,
   die Ikone bleibt (gleiche Breakpoint-Grenze wie .learn-topbar__email). */
.learn-topbar__action-label { display: none; }
@media (min-width: 640px) { .learn-topbar__action-label { display: inline; } }
.learn-topbar__avatar { --size: 36px; background: var(--brand-soft); color: var(--accent-300); font-weight: var(--fw-bold); }

/* Nutzer-Dropdown (Topbar-Avatar -> Menue): #user-menu-trigger togglet
   #user-menu-dropdown per [hidden] (Logik: /static/user-menu.js). */
.learn-usermenu { position: relative; }
.learn-usermenu__trigger {
  display: flex; align-items: center; gap: var(--space-3);
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: var(--r-lg);
}
.learn-usermenu__trigger:hover .learn-topbar__avatar,
.learn-usermenu__trigger[aria-expanded="true"] .learn-topbar__avatar {
  box-shadow: 0 0 0 2px var(--border-default);
}
.learn-usermenu__dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: max-content; max-width: 280px;
}
.learn-usermenu__header { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-3); }
.learn-usermenu__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); }
.learn-usermenu__email { font-size: var(--fs-xs); color: var(--text-tertiary); overflow-wrap: anywhere; }

/* Inhaltsflaeche */
.learn-content { flex: 1; width: 100%; max-width: 1180px; padding: clamp(20px, 4vw, 40px); }
.learn-footer { padding: var(--space-6) clamp(16px, 4vw, 40px); border-top: 1px solid var(--border-subtle); font-size: var(--fs-sm); }

/* ---- Hub: Willkommen + Abschnittstitel mit Akzentbalken ---- */
.learn-welcome { margin-bottom: var(--space-2); }
.learn-welcome__title {
  margin: 0 0 var(--space-2); font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-welcome__text { margin: 0; color: var(--text-secondary); font-size: var(--fs-lead); }
.learn-section-title {
  display: flex; align-items: center; gap: var(--space-3); margin: 0;
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-section-title::before {
  content: ""; flex: none; width: 4px; height: 1.1em;
  border-radius: var(--r-pill); background: var(--grad-brand);
}

/* ---- Kurskarten-Grid (Desktop ~4 pro Reihe, responsive) ---- */
.learn-course-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Karte: ueberschreibt das sc-card-Padding fuer den randlosen Thumbnail-Kopf.
   position:relative traegt den Stretch-Anker (.learn-course-card__cta::after). */
.learn-course-card {
  position: relative; display: flex; flex-direction: column;
  padding: 0; gap: 0; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.learn-course-card:hover { transform: var(--hover-lift); border-color: var(--border-strong); }

/* Thumbnail: deterministischer Gradient (inline --learn-thumb-grad) + dunkler
   Verlauf-Scrim, Kurstitel als Cover-Overlay. */
.learn-thumb {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 16 / 9; padding: var(--space-4);
  background-image: var(--learn-thumb-grad, var(--grad-brand));
}
.learn-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.45));
}
.learn-thumb__title {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold);
  line-height: var(--lh-snug); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,0.55);
}
.learn-thumb__badge { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; }

.learn-course-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); flex: 1; }
.learn-course-card__title {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-course-card__status {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.learn-course-card__pct { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-primary); }

/* Stretched-Link: ganze Karte ueber DIESEN einen Anker klickbar. Der sichtbare
   "Kurs öffnen"-Button bleibt als a.sc-btn--secondary erhalten (Gate-Vertrag). */
.learn-course-card__cta {
  margin-top: auto;
  background: var(--border-subtle);
  border-color: transparent;
}
.learn-course-card__cta:hover { background: var(--border-default); }
.learn-course-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ============================================================
   SHAH ACADEMY — Kurshierarchie (Increment 2, T2-4)
   ------------------------------------------------------------
   Additive .learn-*-Komponenten der drei Innenansichten (Kurs/Modul/
   Lektion). Komponiert ausschliesslich DS-Tokens -> Dark/Light
   automatisch. Stabile Selektoren der Seiten: #learn-course,
   .learn-module-card (a -> Modul), #learn-module, .learn-lesson-row
   (a -> Lektion), #learn-lesson, .learn-sidelink. Mobile-first.
   ============================================================ */

/* ---- Zurueck-Link (kleiner Abstand zur Folge-Card) ---- */
.learn-back { align-self: flex-start; }

/* ---- Fortschritts-Kreis (%-Kreis, conic-gradient) ---- */
.learn-ring {
  position: relative; flex: none; width: 84px; height: 84px;
  border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent-400) var(--learn-ring-pct, 0%), var(--surface-4) 0);
}
.learn-ring::before {
  content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface-1);
}
.learn-ring__label {
  position: relative; z-index: 1; font-family: var(--font-mono);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-primary);
}
.learn-ring--sm { width: 64px; height: 64px; }
.learn-ring--sm::before { inset: 7px; }

/* ---- Header-Card (Kurs/Modul/Lektion): Thumb + Body + %-Kreis ---- */
.learn-header { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.learn-header--slim { align-items: flex-start; }
.learn-header__thumb {
  flex: none; width: 132px; aspect-ratio: 16 / 10; border-radius: var(--r-lg);
  background-image: var(--learn-thumb-grad, var(--grad-brand));
}
.learn-header__body {
  flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column;
  gap: var(--space-2); align-items: flex-start;
}
.learn-header__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2); margin-top: var(--space-1);
}
.learn-header__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h1);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-header__text { margin: 0; color: var(--text-secondary); }
.learn-header__body .learn-test-cta { margin-top: var(--space-2); }
.learn-header__aside { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.learn-header__count { margin: 0; }

/* ---- Modul-Liste (Kurs-Innenansicht) ---- */
.learn-module-list { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.learn-module-card {
  position: relative; display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.learn-module-card:hover { transform: var(--hover-lift); border-color: var(--border-strong); }
.learn-module-card--soon { opacity: 0.82; }
.learn-module-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.learn-module-card__title {
  margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-module-card__meta { margin: 0; font-size: var(--fs-sm); }
.learn-module-card__cta { margin-top: var(--space-1); }
.learn-module-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* ---- Modul-Innenansicht: Sektionen + Lektions-Zeilen + Autor-Card ---- */
.learn-module-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .learn-module-layout { grid-template-columns: 1fr 300px; align-items: start; }
}
.learn-module-main { min-width: 0; }
.learn-section { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-section__title {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-lesson-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.learn-lesson-row__link {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--r-lg); background: var(--surface-1); border: 1px solid var(--border-subtle);
  text-decoration: none; color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.learn-lesson-row__link:hover { background: var(--surface-2); border-color: var(--border-strong); }
.learn-lesson-row__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.learn-lesson-row__title { font-weight: var(--fw-medium); color: var(--text-primary); }
.learn-lesson-row__sub { font-size: var(--fs-xs); }
.learn-lesson-row__badge { flex: none; }
.learn-lesson-row__chevron { flex: none; color: var(--text-tertiary); }

/* ---- Gradient-Mini-Thumbnails (Lektions-Zeilen + Sidebar) ---- */
.learn-mini-thumb { flex: none; width: 56px; height: 40px; border-radius: var(--r-md); background-image: var(--learn-thumb-grad, var(--grad-brand)); }
.learn-mini-thumb--xs { width: 40px; height: 30px; }

/* ---- Modul-Autor-Card (rechte Spalte) ---- */
.learn-author-card { display: flex; flex-direction: column; gap: var(--space-3); }
.learn-author-card__head { display: flex; align-items: center; gap: var(--space-3); }
.learn-author-card__avatar { --size: 52px; background: var(--brand-soft); color: var(--accent-300); font-weight: var(--fw-bold); }
.learn-author-card__name { margin: 0; font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-primary); }
.learn-author-card__bio { margin: 0; font-size: var(--fs-sm); }

/* ---- Lektions-Innenansicht: Breadcrumb + 2-Spalten + Sektions-Sidebar ---- */
.learn-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-tertiary); }
.learn-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.learn-breadcrumb a:hover { color: var(--accent-300); }
.learn-breadcrumb__sep { color: var(--text-disabled); }
.learn-breadcrumb__current { color: var(--text-primary); font-weight: var(--fw-medium); }

.learn-lesson-layout { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 980px) {
  .learn-lesson-layout { grid-template-columns: 1fr 320px; align-items: start; }
}
.learn-lesson-main { min-width: 0; }
.learn-sidecard { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 980px) { .learn-sidecard { position: sticky; top: 84px; } }
.learn-sidecard__title { margin: 0; }
.learn-sidelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.learn-sidelink {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md); border: 1px solid transparent; text-decoration: none; color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.learn-sidelink:hover { background: var(--surface-2); color: var(--text-primary); }
.learn-sidelink--active { background: var(--brand-soft); color: var(--accent-300); border-color: var(--border-subtle); }
.learn-sidelink__title { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.learn-sidelink__check { flex: none; color: var(--status-complete); font-weight: var(--fw-bold); }

/* ============================================================
   SHAH ACADEMY — Admin-UI App-Shell (/admin) im DS-Dark-Stil (I9 T-J-1)
   ------------------------------------------------------------
   Rein ADDITIVE .admin-*-Komponenten: heben die frueher plain-helle Admin-UI
   (base.html) auf dieselbe dunkle Sidebar+Main-Shell wie .learn-*. Komponiert
   AUSSCHLIESSLICH DS-Tokens -> Dark/Light automatisch. Bricht KEINE
   bestehenden Selektoren; die ~12 Admin-Kind-Templates (rohe <table>/<form>,
   #admin-sync-btn, #admin-assignment-form, #admin-assignments, ...) bleiben
   UNVERAENDERT und erben ihre lesbaren dunklen Basisstile aus .admin-main.
   KEIN .learn-widget*-Vokabular (deferred T-J-4/6). Der Print-/A4-Block oben
   bleibt byte-unveraendert (Rote Linie ADR-I9 §10e).
   ============================================================ */
.admin-shell { min-height: 100vh; }

/* ---- Zweispaltiges Grundlayout: Sidebar | Hauptbereich (wie .learn-layout) ---- */
.admin-layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 820px) {
  .admin-layout { grid-template-columns: var(--learn-sidebar-w) 1fr; }
}

/* ---- Linke Sidebar (Marke + Nav + Logout) ---- */
.admin-sidebar {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-5);
  background: var(--bg-base); border-bottom: 1px solid var(--border-subtle);
}
@media (min-width: 820px) {
  .admin-sidebar {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-bottom: none; border-right: 1px solid var(--border-subtle);
  }
}
.admin-sidebar__top { display: flex; flex-direction: column; gap: var(--space-6); }
.admin-sidebar__foot { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- Hauptbereich ---- */
.admin-main {
  min-width: 0; min-height: 100vh;
  padding: clamp(20px, 4vw, 40px);
  color: var(--text-primary);
}

/* ---- Rohe Admin-Elemente in .admin-main dunkel/lesbar (Kind-Templates unveraendert) ---- */
.admin-main h1, .admin-main h2, .admin-main h3 {
  font-family: var(--font-display); letter-spacing: var(--ls-tight);
  color: var(--text-primary); margin: 0 0 var(--space-4);
}
.admin-main h1 { font-size: var(--fs-h1); }
.admin-main h2 { font-size: var(--fs-h2); margin-top: var(--space-6); }
.admin-main h3 { font-size: var(--fs-h3); }
.admin-main p { color: var(--text-secondary); }
.admin-main a { color: var(--accent-300); text-decoration: none; }
.admin-main a:hover { text-decoration: underline; }
.admin-main section { margin-bottom: var(--space-6); }

/* Tabellen: Hairline-Zeilen auf --surface-1 */
.admin-main table {
  border-collapse: collapse; width: 100%;
  background: var(--surface-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg); overflow: hidden;
  font-size: var(--fs-sm); color: var(--text-primary);
}
.admin-main th, .admin-main td {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3) var(--space-4); text-align: left;
}
.admin-main thead th {
  background: var(--surface-2); color: var(--text-secondary);
  font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); font-weight: var(--fw-bold);
}
.admin-main tbody tr:last-child td { border-bottom: none; }
.admin-main tbody tr:hover td { background: var(--surface-2); }

/* Formulare: Labels, Fieldsets, Inputs, Selects, Textareas */
.admin-main label { display: block; margin-bottom: var(--space-3); color: var(--text-secondary); font-size: var(--fs-sm); }
.admin-main fieldset {
  border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  padding: var(--space-4); margin: 0 0 var(--space-4);
}
.admin-main legend { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 0 var(--space-2); }
.admin-main input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]),
.admin-main select,
.admin-main textarea {
  width: 100%; box-sizing: border-box;
  padding: var(--space-3); margin-top: var(--space-1);
  background: var(--surface-2); color: var(--text-primary);
  border: 1px solid var(--border-default); border-radius: var(--r-md);
  font: inherit;
}
.admin-main input:focus, .admin-main select:focus, .admin-main textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--glow-focus);
}
.admin-main textarea { min-height: 120px; resize: vertical; }

/* Buttons: invertierter Akzent + Pille (DESIGNSYSTEM.md §1/§5).
   Radio/Checkbox bleiben nativ (s.o.). Vorher lag hier ein Marken-Verlauf
   mit hartkodiertem weissem Text -- im Hell-Theme unlesbar, sobald der
   Verlauf keine dunkle Buntfarbe mehr ist. Der Akzent traegt seine
   Schriftfarbe jetzt selbst mit (--sc-on-accent). */
.admin-main button,
.admin-main input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-3) var(--space-6);
  background: var(--sc-accent); color: var(--sc-on-accent);
  border: 1px solid transparent; border-radius: var(--sc-radius-pill);
  font: inherit; font-weight: var(--sc-weight-medium); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.admin-main button:hover, .admin-main input[type=submit]:hover {
  background: var(--sc-accent-hover); transform: var(--hover-lift);
}
.admin-main button:active, .admin-main input[type=submit]:active {
  background: var(--sc-accent-down);
}

/* Banner + Fehlermeldungen (dunkle DS-Alert-Anmutung) */
.admin-main .banner {
  background: rgba(244,183,64,0.10); border: 1px solid rgba(244,183,64,0.30);
  color: var(--text-primary); padding: var(--space-4) var(--space-5);
  border-radius: var(--r-md); margin-bottom: var(--space-5);
}
.admin-main .error { color: var(--danger); }

/* Destruktiver Button-Modifier (S1-C4): gleiche Anmutung wie
   studio.css .studio-btn--danger, hier verfuegbar fuer base.html-Seiten. */
.sc-btn--danger:hover, .sc-btn--danger:focus-visible {
  color: var(--danger); border-color: var(--danger);
}

/* ============================================================
   SHAH ACADEMY — Compliance-Status-Widget (/learn-Hub, I11 T-I11-3)
   ------------------------------------------------------------
   Loest die in ADR-I9 §6.2 zurueckgestellte Vorarbeit ein: das
   .learn-widget-Vokabular (Grid + Karte + Label + Kennzahl). Rein
   ADDITIV, komponiert AUSSCHLIESSLICH DS-Tokens -> Dark & Light
   automatisch. Stabile Selektoren (ADR-I11 §8.2): #status-widget,
   .learn-widget-grid, .learn-widget[data-metric], .learn-widget__label,
   .learn-widget__metric. Der Print-/A4-Block oben bleibt
   byte-unveraendert (Rote Linie ADR-I11 §9e).
   ============================================================ */
.learn-widget-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.learn-widget { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); }
.learn-widget__label {
  margin: 0; font-size: var(--fs-2xs); text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow); color: var(--text-tertiary); font-weight: var(--fw-bold);
}
.learn-widget__metric {
  margin: 0; font-family: var(--font-display); font-size: var(--fs-h3);
  font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); color: var(--text-primary);
}
.learn-widget__note { margin: 0; font-size: var(--fs-xs); color: var(--warning); }

/* ============================================================
   SHAH ACADEMY — Lektions-Feedback (I11 T-I11-4, ADR-I11 §7/§8.2)
   ------------------------------------------------------------
   Rein ADDITIV, komponiert AUSSCHLIESSLICH DS-Tokens -> Dark & Light
   automatisch. Selektoren-Vertrag: #lesson-feedback (+ data-voted),
   .lesson-feedback__btn[data-rating], .feedback-count--up/--down
   (Studio-Aggregat). Der Print-/A4-Block oben bleibt byte-unveraendert
   (Rote Linie ADR-I11 §9e).
   ============================================================ */
#lesson-feedback .lesson-feedback__actions { gap: var(--space-3); }
#lesson-feedback[data-voted="up"] .lesson-feedback__btn[data-rating="up"],
#lesson-feedback[data-voted="down"] .lesson-feedback__btn[data-rating="down"] {
  border-color: var(--brand); box-shadow: var(--glow-focus);
}
.lesson-feedback__note {
  margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--text-secondary);
}
.feedback-count--up { color: var(--success); font-weight: var(--fw-bold); }
.feedback-count--down { color: var(--danger); font-weight: var(--fw-bold); }


/* ---- GAME-Slot (modularer Spiel-Block, docs/GAME_BLOCK_CONTRACT.md) ------- */
.learn-game__title {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, #f4f4f7);
}
.learn-game__frame {
  width: 100%;
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.09));
  border-radius: 14px;
  background: var(--bg-canvas, #060608);
  display: block;
}
.learn-game__done {
  margin: 12px 0 0;
  font-weight: 700;
  color: var(--success, #34d399);
}
.learn-game__error {
  margin: 0;
  color: var(--text-tertiary, #61616d);
  font-style: italic;
}

/* ---- Lektions-Quiz (learn_lesson.html, S1-C3) ------------------------- */
.learn-quiz__question { border: none; margin: 0; padding: 0; }
.learn-quiz__gap-input { max-width: 320px; }
.learn-quiz__option {
  align-items: center; padding: var(--space-3); border-radius: var(--r-md);
  border: 1px solid var(--border-subtle); cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.learn-quiz__option:hover { background: var(--surface-2); border-color: var(--border-default); }
.learn-quiz__feedback { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.learn-quiz__feedback--ok { color: var(--success); }
.learn-quiz__feedback--wrong { color: var(--danger); }
.learn-quiz__result { margin: 0; font-weight: var(--fw-bold); color: var(--text-primary); }
.learn-quiz__error, .learn-button-block__error {
  margin: 0; color: var(--text-tertiary); font-style: italic;
}
.lesson-captions-badge { margin-top: var(--space-2); }
/* Abschluss-Button "aufleuchten", sobald ein Spiel Vervollstaendigung meldet. */
.learn-complete--ready {
  box-shadow: var(--glow-brand, 0 8px 30px rgba(124, 92, 255, 0.35));
  animation: learn-complete-pulse 1.2s ease-in-out 2;
}
@keyframes learn-complete-pulse {
  50% { transform: translateY(-1px); filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .learn-complete--ready { animation: none; }
}

/* ---- Zugriffs-Stufen (Tiers): Badges + gesperrte Kurskacheln ------------- */
.learn-tier-line { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--text-secondary, #9a9aa6); font-size: 0.9rem; }
.learn-tier-badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--brand-soft, rgba(124, 92, 255, 0.14));
  color: var(--accent-300);
  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.12));
}
.learn-tier-badge--pro { background: var(--border-subtle); color: var(--text-primary); border-color: var(--border-default); }
.learn-tier-badge--premium { background: var(--text-primary); color: var(--surface-1); border-color: transparent; }

/* Kachel-Badge (oben rechts auf dem Thumb). */
.learn-thumb__lock { position: absolute; top: 10px; right: 10px; font-size: 20px; }
.learn-tier-badge { position: relative; }
.learn-thumb .learn-tier-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }

/* Gesperrte Kachel: gedimmt, nicht klickbar. */
.learn-course-card--locked .learn-thumb { filter: grayscale(0.4) brightness(0.8); }
.learn-course-card--locked .learn-course-card__title { color: var(--text-secondary, #9a9aa6); }
.learn-course-card__cta--locked {
  cursor: not-allowed; opacity: 0.85;
  background: var(--brand-soft, rgba(124, 92, 255, 0.14)) !important;
  color: var(--accent-300) !important;
}
/* Der Karten-weite ::after-Stretch-Klick gilt NUR fuer den echten Oeffnen-Anker. */
.learn-course-card--locked .learn-course-card__cta--locked::after { content: none; }

/* ============================================================
   HUB-WIDGETS (Learn-Hub Compliance-Vitals, ADR-I25, S1-C3)
   ============================================================ */
.hub-widget-stack {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.hub-widget { display: flex; flex-direction: column; gap: var(--space-3); }
.hub-widget__title {
  margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.hub-widget__body { display: flex; flex-direction: column; gap: var(--space-2); }
.hub-widget__empty { margin: 0; color: var(--text-tertiary); font-size: var(--fs-sm); }

.hub-widget-kv { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin: 0; }
.hub-widget-kv dt { color: var(--text-tertiary); font-size: var(--fs-sm); }
.hub-widget-kv dd { margin: 0; color: var(--text-primary); font-weight: var(--fw-medium); text-align: right; }
.hub-widget__overdue { color: var(--danger); }

.hub-widget__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hub-widget__link { color: var(--accent-300); text-decoration: none; font-size: var(--fs-sm); word-break: break-word; }
.hub-widget__link:hover { text-decoration: underline; }
.hub-widget__link-text { color: var(--text-tertiary); font-size: var(--fs-sm); }

.hub-widget__contacts { }
.hub-widget__contact {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle);
}
.hub-widget__contact:last-child { border-bottom: none; padding-bottom: 0; }
.hub-widget__contact-name { font-weight: var(--fw-medium); color: var(--text-primary); font-size: var(--fs-sm); }
.hub-widget__contact-role { color: var(--text-tertiary); font-size: var(--fs-xs); }
.hub-widget__contact-link { color: var(--accent-300); font-size: var(--fs-xs); text-decoration: none; word-break: break-word; }
.hub-widget__contact-link:hover { text-decoration: underline; }

/* Freitext-Ankuendigung: bereits sanitiztes HTML (nh3), nur Prosa-Feinschliff. */
.hub-widget__richtext { color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; }
.hub-widget__richtext p { margin: 0 0 var(--space-2); }
.hub-widget__richtext p:last-child { margin-bottom: 0; }
.hub-widget__richtext a { color: var(--accent-300); }
.hub-widget__richtext ul, .hub-widget__richtext ol { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.hub-widget__richtext strong { color: var(--text-primary); }

/* ============================================================
   COMMUNITY (learn_community.html, S1-C3)
   ============================================================ */
.community-post-form { display: flex; flex-direction: column; gap: var(--space-3); }
.community-threads { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-4); }
.community-thread { display: flex; flex-direction: column; gap: var(--space-2); }
.community-post__author { font-weight: var(--fw-bold); color: var(--text-primary); display: block; }
.community-post__content { color: var(--text-secondary); line-height: 1.6; }
.community-post__content p { margin: var(--space-1) 0; }
.community-post__content p:first-child { margin-top: 0; }
.community-post__date { display: block; font-size: var(--fs-xs); }
.community-post__status-badge { margin-left: var(--space-2); }
.sc-pill.community-post__status-badge:not(.sc-pill--progress) {
  background: rgba(244,96,122,0.16); color: var(--danger);
}
.community-post__locked { font-style: italic; }
.community-replies {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-3); padding-left: var(--space-5);
  border-left: 2px solid var(--border-subtle);
}
.community-reply { display: flex; flex-direction: column; gap: var(--space-2); }
.community-reply-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }

/* ============================================================
   BADGES GRID (learn_certificates.html, S1-C3)
   ============================================================ */
.badge-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3);
}
.badge-item {
  display: flex; flex-direction: column; gap: 4px; padding: var(--space-3);
  border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle);
}
.badge-label { font-weight: var(--fw-bold); color: var(--text-primary); font-size: var(--fs-sm); }

/* ============================================================
   TASK GRADING (learn_task_detail.html, S1-C3)
   ============================================================ */
.task-error { border-color: var(--danger); color: var(--danger); }
.task-notice { border-color: var(--info); }
.task-rubric-criterion, .grade-criterion {
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle);
}
.task-rubric-criterion:last-child, .grade-criterion:last-child { border-bottom: none; }
/* S1-C3: p.grade-source (learn_task_detail.html, plain muted label) vs
   span.grade-source.sc-badge (studio_task_review_detail.html, colored
   badge) share the base class name but need different treatment -- scope
   the italic-text look to the <p> usage only. */
p.grade-source { font-style: italic; }
.grade-source--ai { color: var(--accent-300); background: var(--brand-soft); }
.grade-source--human { color: var(--success); background: var(--success-bg); }
.review-submission-text { white-space: pre-wrap; line-height: 1.6; color: var(--text-secondary); }
.review-grade-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.review-points-input { width: 100px; }
.review-points-input:focus { border-color: var(--border-focus); box-shadow: var(--glow-focus); outline: none; }
.wizard-actions { flex-wrap: wrap; }

/* ============================================================
   PRESENCE BADGE (_presence_badge.html, S1-C3)
   ============================================================ */
.sc-card--info { background: var(--info-bg); border-color: rgba(91,141,239,0.3); }
.sc-bold { font-weight: var(--fw-bold); }
.studio-presence-badge { display: flex; flex-direction: column; gap: var(--space-2); }
.studio-presence-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.studio-presence-entry { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.submission-item { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.submission-item:last-child { border-bottom: none; }
.submission-status { font-weight: var(--fw-medium); }
.submission-status[data-status="graded"] { color: var(--success); }
.submission-status[data-status="ai_graded"] { color: var(--success); }

/* ============================================================
   COURSE FINAL-EXAM CTA (learn_course.html, S1-C3)
   ============================================================ */
.learn-final-locked { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

/* ============================================================
   SYSTEMIC MODIFIERS (used across multiple learn/studio pages,
   S1-C3) -- generic, reusable, mirroring existing sibling variants.
   ============================================================ */
.sc-card--inset { background: var(--bg-base); box-shadow: none; }
.sc-input--sm { height: var(--h-btn-sm); padding: 0 var(--space-3); }
.sc-row--gap-sm { gap: var(--space-2); }
.sc-sm { font-size: var(--fs-xs); }
.form-error { color: var(--danger); font-size: var(--fs-sm); margin: var(--space-2) 0 0; }
.sc-stack--md { gap: var(--space-4); }
.sc-alert--ok { background: var(--success-bg); border-color: rgba(52,211,153,0.30); }
.sc-alert--ok .sc-alert__icon { color: var(--success); }
.sc-prose { color: var(--text-secondary); line-height: 1.6; }
.sc-prose p { margin: 0 0 var(--space-2); }
.sc-prose p:last-child { margin-bottom: 0; }
.sc-prose a { color: var(--accent-300); }
.sc-dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); margin: 0; }
.sc-dl dt { color: var(--text-tertiary); font-size: var(--fs-sm); }
.sc-dl dd { margin: 0; color: var(--text-primary); font-weight: var(--fw-medium); text-align: right; }

/* ============================================================
   STUDIO MODERATION (studio_community.html, S1-C3)
   ============================================================ */
.moderation-post__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-xs); margin-bottom: var(--space-2); }
.moderation-actions { flex-wrap: wrap; }
.moderation-actions .sc-input { flex: 1 1 200px; }

/* ============================================================
   CHAT (Academy-Assistent — Vollseite + Drawer + FAB, S1-C3)
   Vormals eigenstaendiges assistant.css (Ticket C-Isolation, I10c
   T-I10C-D2) -- bereits vollstaendig DS-Token-basiert, nur die
   Klassennamen waren nicht praefixiert -- jetzt konsolidiert, keine
   Farb-/Verhaltensaenderung. Drawer-Sichtbarkeit: geschlossen =
   transform + visibility:hidden (Playwright/Screenreader sehen ihn
   dann als NICHT sichtbar); offen slidet er von rechts ein.
   ============================================================ */

/* ---- Vollseite (/assistant/{course_id}) --------------------------------
   Fuellt die verbleibende Viewport-Hoehe unter der Topbar (wie .learn-content
   selbst als Flex-Kind von .learn-main waechst) statt normal im Dokumentfluss
   zu stehen -- vorher sass der Chat als kurzer Block in einer Seite mit viel
   Weissraum drueber/drunter, jetzt dominiert der Thread den Viewport wie in
   ChatGPT/Claude, nur der Thread selbst scrollt (min-height:0-Kette). */
.sc-chat-page {
  max-width: 980px; margin-inline: auto;
  height: 100%; min-height: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
}

.assistant-page-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); flex: none; }
.assistant-page-head__course { display: flex; flex-direction: column; gap: 2px; align-self: stretch; }
.assistant-page-head__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); color: var(--text-primary); }

/* ChatGPT-/Claude-artig: schlanke History-Rail links + Chat-Hauptspalte
   rechts. #assistant-chat-list/#assistant-new-chat/.assistant-chat-item
   (IDs unveraendert, Test-/Flow-Vertrag) leben jetzt unter .sc-chat-rail*. */
.sc-chat {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-4);
  flex: 1;
  min-height: 0;
}

@media (max-width: 720px) {
  .sc-chat { grid-template-columns: 1fr; }
}

/* ---- History-Rail (Unterhaltungen, vertikale Liste) -------------------- */
.sc-chat-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  max-height: 100%;
  overflow-y: auto;
}

.sc-chat-rail__new { justify-content: center; margin-bottom: 6px; }

.sc-chat-rail__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-chat-rail__item {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px 0 8px;
  border-radius: 9px;
  color: var(--text-secondary);
}

.sc-chat-rail__item:hover { background: var(--surface-2); }

.sc-chat-rail__item--active {
  background: var(--brand-soft);
  color: var(--text-primary);
}

.sc-chat-rail__item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 7px 4px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.sc-chat-rail__item-rename,
.sc-chat-rail__item-delete {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-tertiary);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.sc-chat-rail__item:hover .sc-chat-rail__item-rename,
.sc-chat-rail__item:hover .sc-chat-rail__item-delete { opacity: 1; }

.sc-chat-rail__item-rename:hover,
.sc-chat-rail__item-delete:hover {
  background: var(--brand-soft);
  color: var(--text-primary);
}

/* ---- Hauptspalte: Disclaimer (schlank), Thread (waechst), Eingabe unten - */
.sc-chat__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

/* T-UX-16: dicht ueber der Eingabe statt frei schwebend im Leerraum (wie
   ChatGPT/Claude ihre "kann Fehler machen"-Zeile direkt unter dem Composer
   platzieren) -- keine .sc-card-Optik mehr, nur eine leise Caption-Zeile. */
.sc-chat__disclaimer {
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--text-tertiary);
  max-width: 68ch;
  margin: 0 auto 6px;
}
.sc-chat__disclaimer--compact { font-size: 0.72rem; margin-bottom: 4px; }

.sc-chat__tools {
  display: flex;
  justify-content: flex-end;
}

.sc-chat__thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* T-UX-16: Nachrichten unten verankern (wie ChatGPT/Claude) statt oben --
     sonst klebt eine kurze Unterhaltung oben und laesst darunter eine riesige
     Luecke bis zur Eingabe (der eigentliche Kern der "wirkt leer/kaputt"-
     Rueckmeldung, nicht der Bubble-/Formular-Stil selbst). */
  justify-content: flex-end;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 2px;
}

/* Leerer Thread: Quick-Start-Chips mittig statt oben klebend -- fuellt den
   nun echten verfuegbaren Raum, statt in der Doku-Seite unterzugehen. */
.sc-chat__thread:empty {
  align-items: center; justify-content: center;
}
.sc-chat__thread:empty::before {
  content: attr(data-empty-hint);
  color: var(--text-secondary); font-size: var(--fs-h3); font-weight: var(--fw-bold);
  text-align: center; max-width: 32ch;
}

/* ---- Quick-Start-Chips (Themen-Einstieg, ueber der Eingabe) ------------- */
.sc-chat__quickstart {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.sc-chat__quickstart button {
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: none;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.sc-chat__quickstart button:hover {
  background: var(--brand-soft);
  color: var(--text-primary);
}
.sc-chat__thread:not(:empty) ~ .sc-chat__quickstart { display: none; }

.sc-chat-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.sc-chat-msg--user {
  align-self: flex-end;
  /* --grad-brand/--text-on-accent resolven in Hell-Theme auf ein fast-weisses
     Verlaufs-Paar (sc-bridge.css: aus --sc-bg-raised/--sc-bg-deep gebaut,
     KEIN echter Akzent) -- dieselbe Ursache wie beim .sc-chat-fab-Fix.
     --sc-accent/--sc-on-accent sind die echten, je Theme korrekten Werte
     (invertierter Akzent, wie .sc-btn--primary). */
  background: var(--sc-accent);
  color: var(--sc-on-accent);
  border-bottom-right-radius: 4px;
}

.sc-chat-msg--assistant {
  align-self: flex-start;
  background: var(--bg-base);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.sc-chat-msg__text { margin: 0; }

/* No-JS-Fallback-Antwort (#assistant-answer); ehem. .assistant-answer-text
   ohne CSS, nur per Inline-Style white-space gehalten. */
.sc-chat__answer-text {
  margin: 0 0 var(--space-3);
  white-space: pre-wrap;
  color: var(--text-primary);
}

.sc-chat-msg--pending {
  align-self: flex-start;
  color: var(--text-tertiary);
  font-style: italic;
  border: 1px dashed var(--border-default);
}

.sc-chat-msg--error {
  align-self: flex-start;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.10);
  color: var(--text-primary);
}

/* ---- Zitat-Karten in Assistent-Bubbles ---------------------------------- */
.sc-chat-msg__citations {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.sc-chat-msg__citations .sc-chat-citation {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  text-decoration: none;
  background: var(--brand-soft);
}

.sc-chat-msg__citations .sc-chat-citation:hover {
  border-color: var(--border-focus);
}

.sc-chat-msg__citations .sc-chat-citation__title {
  display: block;
  color: var(--accent-400);
  font-weight: 600;
  font-size: 0.85rem;
}

.sc-chat-msg__citations .sc-chat-citation__snippet {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  white-space: normal;
}

/* ---- Eingabe unten ------------------------------------------------------- */
.sc-chat-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-chat-form__row {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 22px;
  padding: 8px 8px 8px 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-sm);
}

.sc-chat-form__row:focus-within {
  border-color: var(--border-focus);
}

.sc-chat-form__row .sc-chat-form__input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 0 !important;
  outline: none !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
  max-height: 120px;
  line-height: 1.5;
  overflow-y: auto;
}

/* T-UX-11-fix: kein ::placeholder-Farbregel bisher -- der Browser-Default
 * (dunkles Grau/Schwarz) verschwindet auf dem dunklen Chat-Hintergrund fast
 * vollstaendig. Gleiche Farbe wie .sc-control/.sc-textarea (sc.css). */
.sc-chat-form__input::placeholder { color: var(--text-tertiary); }

/* T-UX-16: rundes Icon-Send-Button statt Text ("Senden") -- ChatGPT-/
   Claude-artiger Composer. Label bleibt als aria-label erhalten. */
.sc-chat-form__submit {
  flex: none; border-radius: 999px !important;
  width: 36px; height: 36px; padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.sc-chat-form__submit-icon { flex: none; }

.sc-chat-form__hint {
  margin: 0;
  font-size: 0.72rem;
  text-align: center;
}

/* ---- FAB (Floating-Action-Button, unten rechts) -------------------------- */
.sc-chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-on-accent);
  box-shadow: var(--glow-brand);
  cursor: pointer;
}

.sc-chat-fab svg { width: 24px; height: 24px; }

.sc-chat-fab:hover { background: var(--sc-accent-hover); }

/* ---- Drawer (slidet von rechts) ------------------------------------------ */
.sc-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: min(420px, 100vw);
  height: 100vh;
  height: 100dvh;
  padding: var(--space-4);
  background: var(--bg-canvas);
  border-left: 1px solid var(--border-default);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0.22s;
}

.sc-chat-drawer[data-open="true"] {
  transform: none;
  visibility: visible;
}

.sc-chat-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sc-chat-drawer__title {
  color: var(--text-primary);
  font-weight: 700;
}

/* Compact-Variante der Chat-Komponente im Drawer: eine Spalte, fuellt die Hoehe. */
.sc-chat--compact {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sc-chat--compact .sc-chat__main {
  flex: 1;
  min-height: 0;
}

.sc-chat--compact .sc-chat__thread {
  flex: 1;
  max-height: none;
}

/* ============================================================
   Zertifikat-Popup (T-UX-10, learn_certificates.html)
   ------------------------------------------------------------
   .sc-overlay/.sc-modal (sc.css) sind fuer einen schmalen Text-Dialog
   gebaut (max-width 460px) -- das Zertifikat braucht mehr Breite fuer den
   eingebetteten iframe. .sc-modal--wide ist eine additive Erweiterung,
   bricht die Basis-Definition nicht.
   ============================================================ */
/* .sc-overlay { display: grid; ... } (sc.css) schlaegt sonst das native
   [hidden] (Muster .learn-course-card[hidden], siehe oben in dieser Datei --
   dieses Produkt hat KEIN globales [hidden]{display:none!important}). */
.sc-overlay[hidden] { display: none; }
.sc-modal--wide { max-width: 640px; padding: var(--space-5); }
.cert-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.cert-modal__title { font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--text-primary); }
.cert-modal__frame {
  width: 100%; height: min(680px, 78vh); border: 0;
  border-radius: var(--r-lg); background: var(--surface-1);
}

/* ============================================================
   Feedback-Einreichung (T-UX-11, learn_feedback_messages.html)
   ------------------------------------------------------------
   .sc-textarea ist width:100% (sc.css, geteilt mit Studio-Editoren, die
   volle Breite brauchen) -- hier ueber .feedback-submit-card auf eine
   lesbare Formularbreite begrenzt, statt die geteilte .sc-textarea-Regel
   anzufassen. .feedback-textarea ist eine additive Politur (kein Bruch der
   Basis .sc-textarea-Regeln aus sc.css).
   ============================================================ */
.feedback-submit-card { max-width: 480px; }
.feedback-textarea { border-radius: var(--r-lg); min-height: 140px; }

/* ============================================================
   Theme-Toggle + Sprach-Switcher: invertierter Hover (T-UX-14)
   ------------------------------------------------------------
   .sc-btn--ghost:hover (sc-components.css) hebt nur dezent auf --sc-bg-raised
   an -- fuer diese beiden immer sichtbaren Shell-Controls (alle drei Shells)
   soll der Hover stattdessen der DS-Regel "Interaktives invertiert"
   folgen (DESIGNSYSTEM.md §1, dasselbe Token-Paar wie .sc-btn--primary):
   dunkles Theme -> heller Hover, helles Theme -> dunkler Hover. Scoped auf
   die IDs, damit andere Ghost-Buttons (Abbrechen, Logout, ...) unveraendert
   bleiben. #theme-toggle traegt kein <form>, daher direkt adressierbar. */
#theme-toggle:hover,
#language-switcher button:hover {
  background: var(--sc-accent);
  color: var(--sc-on-accent);
  border-color: transparent;
}

/* ============================================================
   Community-Beitragsformular (T-UX-14, learn_community.html)
   ------------------------------------------------------------
   Gleiches Muster wie .feedback-submit-card/.feedback-textarea: die
   geteilte .sc-textarea-Regel (sc.css) bleibt width:100% (Studio-Editoren
   brauchen die volle Breite) -- hier ueber den Formular-Container auf eine
   lesbare Breite begrenzt statt sie global anzufassen.
   ============================================================ */
.community-post-form { max-width: 560px; }
.community-textarea { border-radius: var(--r-lg); min-height: 100px; }