/* ==========================================================================
   akademie-app.css — App-Shell fuer den eingeloggten Akademie-Bereich (dkp-CI)
   Job 201 / Etappe E1. Eigenstaendige Datei: Shell- und Auth-Views laden NUR
   diese CSS (nie style.css). Konzept: jobs/197/KONZEPT.md (§1A, §2, §3, §6).
   ========================================================================== */

/* ---- Outfit, selbst gehostet (job-809) ----------------------------------
   Variable Font, Gewichte 100-900, SIL Open Font License. Quelle: die
   Akademie auf christianschoch.de. Ersetzt Montserrat + Inter vom
   Google-CDN: eine Datei statt zweier Fremdaufrufe, kein Aufruf an
   Google-Domains aus dem eingeloggten Bereich.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Mini-Reset --------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; }
button { font: inherit; }

/* ---- Tokens (§2.1, identisch zur LP-CI) ---------------------------------
   Job 809: Palette geordnet, Abstandsraster ergaenzt, Schrift getauscht.
   Die dkp-CI bleibt WERTMAESSIG fuehrend — Navy #15203e und Hellblau
   #4fa0ca sind unveraendert. Neu ist nur die Ordnung darueber: was vorher
   als Literal in einzelnen Regeln stand, hat jetzt einen Namen.
   ------------------------------------------------------------------------- */
:root {
  /* Farben — Marke */
  --navy:#15203e; --navy-soft:#24345a;
  --accent:#4fa0ca; --accent-hover:#3e8ab2; --link:#2c6f92;
  --light:#e0e5e5; --white:#ffffff; --paper:#f5f8fa;
  --text:#3b4a5c; --muted:#5a6b7f; --border:#dce3ea;

  /* Akzent-Ableitungen (job-809: lagen als Literale in einzelnen Regeln) */
  --accent-light:#6bb4d9;              /* heller Akzent, Hover auf Akzent-Knopf */
  --accent-tint:#eef5fa;               /* zarte Akzentflaeche auf Weiss (Hover) */
  --accent-mark:#d7ecf6;               /* Treffer-Hervorhebung in der Suche */
  --accent-ring:rgba(79,160,202,.18);  /* Fokusring und aktive Nav-Flaeche */

  /* Neutrale Stufen, von hell nach dunkel (job-809) */
  --n-track:#e3e9f0;                   /* Spur des Fortschrittsbalkens */
  --n-line:#c8d2dd;                    /* Rand eines Status-Kreises ohne Zustand */
  --n-icon:#9aa7b6;                    /* Zeichen ohne Zustand (Pfeil, Schloss) */

  /* Signalfarben (job-809). Erfolgsgruen und Warnton lagen bisher nur als
     Literale in den Status-Abzeichen des Verwaltungsbereichs. */
  --success:#1e7e44; --success-bg:rgba(39,174,96,.14);
  --warn:#a76a08;    --warn-bg:rgba(230,162,60,.18);
  --danger:#c0392b;  --danger-hover:#a93226;
  --danger-text:#9b2c2c; --danger-bg:#fdecec; --danger-border:#f3c6c6;

  /* Sidebar (on dark) */
  --sb-bg:#15203e; --sb-text:rgba(224,229,229,.85); --sb-text-dim:rgba(224,229,229,.45);
  --sb-hover:rgba(255,255,255,.06); --sb-active-bg:var(--accent-ring);
  /* Fortschritt */
  --progress-track:var(--n-track); --progress-fill:var(--accent);

  /* Typo — Outfit fuer beide Rollen. Die beiden Namen bleiben getrennt,
     weil sie die Rolle bezeichnen (Auszeichnung vs. Lesetext), nicht die
     Datei; so bleibt ein spaeterer Rollenwechsel eine Ein-Zeilen-Aenderung. */
  --font-head:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-body:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Geometrie */
  --radius:14px; --radius-sm:10px; --radius-pill:999px;
  --sidebar-w:264px; --topbar-h:64px; --content-maxw:1120px;
  /* Lesebreite fuer Fliesstext (job-813, aus akademie.christianschoch.de).
     Ueber die ganze Kartenbreite lief der Text auf rund 90 Zeichen je Zeile;
     angenehm sind 60 bis 70. Gilt nur fuer Fliesstext, nicht fuer
     Ueberschriften, Listen oder Schaltflaechen.
     Einheit bewusst em statt ch: ch misst die Ziffer 0, die in Outfit 0,66 em
     breit ist, waehrend das mittlere Zeichen im Fliesstext nur rund 0,47 em
     misst. 65ch ergaben deshalb gemessene 91 Zeichen je Zeile. 32em treffen
     die Zielbreite in beiden Textgroessen der Lektionsseite. */
  --lesebreite:32em;

  /* Abstandsraster (job-809, uebernommen aus akademie.christianschoch.de).
     Drei Stufen: zwischen Karten 16, innerhalb von Bloecken 24, zwischen
     Kopf und Inhalt 32. Immer eine dieser drei Groessen nehmen, keine
     krummen Zwischenwerte — daher kommt die Symmetrie, nicht aus dem
     einzelnen Bauteil.
     Geltungsbereich: Abstaende ZWISCHEN Bauteilen und das Polster grosser
     Flaechen (Karten, Banner, Inhaltsspalte). NICHT betroffen sind das
     Innenleben kleiner Zeilenbauteile (Nav-Punkt, Lektionszeile, Abzeichen,
     Knopf, Eingabefeld) und Masse unter 12px — die richten sich nach der
     Zeilenhoehe, nicht nach dem Blockraster. */
  --luft-s:16px; --luft-m:24px; --luft-l:32px;

  /* Schatten */
  --shadow-sm:0 1px 6px rgba(21,32,62,.05);
  --shadow-md:0 4px 16px rgba(21,32,62,.10);
  --shadow-lg:0 8px 30px rgba(21,32,62,.08);
}

/* ---- Basis-Typo --------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.25; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; }
a { color: var(--link); }
.app-ic { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* ---- Shell-Layout (§1A) ------------------------------------------------- */
.app-body { min-height: 100vh; }
.app-layout { display: flex; min-height: 100vh; }

/* job-813: Die dunkle Spalte traegt keine eigene Hoehe mehr. Als Flex-Kind von
   .app-layout wird sie auf die Hoehe des Layouts gestreckt, also auf die
   Dokumenthoehe. Vorher stand hier height:100vh — auf langen Seiten (Dashboard,
   1318px) endete die Flaeche darum am unteren Viewport-Rand und darunter stand
   weisser Grund neben laufendem Inhalt. Das Klebeverhalten beim Scrollen sitzt
   jetzt eine Ebene tiefer in .sb-inner. */
.app-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--sb-bg); color: var(--sb-text);
}
.sb-inner {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; padding-top: var(--luft-m);
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--paper); }
.app-content { flex: 1; width: 100%; max-width: var(--content-maxw); margin: 0 auto; padding: var(--luft-l) 40px; }

/* ---- Sidebar (§3) ------------------------------------------------------- */
.sb-user {
  display: flex; align-items: center; gap: 12px;
  margin: 0 12px; padding: 12px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
}
.sb-user-info { display: flex; flex-direction: column; min-width: 0; }
.sb-user-email {
  color: #fff; font-size: .85rem; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-user-role { color: var(--sb-text-dim); font-size: .75rem; margin-top: 1px; }

.sb-nav { padding: 8px 12px; }
.nav-group { margin-bottom: 2px; }
.nav-group-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-text-dim); margin: 20px 14px 6px;
}
.nav-group:first-child .nav-group-label { margin-top: 8px; }
.nav-group form { margin: 0; }

.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  color: var(--sb-text); text-decoration: none;
  background: none; border: none; cursor: pointer; text-align: left;
  transition: background .15s, color .15s;
}
.nav-item .app-ic { width: 18px; height: 18px; }
.nav-item:hover { background: var(--sb-hover); color: #fff; }
.nav-item.is-active { background: var(--sb-active-bg); color: #fff; }
.nav-item.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
/* Gesperrter Punkt (schloss: true in config/navigation.json). Er wird gezeigt,
   nicht ausgeblendet — sichtbar bleibt, was es noch gibt, nur eben verschlossen. */
.nav-item.is-locked { color: var(--sb-text-dim); cursor: default; }
.nav-item.is-locked:hover { background: none; color: var(--sb-text-dim); }
.nav-item-lock { width: 14px !important; height: 14px !important; margin-left: auto; opacity: .7; }

.sb-footer {
  margin-top: auto; padding: var(--luft-s) 20px;
  color: var(--sb-text-dim); font-size: .72rem; line-height: 1.55;
}

/* ---- Topbar (§1A / §2.2) ------------------------------------------------ */
.app-topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h); display: flex; align-items: center; gap: 16px;
  padding: 0 var(--luft-l); background: var(--white); border-bottom: 1px solid var(--border);
}
.app-burger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--white); color: var(--navy); cursor: pointer;
}
.app-burger .app-ic { width: 22px; height: 22px; }

.app-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; width: 320px; max-width: 100%; padding: 0 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill);
  transition: border-color .15s, box-shadow .15s;
}
.app-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.app-search .app-search-ic { width: 16px; height: 16px; color: var(--muted); }
.app-search input {
  border: none; outline: none; background: none; width: 100%;
  font-family: var(--font-body); font-size: .9rem; color: var(--text);
}

/* job-813: Das Logo stand mit 30px Hoehe (63px Breite) so klein und so dicht am
   Rand, dass es angeschnitten wirkte — die Bilddatei selbst hat rechts fast
   keinen Innenrand. Gemessen waren es 24px Abstand, also kein echter Beschnitt.
   Behoben wird die Ursache des Eindrucks: mehr Luft aus dem Topbar-Polster
   (32px), eine lesbare Groesse und flex:0 0 auto, damit die Kopfleiste das Logo
   auch bei knappem Platz nie zusammendrueckt. */
.app-topbar-logo { margin-left: auto; display: inline-flex; align-items: center; flex: 0 0 auto; }
.app-topbar-logo img { height: 34px; width: auto; display: block; }

/* ---- Avatar (§2.2) ------------------------------------------------------ */
.akad-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; font-family: var(--font-head); font-weight: 700; color: #fff;
}
.sb-user-avatar { width: 40px; height: 40px; background: var(--accent); color: var(--navy); font-size: .95rem; }

/* ---- Buttons (§2.2, pill wie LP) --------------------------------------- */
.akad-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s, color .2s;
}
.akad-btn-sm { padding: 8px 16px; font-size: .85rem; }
.akad-btn-md { padding: 12px 24px; font-size: .95rem; }
.akad-btn-primary { background: var(--navy); color: #fff; }
.akad-btn-primary:hover { background: var(--navy-soft); transform: translateY(-1px); }
.akad-btn-accent { background: var(--accent); color: var(--navy); }
.akad-btn-accent:hover { background: var(--accent-light); }
.akad-btn-ghost { background: transparent; color: var(--link); border-color: var(--accent); }
.akad-btn-ghost:hover { background: var(--accent-tint); }

/* ---- Generische Karte (§2.2 / Basis aller spaeteren Karten) ------------ */
.akad-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--luft-m);
}

/* ---- Such-View (E1: bewusst schlicht; Feinschliff/Treffer-Karten in E4) - */
.akad-card > h1:first-child { margin-bottom: var(--luft-s); }
.search { display: flex; gap: 10px; flex-wrap: wrap; }
.search input[type="search"] {
  flex: 1; min-width: 220px; height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: .95rem; color: var(--text); background: var(--white);
}
.search input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.search button {
  height: 44px; padding: 0 24px; border: none; border-radius: var(--radius-pill);
  background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: .95rem; cursor: pointer; transition: background .2s, transform .2s;
}
.search button:hover { background: var(--navy-soft); transform: translateY(-1px); }
.search-info { margin-top: var(--luft-s); color: var(--muted); font-size: .95rem; }
.treffer-liste { list-style: none; margin-top: var(--luft-s); display: flex; flex-direction: column; gap: var(--luft-s); }
.treffer {
  display: block; padding: 14px 18px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: box-shadow .15s, transform .15s;
}
.treffer:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.treffer-modul { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.treffer-titel { display: block; font-weight: 600; color: var(--navy); margin: 2px 0; }
.treffer-snippet { display: block; font-size: .9rem; color: var(--muted); }
mark { background: var(--accent-mark); }

/* ---- Off-Canvas Sidebar (Grundgeruest; Feinschliff der Breakpoints in E5) */
.app-backdrop { display: none; }
@media (max-width: 1024px) {
  .app-burger { display: inline-flex; }
  .app-sidebar {
    position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%);
    transition: transform .25s ease; z-index: 100;
  }
  /* Ausserhalb des Textflusses uebernimmt die Spalte selbst die Viewport-Hoehe
     (job-813), die Innenhuelle fuellt sie nur noch aus. */
  .sb-inner { position: static; height: 100%; }
  body.app-nav-open .app-sidebar { transform: translateX(0); }
  .app-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(21,32,62,.5);
    z-index: 99; opacity: 0; visibility: hidden; transition: opacity .25s ease;
  }
  body.app-nav-open .app-backdrop { opacity: 1; visibility: visible; }
}
@media (max-width: 640px) {
  .app-content { padding: var(--luft-m) var(--luft-s); }
  .app-topbar { padding: 0 var(--luft-s); }
  .app-search { display: none; }
}

/* ==========================================================================
   dkp-footer (Herkunft: startseite.ejs Inline-<style>, Job 189/197 — Klassen
   NICHT umbenennen). Kollisionsfrei: im App-Bereich laedt das LP-Inline-CSS
   nie, auf der LP laedt akademie-app.css nie.

   Job 811: nicht mehr wortgleiche Kopie, sondern auf die Tokens aus job-809
   umgestellt (--border, --muted, --white, --luft-*). Der frueher noetige
   Zeilenvergleich mit der LP faellt weg, seit beide Seiten dieselbe Schrift
   tragen: die LP setzt ihre eigenen Tokens auf Outfit, dieser Block erbt sie
   aus dem :root oben. DRIFT-HINWEIS: aendert sich am LP-Footer die Struktur
   (Raster, Reihenfolge, neue Bauteile), muss dieser Block nachgezogen werden.
   Reine Farb- und Abstandswerte folgen jetzt der App-Palette, nicht mehr der
   LP-Zeile.
   ========================================================================== */
.dkp-footer{background:var(--white);padding:56px 0 var(--luft-m);border-top:1px solid var(--border);color:var(--navy)}

.dkp-footer-container{max-width:1200px;margin:0 auto;padding:0 var(--luft-m)}

.dkp-footer-main{display:grid;grid-template-columns:auto 1fr auto;gap:56px;align-items:start;padding-bottom:40px}

.dkp-footer-right{align-self:center}

.dkp-footer-middle{padding-top:0}

.dkp-footer-right{display:flex;justify-content:flex-end}

.dkp-footer-made{display:flex;flex-direction:column;gap:2px}

.dkp-made-line{display:flex;align-items:center;gap:8px;margin-top:8px}

.dkp-flags{display:inline-flex;gap:8px;line-height:1}

.dkp-flags svg{width:24px;height:24px;color:var(--navy)}

.dkp-made-main{color:var(--navy);font-family:var(--font-head);font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:700;line-height:1.25;margin-bottom:8px}

.dkp-made-sub{color:var(--muted);font-size:.92rem;line-height:1.5}

.dkp-footer-middle h3{color:var(--navy);font-size:clamp(1.15rem,1.7vw,1.35rem);font-weight:700;line-height:1.25;margin-bottom:8px}

.dkp-footer-middle h3 .dkp-accent{color:var(--accent)}

.dkp-footer-middle p{font-family:var(--font-body);color:var(--muted);font-size:.92rem;line-height:1.5;margin:0;max-width:none}

.dkp-hotline-box{display:inline-flex;align-items:center;justify-content:center;background:rgba(79,160,202,.08);border:1px solid rgba(79,160,202,.45);padding:24px 40px;border-radius:8px;color:var(--navy);font-family:var(--font-head);font-weight:700;font-size:1.1rem;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s;white-space:nowrap}

.dkp-hotline-box:hover{background:var(--accent);color:var(--navy);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 22px rgba(21,32,62,.2)}

.dkp-footer-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--luft-m);padding-top:var(--luft-m);border-top:1px solid var(--border)}

.dkp-fb-zone{display:flex;align-items:center;gap:var(--luft-m);flex-wrap:nowrap}

.dkp-fb-zone-left{justify-self:start}

.dkp-fb-zone-right{justify-self:end;display:flex;align-items:center;gap:var(--luft-m)}

.dkp-fb-copy{color:var(--muted);font-size:.9rem;margin:0}

.dkp-fb-link{color:var(--muted);font-size:.9rem;text-decoration:none;transition:color .15s;white-space:nowrap}

.dkp-fb-link:hover{color:var(--accent)}

.dkp-fb-meta{text-align:center;font-size:.85rem;color:var(--muted)}

.dkp-footer-legal{margin-top:var(--luft-m);padding-top:var(--luft-m);border-top:1px solid var(--border);font-size:.75rem;color:var(--muted);line-height:1.6;text-align:center;max-width:980px;margin-left:auto;margin-right:auto}
@media(max-width:960px){
  .dkp-footer-main{grid-template-columns:1fr;gap:var(--luft-l);text-align:left}
  .dkp-footer-middle{padding-top:0}
  .dkp-footer-right{justify-content:flex-start}
  .dkp-footer-bottom{grid-template-columns:1fr;text-align:left;gap:var(--luft-s)}
  .dkp-fb-zone-left,.dkp-fb-zone-right{justify-self:start;flex-wrap:wrap}
  .dkp-fb-meta{text-align:left}
}

/* ==========================================================================
   Dashboard (Job 205 / Etappe E2). Konzept: jobs/197/KONZEPT.md (§2.2, §4.1).
   ========================================================================== */

/* ---- Kopf + Kicker ------------------------------------------------------ */
.akad-dash-head { margin-bottom: 24px; }
.akad-dash-head h1 { margin-bottom: 4px; }
.akad-dash-sub { color: var(--muted); font-size: .95rem; }

.akad-kicker {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--link);
}

/* ---- Dashboard-Grid (§1A / §4.1) ---------------------------------------- */
.akad-dash-grid { display: flex; flex-direction: column; gap: var(--luft-l); }
.akad-dash-main { min-width: 0; }
.akad-dash-widgets { display: flex; flex-direction: column; gap: var(--luft-m); }
@media (min-width: 1280px) {
  .akad-dash-grid { display: grid; grid-template-columns: 1fr 320px; align-items: start; gap: var(--luft-l); }
}

/* ---- Sektionstitel mit Accent-Balken ------------------------------------ */
.akad-section-title { display: flex; align-items: center; gap: 12px; margin: var(--luft-l) 0 var(--luft-s); }
.akad-section-title::before {
  content: ""; display: inline-block; width: 4px; height: 20px; border-radius: 2px; background: var(--accent);
}
.akad-dash-main > .akad-section-title:first-child { margin-top: 0; }

/* ---- Weiter-lernen-Card -------------------------------------------------- */
.akad-continue {
  display: flex; align-items: center; justify-content: space-between; gap: var(--luft-m); flex-wrap: wrap;
  background: var(--navy); border-radius: var(--radius); padding: var(--luft-m) var(--luft-l); margin-bottom: var(--luft-l);
}
.akad-continue h3 { color: #fff; font-size: 1.15rem; margin-top: 4px; }
.akad-continue .akad-kicker { color: var(--accent); }

/* ---- Modul-Banner (§2.2) ------------------------------------------------- */
.akad-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: var(--luft-m);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  border-radius: var(--radius); padding: var(--luft-l); margin-bottom: var(--luft-s);
}
.akad-banner::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(79,160,202,.25), transparent 70%);
  pointer-events: none;
}
.akad-banner-body { position: relative; z-index: 1; }
.akad-banner h3 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.akad-banner-meta { color: rgba(255,255,255,.75); font-size: .9rem; margin: 6px 0 var(--luft-s); }

/* ---- Fortschrittsbalken (§2.2) ------------------------------------------- */
.akad-progress {
  position: relative; z-index: 1; width: 220px; max-width: 100%; height: 8px;
  border-radius: var(--radius-pill); background: var(--progress-track); overflow: hidden;
}
.akad-progress-fill { height: 100%; background: var(--progress-fill); border-radius: var(--radius-pill); transition: width .3s; }

/* ---- Kreis-Fortschritt / Ring (§2.2, 64px-Variante im Banner) ------------ */
.akad-ring { position: relative; z-index: 1; width: 64px; height: 64px; flex: 0 0 auto; }
.akad-ring-track { fill: none; stroke-width: 4; stroke: rgba(255,255,255,.25); }
.akad-ring-value { fill: none; stroke-width: 4; stroke: var(--accent); stroke-linecap: round; }
.akad-ring text { fill: #fff; font-family: var(--font-head); font-weight: 700; font-size: 11px; }

/* ---- Lektions-Zeile (§2.2) ------------------------------------------------ */
.akad-lektion-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--luft-l); }
.akad-lektion-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); padding: 14px 18px; text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.akad-lektion-row:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.akad-lektion-status {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--n-line);
  color: var(--muted); font-family: var(--font-head); font-weight: 700; font-size: .8rem;
}
.akad-lektion-status.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.akad-lektion-status.is-done .app-ic { width: 14px; height: 14px; }
.akad-lektion-titel { flex: 1; font-family: var(--font-body); font-weight: 600; color: var(--navy); }
.akad-lektion-go { width: 18px; height: 18px; color: var(--n-icon); }

/* ---- Coach-Widget (§2.2) -------------------------------------------------- */
.akad-coach-head { display: flex; align-items: center; gap: 14px; margin: var(--luft-s) 0 var(--luft-s); }
.akad-coach-avatar { width: 48px; height: 48px; background: var(--navy); color: #fff; font-size: 1.05rem; flex: 0 0 auto; }
.akad-coach-name { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1rem; }
.akad-coach-role { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.akad-coach-bio { color: var(--text); font-size: .9rem; line-height: 1.6; }

/* ---- Live-Call-Widget (§2.2) ---------------------------------------------- */
.akad-live-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; background: rgba(79,160,202,.15); color: var(--accent);
  margin-bottom: 12px;
}
.akad-live-icon .app-ic { width: 20px; height: 20px; }
.akad-live h3 { font-size: 1rem; margin-bottom: 8px; }
.akad-live p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin-bottom: var(--luft-s); }

/* ==========================================================================
   Lektions-Player + Live-Call (Job 207 / Etappe E3). Konzept: §2.2, §4.2, §4.4.
   Nur additive Regeln; bestehende Klassen (Ring, Card, Btn, lektion-row) reused.
   ========================================================================== */

/* ---- Breadcrumb (§4.2) -------------------------------------------------- */
.akad-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--luft-s); font-size: .85rem; color: var(--muted); }
.akad-breadcrumb a { color: var(--muted); text-decoration: none; }
.akad-breadcrumb a:hover { color: var(--link); }
.akad-breadcrumb-current { color: var(--text); font-weight: 500; }
/* job-813: Zurueck-Pfeil vor der Brotkrume (Vorbild). Fuehrt eine Ebene hoch,
   also auf das letzte verlinkte Glied vor dem aktuellen Ort — kein Rueckgriff
   auf den Browserverlauf, sondern ein echter Verweis. */
.akad-breadcrumb-back {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  color: var(--muted); transition: color .15s;
}
.akad-breadcrumb-back:hover { color: var(--link); }
.akad-breadcrumb-back svg { width: 16px; height: 16px; display: block; }

/* ---- Modul-Header-Bar (§4.2) -------------------------------------------- */
.akad-modulbar {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: var(--luft-m);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  border-radius: var(--radius); padding: var(--luft-s) var(--luft-m); margin-bottom: var(--luft-m);
}
.akad-modulbar::after {
  content: ""; position: absolute; top: -50px; right: -30px; width: 150px; height: 150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(79,160,202,.22), transparent 70%); pointer-events: none;
}
.akad-modulbar-body { position: relative; z-index: 1; min-width: 0; flex: 1; }
.akad-modulbar .akad-kicker { color: var(--accent); }
/* job-813: Bildkachel links im Kopfband, uebernommen aus dem Vorbild. Quelle
   ist dasselbe Bunny-Thumbnail wie in der Modul-Navigation rechts; existiert
   keins, laesst das Template die Kachel weg statt einen leeren Kasten zu
   zeigen. */
.akad-modulbar-thumb {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 112px; height: 63px; border-radius: var(--radius-sm);
  overflow: hidden; background: rgba(255,255,255,.08); line-height: 0;
}
.akad-modulbar-titel { color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; margin-top: 4px; }
.akad-modulbar .akad-ring { width: 44px; height: 44px; }

/* ---- Lektions-Grid (§4.2, 1fr 320px ab 1280px) -------------------------- */
.akad-lektion-grid { display: flex; flex-direction: column; gap: var(--luft-m); }
.akad-lektion-col-main { min-width: 0; }
.akad-lektion-col-side { display: flex; flex-direction: column; gap: var(--luft-m); }
@media (min-width: 1280px) {
  .akad-lektion-grid { display: grid; grid-template-columns: 1fr 320px; align-items: start; gap: var(--luft-l); }
}

/* ---- Video-Card + Platzhalter (§4.2) ------------------------------------ */
.akad-video-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.akad-video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.akad-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.akad-video-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 260px; padding: 40px var(--luft-m); text-align: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft)); color: rgba(255,255,255,.85);
}
.akad-video-ph-ic { width: 56px; height: 56px; color: rgba(255,255,255,.3); }
.akad-video-ph p { font-size: .95rem; }

/* ---- Lektions-Body (§4.2) ----------------------------------------------- */
.akad-lesson-body { padding: var(--luft-m); }
.akad-lesson-body h1 { margin-bottom: var(--luft-s); }
.akad-lesson-lead { color: var(--text); font-size: 1rem; line-height: 1.6; margin-bottom: var(--luft-s); }
/* job-813: Lesebreite nur fuer den Fliesstext. Ueberschrift, Anhangliste und
   Aktionszeile behalten die volle Kartenbreite. */
.akad-lesson-lead,
.akad-transkript-body { max-width: var(--lesebreite); }

.akad-transkript { border-top: 1px solid var(--border); padding-top: var(--luft-s); margin-top: 4px; }
.akad-transkript summary { cursor: pointer; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--link); list-style: none; }
.akad-transkript summary::-webkit-details-marker { display: none; }
.akad-transkript summary::before { content: "\25B8\00a0"; color: var(--accent); }
.akad-transkript[open] summary::before { content: "\25BE\00a0"; }
.akad-transkript-body { margin-top: var(--luft-s); color: var(--text); font-size: .92rem; line-height: 1.7; white-space: pre-line; }

/* ---- Anhaenge an der Lektion (job-812) ----------------------------------
   Sitzt zwischen Transkript und Aktionszeile, wie in der Vorlage von
   akademie.christianschoch.de. Hat die Lektion keinen Anhang, rendert das
   Template den ganzen Block nicht: die Seite sieht dann aus wie vorher.
   ------------------------------------------------------------------------- */
.akad-anhaenge { border-top: 1px solid var(--border); padding-top: var(--luft-s); margin-top: var(--luft-s); }
.akad-anhaenge-titel {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  color: var(--navy); margin-bottom: 10px;
}
.akad-anhang-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.akad-anhang {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--white); text-decoration: none; color: var(--text);
  transition: background .15s, border-color .15s;
}
.akad-anhang:hover { background: var(--accent-tint); border-color: var(--accent); }
.akad-anhang-ic { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent); }
.akad-anhang-titel { flex: 1; min-width: 0; font-weight: 600; color: var(--link); }
.akad-anhang-meta { color: var(--muted); font-size: .8rem; white-space: nowrap; }

.akad-lesson-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--luft-m); }
.akad-lesson-actions form { margin: 0; }

/* ---- Naechste-Lektion-Card (§4.2) --------------------------------------- */
.akad-next-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--luft-s);
  margin-top: var(--luft-s); padding: var(--luft-s) var(--luft-m);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.akad-next-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.akad-next-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
/* job-813: Vorschaubild links in der Karte, wie im Vorbild. Gleiche Quelle und
   gleiches Verhalten ohne Bild wie ueberall sonst: kein Bild, keine Kachel. */
.akad-next-thumb {
  flex: 0 0 auto; width: 112px; height: 63px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--paper); line-height: 0;
}
.akad-next-titel { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.02rem; }
.akad-next-go { font-family: var(--font-head); font-weight: 600; color: var(--link); white-space: nowrap; }
/* job-812: Zusatzzeile fuer den Modulwechsel und den Kursende-Hinweis. */
.akad-next-sub { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.akad-kursende { cursor: default; background: var(--paper); }
.akad-kursende:hover { box-shadow: var(--shadow-sm); transform: none; }

/* ---- Rechte Modul-Liste (§4.2) ------------------------------------------ */
.akad-modul-card-sub { color: var(--muted); font-size: .8rem; margin: 2px 0 var(--luft-s); }
.akad-modul-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.akad-modul-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: var(--radius-sm); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.akad-modul-item:hover { background: var(--accent-tint); }
.akad-modul-item.is-active { border-color: var(--accent); background: var(--accent-tint); }
.akad-modul-status {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--n-line);
  color: var(--muted); font-family: var(--font-head); font-weight: 700; font-size: .72rem;
}
.akad-modul-status.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.akad-modul-status.is-done .app-ic { width: 13px; height: 13px; }
.akad-modul-item-titel { flex: 1; font-family: var(--font-body); font-weight: 500; color: var(--navy); font-size: .9rem; }

/* ---- Live-Call-View (§4.4) ---------------------------------------------- */
.akad-livecall-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--luft-s);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  border-radius: var(--radius); padding: var(--luft-l); margin-bottom: var(--luft-m);
}
.akad-livecall-banner::after {
  content: ""; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(79,160,202,.25), transparent 70%); pointer-events: none;
}
.akad-livecall-banner-icon {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--accent); flex: 0 0 auto;
}
.akad-livecall-banner-icon .app-ic { width: 26px; height: 26px; }
.akad-livecall-banner h1 { position: relative; z-index: 1; color: #fff; }
.akad-livecall-card { max-width: 640px; }
.akad-livecall-termin { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.5rem; margin: 4px 0 8px; }
.akad-livecall-placeholder { font-family: var(--font-head); font-weight: 700; color: var(--navy); font-size: 1.15rem; margin: 4px 0 8px; }
.akad-livecall-desc { color: var(--text); font-size: .98rem; line-height: 1.65; }
.akad-livecall-card .akad-btn { margin-top: var(--luft-s); }

/* ---- Einstellungen-View (job-212) ---------------------------------------- */
.einst-konto-card { margin-bottom: var(--luft-m); }
.einst-konto-card h2, .einst-konto-card + .akad-card h2 { margin-bottom: var(--luft-s); }
.einst-info { color: var(--text); font-size: .95rem; }
.einst-link-liste { list-style: none; display: flex; flex-direction: column; }
.einst-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 2px; border-bottom: 1px solid var(--border);
  color: var(--navy); text-decoration: none; font-weight: 600; font-size: .95rem;
  transition: color .15s;
}
.einst-link:last-child { border-bottom: none; }
.einst-link:hover { color: var(--link); }
.einst-link-ic { width: 14px; height: 14px; color: var(--muted); transform: rotate(-45deg); }

/* ==========================================================================
   Auth-Layout (§1B) + Suche-Feinschliff — Job 213 / Etappe E4.
   login.ejs, kuendigen.ejs, account-setup.ejs laden NUR diese CSS und laufen
   OHNE Sidebar/Topbar/Footer: zentrierte Karte auf --paper, Navy-Logo
   (dkp-logo-light.png) darueber, dezente Legal-Zeile darunter.
   Nur appended; bestehende Tokens/Klassen wiederverwendet.
   ========================================================================== */

/* ---- Auth: Grund-Layout ------------------------------------------------- */
.auth-body {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px var(--luft-m); background: var(--paper);
}
.auth-logo { display: block; margin-bottom: var(--luft-m); }
.auth-logo img { height: 44px; width: auto; display: block; }

.auth-wrap {
  width: 100%; max-width: 420px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  padding: var(--luft-l);
}
.auth-wrap h1 { font-size: 1.4rem; }
.auth-sub { color: var(--muted); font-size: .95rem; line-height: 1.55; margin: 8px 0 var(--luft-m); }

/* ---- Auth: Formular ----------------------------------------------------- */
.auth-form { display: flex; flex-direction: column; }
.auth-form label {
  font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  color: var(--navy); margin: 14px 0 6px;
}
.auth-form label:first-of-type { margin-top: 0; }
.auth-form input {
  width: 100%; height: 46px; padding: 0 15px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .95rem; color: var(--text);
  background: var(--white);
}
.auth-form input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.auth-form input[readonly] { background: var(--paper); color: var(--muted); cursor: default; }

/* ---- Auth: Voll-breiter Button (Navy-Pill wie App) ---------------------- */
.auth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 48px; margin-top: var(--luft-m);
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  background: var(--navy); color: #fff; cursor: pointer; text-decoration: none;
  transition: background .2s, transform .2s;
}
.auth-btn:hover { background: var(--navy-soft); transform: translateY(-1px); }

/* ---- Auth: Alert (Fehler) ---------------------------------------------- */
.auth-alert {
  background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: .9rem; margin-bottom: var(--luft-s);
}

/* ---- Auth: Check-Zeile (account-setup 'new', Bezahl-Moment) ------------ */
.auth-check {
  display: flex; align-items: center; gap: 10px;
  background: rgba(79,160,202,.10); border: 1px solid rgba(79,160,202,.30);
  color: var(--navy); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: var(--luft-s);
  font-size: .9rem; font-weight: 600;
}
.auth-check .app-ic { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }

/* ---- Auth: Textlink + Legal-Zeile -------------------------------------- */
.auth-textlink { display: block; text-align: center; margin-top: var(--luft-s); font-size: .9rem; }
.auth-legal { margin-top: var(--luft-m); text-align: center; font-size: .8rem; color: var(--muted); }
.auth-legal a { color: var(--muted); text-decoration: none; }
.auth-legal a:hover { color: var(--link); text-decoration: underline; }
.auth-legal .sep { margin: 0 8px; opacity: .5; }

/* ---- Suche-Feinschliff: Treffer als App-Karten + Highlight ------------- */
.treffer { display: flex; align-items: center; gap: 14px; background: var(--white); }
.treffer-body { flex: 1; min-width: 0; }
.treffer-arrow {
  width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto;
  transition: transform .15s, color .15s;
}
.treffer:hover .treffer-arrow { color: var(--accent); transform: translateX(3px); }
.search-empty { color: var(--muted); }
mark { background: var(--accent-mark); color: var(--navy); border-radius: 3px; padding: 0 2px; }

/* ==========================================================================
   Responsive-Feinschliff + Gesamtabnahme — Job 215 / Etappe E5.
   Off-Canvas-Grundgeruest, Breakpoints (>=1280 / 1025-1279 / <=1024 / <=640)
   und Auth-Karte stammen bereits aus E1-E4 (siehe oben). Diese Sektion
   ergaenzt nur die noch fehlenden Teile: Sidebar-User-Chip <=640px, globale
   Fokus-Ringe und Hover-Konsistenz.
   ========================================================================== */

/* ---- Sidebar-User-Chip <=640px: nur Avatar, E-Mail ausgeblendet --------- */
@media (max-width: 640px) {
  .sb-user { justify-content: center; }
  .sb-user-info { display: none; }
}

/* ---- Fokus-Ringe (:focus-visible, accent-Kontur) auf allen interaktiven
   Elementen: Links, Buttons, Inputs, Nav-Punkte. Ergaenzt bestehende
   :focus-within/:focus-Ringe (Suche, Formulare), ersetzt sie nicht. -------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Hover-Konsistenz: Auth-Textlink war bisher ohne Hover-Zustand ------ */
.auth-textlink:hover { color: var(--navy); }

/* ==========================================================================
   Lektions-Thumbnails + Dauer (Job 218 / F1). Rein additive Regeln.
   NULL-Fallback wird serverseitig geloest: fehlt Thumb/Dauer, wird das
   jeweilige Element gar nicht gerendert (kein Loch, kein Platzhalter).
   ========================================================================== */

/* Thumbnail-Rahmen: Dashboard-Zeile (64x36) + rechte Modul-Liste (56x32) */
.akad-lektion-thumb,
.akad-modul-thumb {
  flex: 0 0 auto; overflow: hidden; border-radius: 6px;
  background: var(--paper); line-height: 0;
}
.akad-lektion-thumb { width: 64px; height: 36px; }
.akad-modul-thumb { width: 56px; height: 32px; }
.akad-lektion-thumb img,
.akad-modul-thumb img,
.akad-continue-thumb img,
.akad-modulbar-thumb img,
.akad-next-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Dauer-Label (Minuten) */
.akad-lektion-dauer,
.akad-modul-dauer {
  flex: 0 0 auto; color: var(--muted); font-family: var(--font-body);
  font-weight: 500; white-space: nowrap;
}
.akad-lektion-dauer { font-size: .8rem; }
.akad-modul-dauer { font-size: .72rem; }

/* Dauer-Zeile im dunklen Modul-Banner */
.akad-banner-dauer { color: rgba(255,255,255,.6); margin-top: -8px; }

/* Weiter-lernen-Card: Thumb + Text als linke Gruppe, Button bleibt rechts */
.akad-continue-lead { display: flex; align-items: center; gap: 18px; min-width: 0; }
.akad-continue-thumb {
  flex: 0 0 auto; width: 128px; height: 72px; border-radius: var(--radius-sm);
  overflow: hidden; background: rgba(255,255,255,.08); line-height: 0;
}
.akad-continue-dauer { color: var(--accent); font-size: .82rem; margin-top: 6px; }

@media (max-width: 560px) {
  .akad-continue-thumb { display: none; }
  /* job-813: auf schmalen Fenstern hat der Text Vorrang vor der Kachel */
  .akad-modulbar-thumb,
  .akad-next-thumb { display: none; }
}

/* ==========================================================================
   Persoenliche Ansprache, DEMNAECHST-Status, Kurs-Abschluss, Haptik
   (Job 219). Rein additive Regeln; bestehende Klassen/Tokens wiederverwendet.
   ========================================================================== */

/* ---- Progressive Enhancement: View-Transitions bei Dokument-Navigation - */
@view-transition {
  navigation: auto;
}

/* ---- Auth: Live-Hinweis Passwortlaenge (account-setup) ------------------ */
.auth-hint { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.auth-hint.is-ok { color: var(--accent); }

/* ---- Buttons: Loading-/Disabled-Zustand nach Submit --------------------- */
.akad-btn:disabled,
.auth-btn:disabled {
  opacity: .65; cursor: default; transform: none;
}

/* ---- DEMNAECHST: gesperrte Zeile (Dashboard-Liste + Modul-Sidebar) ------ */
.akad-lektion-row.is-locked,
.akad-modul-item.is-locked {
  cursor: default;
}
.akad-lektion-row.is-locked:hover,
.akad-modul-item.is-locked:hover {
  box-shadow: var(--shadow-sm); transform: none; background: var(--white);
}
.akad-lektion-status.is-locked,
.akad-modul-status.is-locked {
  background: var(--paper); border-color: var(--border); color: var(--n-icon);
}
.akad-lektion-row.is-locked .akad-lektion-titel,
.akad-modul-item.is-locked .akad-modul-item-titel {
  color: var(--muted);
}
.akad-badge-demnaechst {
  flex: 0 0 auto; font-family: var(--font-head); font-weight: 600; font-size: .72rem;
  color: var(--muted); background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap;
}

/* ---- DEMNAECHST: Teaser-Karte bei Direktaufruf einer gesperrten Lektion - */
.akad-demnaechst-teaser { text-align: center; padding: 40px var(--luft-m); }
.akad-demnaechst-teaser .akad-lektion-status.is-locked {
  width: 44px; height: 44px; margin: 0 auto var(--luft-s);
}
.akad-demnaechst-teaser .akad-lektion-status.is-locked .app-ic { width: 20px; height: 20px; }
.akad-demnaechst-teaser h2 { margin-bottom: 8px; }

/* ---- Kurs-Abschluss-Moment: einmalige Gluckwunsch-Karte (?geschafft=1) -- */
.akad-geschafft {
  display: flex; align-items: center; gap: var(--luft-s);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  margin-bottom: var(--luft-m);
}
.akad-geschafft h2 { color: #fff; margin-bottom: 4px; }
.akad-geschafft p { color: rgba(255,255,255,.75); font-size: .92rem; }
.akad-geschafft-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: rgba(79,160,202,.22); color: var(--accent);
}
.akad-geschafft-icon .app-ic { width: 22px; height: 22px; }

/* ===== Admin (job-232 / F3) ===== */
.akad-admin-toolbar { margin: 4px 0 var(--luft-m); }
.akad-admin-flash { border-left: 4px solid var(--accent); background: var(--paper); }
.akad-admin-flash-error { border-left-color: var(--danger); }
.akad-admin-entwurf { display: grid; grid-template-columns: 340px 1fr; gap: var(--luft-m); align-items: start; }
@media (max-width: 760px) { .akad-admin-entwurf { grid-template-columns: 1fr; } }
.akad-admin-preview { min-width: 0; }
.akad-admin-preview .akad-video-wrap { margin: 0; }
.akad-admin-thumb { width: 100%; border-radius: var(--radius-sm); display: block; }
.akad-admin-body { min-width: 0; }
.akad-admin-metaline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--luft-s); }
.akad-admin-guid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); word-break: break-all; }
.akad-admin-dauer { font-size: 13px; color: var(--muted); }
.akad-admin-editform { display: flex; flex-direction: column; gap: 12px; }
.akad-admin-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.akad-admin-field input, .akad-admin-field textarea, .akad-admin-field select {
  font: inherit; font-weight: 400; padding: 9px 11px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--white); color: var(--text); width: 100%;
}
.akad-admin-field textarea { resize: vertical; }
.akad-admin-row { display: flex; gap: 14px; }
.akad-admin-field-sm { flex: 1; }
.akad-admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--luft-s); }
.akad-admin-actions form { margin: 0; }
.akad-btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
.akad-btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.akad-admin-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.akad-admin-listrow { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--white); }
.akad-admin-listrow:last-child { border-bottom: 0; }
/* job-812: jede Zeile traegt jetzt ihren Anhang-Bereich, deshalb liegt der
   Trennstrich am Element statt an der Zeile. */
.akad-admin-listitem { border-bottom: 1px solid var(--border); background: var(--white); }
.akad-admin-listitem:last-child { border-bottom: 0; }
.akad-admin-listitem .akad-admin-listrow { border-bottom: 0; padding-bottom: 6px; }
.akad-anhang-admin { padding: 0 16px 11px; background: var(--white); }
.akad-anhang-admin summary {
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--link); list-style: none;
}
.akad-anhang-admin summary::-webkit-details-marker { display: none; }
.akad-anhang-admin summary::before { content: "\25B8\00a0"; color: var(--accent); }
.akad-anhang-admin[open] summary::before { content: "\25BE\00a0"; }
.akad-anhang-admin-body {
  margin-top: 10px; padding: 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--paper);
}
.akad-anhang-admin-liste { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.akad-anhang-admin-liste li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.akad-anhang-admin-liste a { font-weight: 600; color: var(--link); }
.akad-anhang-admin-datei { flex: 1; min-width: 0; color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; word-break: break-all; }
.akad-anhang-admin-leer { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.akad-anhang-admin-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.akad-anhang-admin-hinweis { margin-top: 10px; color: var(--muted); font-size: 12px; }

.akad-admin-listtitel { flex: 1; font-weight: 600; color: var(--text); min-width: 0; }
.akad-admin-listmodul { color: var(--muted); font-size: 13px; }
.akad-admin-listsort { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; }
.akad-stbadge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: capitalize; white-space: nowrap; }
.akad-stbadge-published { background: var(--success-bg); color: var(--success); }
.akad-stbadge-entwurf { background: var(--warn-bg); color: var(--warn); }
.akad-stbadge-demnaechst { background: rgba(79,160,202,.16); color: var(--link); }
.akad-stbadge-verworfen { background: rgba(21,32,62,.10); color: var(--muted); text-decoration: line-through; }