/* Design-System „Study“ (Ansatz B, entschieden 02.10.2026)
   Quelle: ui_design_styles_b.html, ui_professor_workspace.html und das Artifact
   „Agora Focused Home“. Tokens heißen wie in den Entwürfen (--k-*), damit ein
   Entwurf und der Code dieselbe Sprache sprechen.
   Aufbau: 1 Schriften · 2 Tokens hell/dunkel/Stage · 3 Grundlagen · 4 Shell ·
   5 Layout · 6 Komponenten · 7 Gespräch · 8 Canvas und Reader · 9 Responsive ·
   10 Stage (dunkler Look für labs, 09.10.2026) */

/* ---------- 1 Schriften (selbst gehostet, OFL; keine Anfrage an Google) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-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: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-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; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/source-serif-4-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: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/source-serif-4-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; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-italic-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: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/source-serif-4-italic-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; }

/* ---------- 2 Tokens ----------
   Der helle Satz gilt auch für die Lesefläche unter Stage (.paper), solange
   das Konto sie nicht auf dunkel gestellt hat: Tokens auf dem Element selbst
   schlagen die geerbten dunklen. */
:root,
:root[data-ui="stage"] .paper:not([data-paper="dark"]) {
  color-scheme: light;
  --k-bg: #F6F5F2;          /* Seitenleiste, Hintergrund hinter Blättern */
  --k-chat: #FBFAF8;        /* Gesprächsfläche, ruhige Felder */
  --k-panel: #FFFFFF;       /* Seite, Karten, Blatt */
  --k-bar: rgba(255,255,255,.86);
  --k-ink: #1F1E1C;
  --k-muted: #69655D;
  --k-line: #E4E1DA;
  --k-line-strong: #D3CFC6;
  --k-accent: #1F6B5E;
  --k-accent-hover: #185649;
  --k-onaccent: #FFFFFF;
  --k-tint: rgba(31,107,94,.1);
  --k-chipbg: #FFFFFF; --k-chipfg: #1F1E1C; --k-chipbd: #DCD8CF;
  --k-cmpbg: #FFFFFF; --k-cmpbd: #DCD8CF;
  --k-cmpshadow: 0 .15em .35em rgba(40,35,25,.04), 0 .5em 1.4em rgba(40,35,25,.06);
  --k-segbg: rgba(120,110,95,.13); --k-segonbg: #FFFFFF; --k-segonshadow: 0 .1em .3em rgba(0,0,0,.1);
  --k-okbg: rgba(31,107,94,.1); --k-okfg: #1F6B5E;
  --k-warnbg: #FBEFD2; --k-warnfg: #7A5200;
  --k-dangerbg: #FBE4E1; --k-dangerfg: #9B2A1E;
  --k-neutralbg: #EEECE7; --k-neutralfg: #5A564F;
  --k-ownbg: #EAE6F4; --k-ownfg: #4E4180;   /* eigenes Material der Studierenden */
  --k-mark: #FBEFC4;                          /* markierte Stelle im Text */
  --k-face: #ECE9E3;
  --k-shadow: 0 1px 2px rgba(40,35,25,.05), 0 8px 24px -12px rgba(40,35,25,.18);
  --k-fui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --k-fhead: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
  --k-fread: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --k-r: 12px;      /* Karten */
  --k-r-sm: 8px;
  --sb-w: 248px;
  /* Seitengrund und Hauptknopf: in Study dieselben Werte wie Blatt und
     Akzent, Stage setzt sie eigens (schwarzer Grund, weißer Hauptknopf). */
  --k-page: var(--k-panel);
  --k-primary: var(--k-accent); --k-primary-hover: var(--k-accent-hover); --k-onprimary: var(--k-onaccent);
  --k-glow: transparent;
  --k-fieldbd: var(--k-line-strong);   /* Rand von Eingabefeldern */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --k-bg: #151514; --k-chat: #1A1918; --k-panel: #1F1E1C; --k-bar: rgba(31,30,28,.86);
    --k-ink: #EEECE7; --k-muted: #A39F96; --k-line: #34322E; --k-line-strong: #46433E;
    --k-accent: #5DB6A4; --k-accent-hover: #74C6B5; --k-onaccent: #0E1D1A; --k-tint: rgba(93,182,164,.15);
    --k-chipbg: #22211F; --k-chipfg: #EEECE7; --k-chipbd: #3A3834;
    --k-cmpbg: #22211F; --k-cmpbd: #3A3834; --k-cmpshadow: none;
    --k-segbg: rgba(160,150,135,.18); --k-segonbg: #3A3834; --k-segonshadow: none;
    --k-okbg: rgba(93,182,164,.16); --k-okfg: #7CCBBA;
    --k-warnbg: #3B3014; --k-warnfg: #F2C46A;
    --k-dangerbg: #3D1D19; --k-dangerfg: #F2B8B0;
    --k-neutralbg: #2C2A27; --k-neutralfg: #B5B0A6;
    --k-ownbg: #2D2840; --k-ownfg: #C6BDF0;
    --k-mark: #4A3F17;
    --k-face: #2C2A27;
    --k-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --k-bg: #151514; --k-chat: #1A1918; --k-panel: #1F1E1C; --k-bar: rgba(31,30,28,.86);
  --k-ink: #EEECE7; --k-muted: #A39F96; --k-line: #34322E; --k-line-strong: #46433E;
  --k-accent: #5DB6A4; --k-accent-hover: #74C6B5; --k-onaccent: #0E1D1A; --k-tint: rgba(93,182,164,.15);
  --k-chipbg: #22211F; --k-chipfg: #EEECE7; --k-chipbd: #3A3834;
  --k-cmpbg: #22211F; --k-cmpbd: #3A3834; --k-cmpshadow: none;
  --k-segbg: rgba(160,150,135,.18); --k-segonbg: #3A3834; --k-segonshadow: none;
  --k-okbg: rgba(93,182,164,.16); --k-okfg: #7CCBBA;
  --k-warnbg: #3B3014; --k-warnfg: #F2C46A;
  --k-dangerbg: #3D1D19; --k-dangerfg: #F2B8B0;
  --k-neutralbg: #2C2A27; --k-neutralfg: #B5B0A6;
  --k-ownbg: #2D2840; --k-ownfg: #C6BDF0;
  --k-mark: #4A3F17;
  --k-face: #2C2A27;
  --k-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
}

/* Stage (09.10.2026, Manuel: ganz labs, Studierende und Lehrende). Werte aus
   ui_design_stage_julian_2026-10-09.html; Kontraste nach WCAG 2.2 gerechnet:
   Text #ECEEEC auf Grund #0A0B0B 16,9:1; gedämpft #8F9794 auf Grund 6,6:1,
   auf Fläche #121514 6,1:1, auf gehobener Fläche #1A1E1D 5,6:1; Akzent
   #7CCBBA auf Grund 10,4:1, Bernstein #E7C77F auf Grund 12,1:1; Feldrand
   #626A67 auf Fläche 3,3:1 (Bedienelemente brauchen 3:1, die Linie #3A403E
   hätte 1,7:1). Immer dunkel, unabhängig vom Gerät; wer hell will, stellt
   am Konto auf Study. */
:root[data-ui="stage"] {
  color-scheme: dark;
  --k-page: #0A0B0B;        /* Grund (die Bühne) */
  --k-bg: #0A0B0B;          /* Seitenleiste, Fläche hinter Blättern */
  --k-panel: #121514;       /* Karten, Blätter, Felder, Dialoge */
  --k-chat: #1A1E1D;        /* gehobene Fläche: eigene Nachricht, ruhige Felder */
  --k-bar: rgba(10,11,11,.82);
  --k-ink: #ECEEEC;
  --k-muted: #8F9794;
  --k-line: #272C2B;
  --k-line-strong: #3A403E;
  --k-accent: #7CCBBA;
  --k-accent-hover: #9AD8CA;
  --k-onaccent: #0A0B0B;
  --k-tint: rgba(124,203,186,.14);
  --k-primary: #ECEEEC; --k-primary-hover: #FFFFFF; --k-onprimary: #0A0B0B;
  --k-chipbg: #1A1E1D; --k-chipfg: #ECEEEC; --k-chipbd: #272C2B;
  --k-cmpbg: #121514; --k-cmpbd: #626A67; --k-cmpshadow: 0 24px 48px -28px rgba(0,0,0,.9);
  --k-fieldbd: #626A67;
  --k-segbg: rgba(236,238,236,.07); --k-segonbg: #272C2B; --k-segonshadow: none;
  --k-okbg: rgba(124,203,186,.14); --k-okfg: #7CCBBA;
  --k-warnbg: rgba(231,199,127,.13); --k-warnfg: #E7C77F;   /* braucht dich */
  --k-dangerbg: rgba(238,148,136,.12); --k-dangerfg: #EE9488;
  --k-neutralbg: #1A1E1D; --k-neutralfg: #B7BEBB;
  --k-ownbg: rgba(198,189,240,.13); --k-ownfg: #C6BDF0;
  --k-mark: rgba(231,199,127,.24);
  --k-face: #1A1E1D;
  --k-shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.85);
  --k-glow: rgba(124,203,186,.08);
}

/* ---------- 3 Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--k-fui); font-size: 15px; line-height: 1.5; color: var(--k-ink);
  background: var(--k-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--k-fhead); margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; font-weight: 650; }
p { margin: 0; }
a { color: var(--k-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .15em; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--k-muted); }
.small { font-size: .87rem; }
.xsmall { font-size: .78rem; }
.eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--k-muted); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.nowrap { white-space: nowrap; }
.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- 4 Shell ---------- */
.app { display: grid; grid-template-columns: var(--sb-w) minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; transition: grid-template-columns .25s ease; }
.app.noside { grid-template-columns: 0 minmax(0, 1fr); }

.sb { background: var(--k-bg); border-right: 1px solid var(--k-line); display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 12px; overflow-y: auto; overflow-x: hidden; font-size: .92rem; transition: visibility 0s, padding .25s ease; }
.app.noside .sb { visibility: hidden; padding-inline: 0; border-right-color: transparent; transition: visibility 0s linear .25s, padding .25s ease; }
.sb-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; padding: 4px 8px 14px; color: var(--k-ink); white-space: nowrap; }
.sb-brand:hover { text-decoration: none; }
.bmark { width: 26px; height: 26px; border-radius: 7px; background: var(--k-accent); color: var(--k-onaccent); display: grid; place-items: center; font-size: .82rem; font-weight: 700; flex: none; }
.labs-pill { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--k-warnbg); color: var(--k-warnfg); }
.sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; color: var(--k-ink); font-weight: 500; white-space: nowrap; min-width: 0; }
.sb-item:hover { background: var(--k-segbg); text-decoration: none; }
.sb-item .ico { color: var(--k-muted); }
.sb-item.on { background: var(--k-tint); color: var(--k-accent); font-weight: 650; }
.sb-item.on .ico { color: var(--k-accent); }
.sb-item.quiet { color: var(--k-muted); }
.sb-item > span:not(.cdot):not(.sb-count) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-item small { margin-left: auto; color: var(--k-muted); font-size: .78rem; }
.sb-count { margin-left: auto; background: var(--k-accent); color: var(--k-onaccent); font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 0 7px; line-height: 1.55; }
.sb-count.warn { background: var(--k-warnfg); color: var(--k-page); }
/* Aufklappbare Gruppe in der Seitenleiste (Stage: „Semester“ mit den Kursen) */
.sb-group > summary { list-style: none; cursor: pointer; }
.sb-group > summary::-webkit-details-marker { display: none; }
.sb-group > summary .chev { margin-left: auto; width: 14px; height: 14px; color: var(--k-muted); transition: transform .2s ease; }
.sb-group[open] > summary .chev { transform: rotate(180deg); }
.sb-group-in { display: grid; gap: 2px; padding: 2px 0 6px 14px; }
.sb-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--k-muted); font-weight: 600; padding: 14px 9px 4px; }
.cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.sb-spacer { flex: 1; min-height: 12px; }
.sb-acct { display: flex; align-items: center; gap: 9px; padding: 10px 6px 0; margin-top: 6px; border-top: 1px solid var(--k-line); }
.sb-acct a { color: var(--k-ink); display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.sb-acct a:hover { text-decoration: none; }
.sb-legal { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 6px 2px; font-size: .74rem; }
.sb-legal a { color: var(--k-muted); }
.sb-acct .who { display: grid; font-weight: 600; min-width: 0; line-height: 1.25; }
.sb-acct .who small { font-weight: 400; color: var(--k-muted); font-size: .78rem; }
.face { width: 30px; height: 30px; border-radius: 50%; background: var(--k-face); display: grid; place-items: center; font-size: .74rem; font-weight: 700; flex: none; color: var(--k-ink); }
.iconbtn { border: 0; background: transparent; color: var(--k-muted); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.iconbtn:hover { background: var(--k-segbg); color: var(--k-ink); }
.iconbtn svg { width: 18px; height: 18px; }
.sb-close { display: none; }

.pg { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--k-page); }
.tb { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px 8px 12px; min-height: 52px; border-bottom: 1px solid var(--k-line); background: var(--k-bar); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); position: relative; z-index: 5; }
.tb.flat { border-bottom-color: transparent; }
.tb-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-brand { display: none; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; color: var(--k-ink); }
.tb-brand:hover { text-decoration: none; }
.app.noside .tb-brand { display: flex; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--k-muted); min-width: 0; white-space: nowrap; overflow: hidden; }
.crumbs a { color: var(--k-muted); }
.crumbs a:hover { color: var(--k-ink); }
.crumbs .sep { opacity: .6; }
.crumbs .here { color: var(--k-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.tb-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.pg-main { flex: 1; overflow-y: auto; min-height: 0; position: relative; }
.pg-main.fill { overflow: hidden; display: flex; flex-direction: column; }

.tabbar { display: none; }
.sb-backdrop { display: none; }

/* Hinweisleisten unter der Kopfzeile */
.notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 20px; font-size: .88rem; border-bottom: 1px solid var(--k-line); background: var(--k-warnbg); color: var(--k-warnfg); }
.notice form { display: inline; }
.notice .btn-link { color: inherit; }
.notice.mode { background: var(--k-accent); color: var(--k-onaccent); border-bottom: 0; font-weight: 600; }
.notice.mode a, .notice.mode button { color: var(--k-onaccent); }

/* ---------- 5 Layout ---------- */
.wrap { max-width: 64rem; margin: 0 auto; padding: 28px 28px 64px; }
.wrap-md { max-width: 48rem; margin: 0 auto; padding: 28px 24px 64px; }
.wrap-sm { max-width: 40rem; margin: 0 auto; padding: 28px 24px 64px; }
.stack { display: grid; gap: 16px; align-content: start; }
.stack-sm { display: grid; gap: 8px; align-content: start; }
.stack-lg { display: grid; gap: 28px; align-content: start; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cols-main { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 28px; align-items: start; }
.page-head { display: grid; gap: 6px; margin-bottom: 22px; }
.page-head .lede { color: var(--k-muted); max-width: 44rem; }
.sect { display: grid; gap: 12px; }
.sect + .sect { margin-top: 30px; }
.sect-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.divider { border: 0; border-top: 1px solid var(--k-line); margin: 0; }

/* ---------- 6 Komponenten ---------- */
/* Knöpfe: Pillen; einer pro Ansicht ist primär (GOV.UK: ein Hauptknopf) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: .92rem; white-space: nowrap; border: 1px solid var(--k-line-strong); color: var(--k-ink); background: var(--k-panel); cursor: pointer; line-height: 1.3; text-decoration: none; }
.btn:hover { border-color: var(--k-accent); text-decoration: none; }
.btn .ico { width: 1em; height: 1em; }
.btn-primary { background: var(--k-primary); border-color: var(--k-primary); color: var(--k-onprimary); }
.btn-primary:hover { background: var(--k-primary-hover); border-color: var(--k-primary-hover); }
.btn-tint { background: var(--k-tint); color: var(--k-accent); border-color: transparent; }
.btn-tint:hover { border-color: var(--k-accent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--k-ink); }
.btn-ghost:hover { background: var(--k-segbg); border-color: transparent; }
.btn-danger { color: var(--k-dangerfg); }
.btn-danger:hover { border-color: var(--k-dangerfg); }
.btn-sm { font-size: .84rem; padding: 4px 11px; }
.btn-lg { font-size: 1rem; padding: 10px 20px; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn-link { border: 0; background: none; padding: 0; color: var(--k-accent); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }

/* Vorschläge unter dem Eingabefeld */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--k-chipbg); color: var(--k-chipfg); border: 1px solid var(--k-chipbd); border-radius: 999px; padding: 6px 13px; font-size: .88rem; font-weight: 500; cursor: pointer; text-decoration: none; max-width: 100%; }
/* Lange Chips (z. B. „Weiterlesen: …“) brechen am Handy um statt über den Rand zu laufen. */
.chip:hover { border-color: var(--k-accent); text-decoration: none; }
.chip.on, .chip[aria-pressed="true"] { background: var(--k-tint); border-color: var(--k-accent); color: var(--k-accent); font-weight: 600; }
.chip .ico { width: .95em; height: .95em; color: var(--k-muted); }

/* Eingabefeld (Composer) */
.composer { background: var(--k-cmpbg); border: 1px solid var(--k-cmpbd); border-radius: 20px; box-shadow: var(--k-cmpshadow); padding: 8px 8px 8px 16px; display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.composer:focus-within { border-color: var(--k-accent); }
.composer textarea, .composer input[type=text] { flex: 1; border: 0; outline: none; resize: none; background: transparent; padding: 6px 0; line-height: 1.5; max-height: 180px; min-height: 24px; font-size: .98rem; }
.composer textarea::placeholder, .composer input::placeholder { color: var(--k-muted); }
.send { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--k-primary); color: var(--k-onprimary); display: grid; place-items: center; flex: none; cursor: pointer; }
.send:hover { background: var(--k-primary-hover); }
.send[disabled] { opacity: .4; cursor: default; }
.send svg { width: 16px; height: 16px; }
/* Sprachmodus (labs): Mikrofon neben Senden, ruhiger als der Senden-Knopf */
.send-voice { background: var(--k-segbg); color: var(--k-ink); text-decoration: none; }
.send-voice:hover { background: var(--k-tint); color: var(--k-accent); }
.cbtn { display: inline-flex; align-items: center; gap: 5px; color: var(--k-ink); border: 1px solid var(--k-line); background: transparent; border-radius: 999px; padding: 5px 11px; font-size: .84rem; white-space: nowrap; cursor: pointer; flex: none; }
.cbtn:hover { border-color: var(--k-accent); }
.ai-note { font-size: .78rem; color: var(--k-muted); text-align: center; }

/* Karten */
.card { border: 1px solid var(--k-line); border-radius: var(--k-r); padding: 14px 16px; background: var(--k-panel); display: grid; gap: 7px; align-content: start; }
.card.flush { padding: 0; }
.card.quiet { background: var(--k-chat); }
.card-link { color: inherit; transition: border-color .15s, box-shadow .15s; }
.card-link:hover { border-color: var(--k-line-strong); box-shadow: var(--k-shadow); text-decoration: none; }
.card-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 650; }
.card-sub { color: var(--k-muted); font-size: .9rem; }
.card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Status in Worten */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 650; padding: 2px 9px; border-radius: 999px; white-space: nowrap; flex: none; line-height: 1.5; background: var(--k-neutralbg); color: var(--k-neutralfg); }
.tag-ok { background: var(--k-okbg); color: var(--k-okfg); }
.tag-warn { background: var(--k-warnbg); color: var(--k-warnfg); }
.tag-danger { background: var(--k-dangerbg); color: var(--k-dangerfg); }
.tag-ai { background: transparent; border: 1px solid var(--k-chipbd); color: var(--k-muted); }
.tag-own { background: var(--k-ownbg); color: var(--k-ownfg); }
.tag-new { background: var(--k-warnbg); color: var(--k-warnfg); }

/* Listen mit einer Zeile je Eintrag */
.list { display: grid; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--k-line); min-width: 0; }
.li:last-child { border-bottom: 0; }
.li-main { flex: 1; display: grid; min-width: 0; gap: 1px; }
.li-main b, .li-main strong { font-weight: 600; }
/* Sitzungen auf der Kursseite: Marke neben dem Titel, Notizen über die volle Breite (am Handy sonst eine schmale Spalte). */
.li-sess { align-items: flex-start; }
.li-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.li-head .tag { margin-top: 1px; }
.sub { color: var(--k-muted); font-size: .88rem; font-weight: 400; }
a.li { color: inherit; }
/* Hinweise der Lehrperson zu einer Sitzung (Kursseite der Studierenden) */
.snotes { margin-top: 6px; font-size: .9rem; }
.snotes > summary { cursor: pointer; color: var(--k-muted); font-size: .85rem; width: fit-content; }
.snotes-b { margin-top: 6px; padding: 10px 12px; background: var(--k-chat); border: 1px solid var(--k-line); border-radius: var(--k-r); overflow-wrap: anywhere; }
a.li:hover { text-decoration: none; background: var(--k-chat); }
.date { flex: none; width: 46px; text-align: center; border-radius: 8px; background: var(--k-chat); border: 1px solid var(--k-line); padding: 3px 0; line-height: 1.1; display: grid; }
.date b { font-size: 1.05rem; }
.date span { font-size: .62rem; text-transform: uppercase; color: var(--k-muted); letter-spacing: .06em; font-weight: 600; }

/* Fortschritt */
.trk { display: block; height: 6px; border-radius: 999px; background: var(--k-neutralbg); overflow: hidden; }
.trk i { display: block; height: 100%; border-radius: 999px; background: var(--k-accent); }

/* Segment-Umschalter und lokale Reiter */
.seg { display: inline-flex; background: var(--k-segbg); border-radius: 9px; padding: 2px; gap: 2px; white-space: nowrap; }
.seg button, .seg a { font: inherit; font-size: .88rem; border: 0; background: transparent; color: var(--k-muted); padding: 4px 12px; border-radius: 7px; cursor: pointer; }
.seg button:hover, .seg a:hover { color: var(--k-ink); text-decoration: none; }
.seg [aria-pressed="true"], .seg .on { background: var(--k-segonbg); color: var(--k-ink); font-weight: 650; box-shadow: var(--k-segonshadow); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--k-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 9px 12px; color: var(--k-muted); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--k-ink); text-decoration: none; }
.tabs a.on { color: var(--k-ink); border-bottom-color: var(--k-accent); font-weight: 650; }
.tabs .count { color: var(--k-muted); font-weight: 500; margin-left: 4px; }

/* Klappzeilen auf der Startseite (details/summary) */
.glance { width: 100%; }
.gs > summary { list-style: none; cursor: pointer; display: block; }
.gs > summary::-webkit-details-marker { display: none; }
.shead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.ghead { display: flex; align-items: center; gap: 8px; }
.glabel { font-weight: 650; }
.gcount { font-size: .74rem; font-weight: 700; border-radius: 999px; padding: 0 8px; line-height: 1.6; background: var(--k-neutralbg); color: var(--k-neutralfg); font-variant-numeric: tabular-nums; }
.gcount.warn { background: var(--k-warnbg); color: var(--k-warnfg); }
.gcount.ok { background: var(--k-okbg); color: var(--k-okfg); }
.gsum { grid-column: 1; color: var(--k-muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { grid-column: 2; grid-row: 1 / span 2; color: var(--k-muted); transition: transform .2s ease; width: 16px; height: 16px; }
.gs[open] .chev { transform: rotate(180deg); }
.gs[open] .gsum { display: none; }
.gs[open] .gpanel { animation: gin .18s ease-out; }
@keyframes gin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Startseite: fokussiert (zentriert wie ChatGPT/Claude) oder Überblick (zwei Spalten) */
.home { padding: 0 24px 64px; }
.greet { display: grid; gap: 14px; padding: 9vh 0 6px; max-width: 46rem; margin: 0 auto; }
.home.focus .greet { justify-items: center; text-align: center; }
.gtitle { font-family: var(--k-fhead); font-weight: 700; font-size: 2rem; letter-spacing: -.02em; line-height: 1.15; }
.gline { display: flex; gap: 10px; align-items: flex-start; max-width: 38rem; text-align: left; }
.gline .av { margin-top: 1px; }
.home.focus .chips { justify-content: center; }
.home .glance { max-width: 46rem; margin: 22px auto 0; }
.home.focus .glance { border-top: 1px solid var(--k-line); }
.home.focus .gs { border-bottom: 1px solid var(--k-line); }
.home.focus .gs > summary { padding: 11px 10px; border-radius: 8px; }
.home.focus .gs > summary:hover { background: var(--k-chat); }
.home.focus .gpanel { padding: 0 10px 14px; }
.home .composer { max-width: 40rem; }
.home-panel { max-width: 40rem; width: 100%; text-align: left; margin: 0 auto; }
/* Startseite Lehrende: Gesprächsmodus ab der ersten Frage (05.10.2026). Eingabe
   unten fest wie bei ChatGPT und Claude, Übersicht als eine Zeile oben. */
.home .chat-dock { display: grid; gap: 6px; width: 100%; max-width: 40rem; margin: 0 auto; }
.chat-bar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 46rem; margin: 0 auto; }
.chat-sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--k-line); background: var(--k-panel); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .86rem; color: var(--k-muted); cursor: pointer; text-align: left; }
.chat-sum:hover { color: var(--k-ink); border-color: var(--k-line-strong); }
.chat-sum .chev { margin-left: auto; flex: none; }
.chat-sum[aria-expanded="true"] .chev { transform: rotate(180deg); }
.home.chatting { min-height: 100%; display: flex; flex-direction: column; padding-bottom: 0; }
.home.chatting .greet { flex: 1; display: flex; flex-direction: column; gap: 16px; padding-top: 16px; max-width: 46rem; width: 100%; text-align: left; }
.home.chatting .gtitle, .home.chatting .gline, .home.chatting .greet > .chips, .home.chatting #prof-scope { display: none; }
.home.chatting .glance { margin: 0; max-width: none; }
.home.chatting .home-panel { flex: 1; max-width: 46rem; }
.home.chatting .msg { scroll-margin-top: 12px; scroll-margin-bottom: 120px; }
.home.chatting .chat-dock { position: sticky; bottom: 0; z-index: 4; max-width: 46rem; padding: 10px 0 14px; background: var(--k-bar); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); }

/* Formulare */
.field { display: grid; gap: 5px; }
.field > label, .lbl { font-weight: 600; font-size: .9rem; }
.input, .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field input[type=url], .field select, .field textarea {
  width: 100%; border: 1px solid var(--k-fieldbd); border-radius: 10px; padding: 8px 11px; background: var(--k-panel); color: var(--k-ink); line-height: 1.4;
}
.field textarea { resize: vertical; min-height: 84px; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--k-accent); box-shadow: 0 0 0 3px var(--k-tint); }
.help { color: var(--k-muted); font-size: .84rem; }
.err { color: var(--k-dangerfg); font-size: .86rem; font-weight: 600; }
.field.has-err input, .field.has-err textarea, .field.has-err select { border-color: var(--k-dangerfg); }
.check { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; }
.check input { margin-top: 3px; accent-color: var(--k-accent); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 12px; }
.form-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
input[type=file] { font-size: .9rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--k-accent); }

/* Meldungen */
.flash { border-radius: 10px; padding: 10px 14px; font-size: .92rem; background: var(--k-okbg); color: var(--k-okfg); font-weight: 550; }
.flash.warn { background: var(--k-warnbg); color: var(--k-warnfg); }
.flash.err { background: var(--k-dangerbg); color: var(--k-dangerfg); }
.empty { border: 1px dashed var(--k-line-strong); border-radius: var(--k-r); padding: 18px; color: var(--k-muted); font-size: .92rem; display: grid; gap: 8px; justify-items: start; }
.info { background: var(--k-chat); border: 1px solid var(--k-line); border-radius: var(--k-r); padding: 14px 16px; font-size: .9rem; display: grid; gap: 6px; }
/* Kästchen mit Erklärtext (Rechte-Erklärung): .info setzt grid, das Kästchen stand sonst allein über dem Text. */
.check.info { display: flex; }

/* Aufgabenliste (Kurs einrichten, GOV.UK „complete multiple tasks“) */
.tasks { list-style: none; margin: 0; padding: 0; display: grid; }
.tasks li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--k-line); }
.tasks li:last-child { border-bottom: 0; }
.tasks .n { width: 24px; height: 24px; border-radius: 50%; background: var(--k-neutralbg); color: var(--k-neutralfg); display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
.tasks li.done .n { background: var(--k-accent); color: var(--k-onaccent); }
.tasks li.cur { background: var(--k-tint); border-radius: 8px; padding-inline: 8px; margin-inline: -8px; border-bottom-color: transparent; }
.tasks a { color: var(--k-ink); flex: 1; min-width: 0; }
.tasks a:hover { color: var(--k-accent); text-decoration: none; }

/* Dialog */
dialog.dlg { border: 1px solid var(--k-line); border-radius: 16px; padding: 0; width: min(36rem, calc(100vw - 32px)); background: var(--k-panel); color: var(--k-ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.45); }
dialog.dlg::backdrop { background: rgba(20,18,15,.38); }
.dlg-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 0; }
.dlg-b { padding: 14px 20px 20px; display: grid; gap: 14px; }

/* Tabelle */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tbl th { text-align: left; font-weight: 600; color: var(--k-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--k-line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--k-line); vertical-align: top; }

/* Kennzahl (nur echte Zahlen; Regel per Test erzwungen) */
.kpi { display: grid; gap: 2px; }
.kpi b { font-size: 1.5rem; font-family: var(--k-fhead); font-variant-numeric: tabular-nums; }
.kpi span { color: var(--k-muted); font-size: .86rem; }

/* Kursfarbe als Initial */
.cinit { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; flex: none; font-size: .95rem; }

/* ---------- 7 Gespräch mit Ava ---------- */
.av { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--k-accent); color: var(--k-onaccent); font-weight: 700; display: inline-grid; place-items: center; font-size: .78rem; }
.av.lg { width: 34px; height: 34px; font-size: .95rem; }
.convo { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--k-page); }
.convo-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-bottom: 1px solid var(--k-line); min-height: 52px; }
.thread { flex: 1; overflow-y: auto; padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.thread-in { max-width: 46rem; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg-me { justify-content: flex-end; }
.msg-me .bubble { background: var(--k-chat); border: 1px solid var(--k-line); border-radius: 16px 16px 4px 16px; padding: 9px 14px; max-width: 34rem; white-space: pre-wrap; }
.msg-ava .bubble { max-width: 40rem; padding-top: 2px; min-width: 0; }
.msg .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quote { border-left: 3px solid var(--k-accent); background: var(--k-chat); padding: 6px 10px; border-radius: 0 8px 8px 0; font-family: var(--k-fread); font-size: .95rem; margin-bottom: 6px; color: var(--k-ink); }
.typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--k-muted); animation: tdot 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.convo-foot { flex: none; padding: 8px 20px 14px; display: grid; gap: 8px; }
.convo-foot-in { max-width: 46rem; width: 100%; margin: 0 auto; display: grid; gap: 8px; }
.srcs { display: grid; gap: 6px; margin-top: 10px; }
.src { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--k-line); border-radius: 10px; padding: 8px 11px; font-size: .86rem; color: inherit; background: var(--k-panel); }
.src:hover { border-color: var(--k-line-strong); text-decoration: none; }
.src .q { font-weight: 700; color: var(--k-accent); flex: none; }
.src .snip { color: var(--k-muted); display: block; }
.minor { border: 0; background: none; color: var(--k-muted); font-size: .8rem; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.minor:hover { color: var(--k-ink); background: var(--k-segbg); }
.choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Markdown in Avas Antworten (tutor.js mdToHtml) */
.md { line-height: 1.62; overflow-wrap: anywhere; }
.md p { margin: 0 0 10px; }
.md p:last-child, .md ul:last-child, .md ol:last-child, .md table:last-child { margin-bottom: 0; }
.md h4 { margin: 14px 0 6px; font-size: 1rem; font-weight: 700; }
.md h4:first-child { margin-top: 0; }
.md ul, .md ol { margin: 0 0 10px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md hr { border: none; border-top: 1px solid var(--k-line); margin: 12px 0; }
.md code { background: var(--k-neutralbg); border-radius: 4px; padding: 1px 5px; font-size: .88em; }
.md table { border-collapse: collapse; margin: 4px 0 10px; font-size: .9rem; display: block; overflow-x: auto; max-width: 100%; }
.md th, .md td { border: 1px solid var(--k-line); padding: 5px 9px; text-align: left; }
.md th { background: var(--k-chat); font-weight: 650; }

/* ---------- 8 Canvas (zweite Fläche) und Reader ---------- */
.split { display: grid; grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr); height: 100%; min-height: 0; }
.split > .convo { border-right: 1px solid var(--k-line); }
.canvas { overflow-y: auto; min-height: 0; background: var(--k-bg); }
.canvas-in { max-width: 46rem; margin: 0 auto; padding: 22px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
.sheet { background: var(--k-panel); border: 1px solid var(--k-line); border-radius: 14px; padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sheet-sect { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--k-line); }
.sheet-sect:first-child { padding-top: 0; border-top: 0; }
.just-added { background: var(--k-warnbg); border-radius: 8px; transition: background 2.5s ease; }

.rd-article { max-width: 42rem; margin: 0 auto; font-family: var(--k-fread); font-size: 1.12rem; line-height: 1.75; color: var(--k-ink); overflow-wrap: break-word; }   /* lange DOI- und Lizenz-Links (Beispieltexte, 14.10.2026) */
.rd-meta { font-family: var(--k-fui); }
.rd-title { font-family: var(--k-fread); font-size: 1.7rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.rd-sec { position: relative; padding: 4px 0 4px 48px; margin-bottom: 16px; border-radius: 10px; transition: background .4s; }
.rd-sec h3 { font-family: var(--k-fread); font-size: 1.2rem; font-weight: 650; margin: 18px 0 8px; }
.rd-sec p { margin: 0; white-space: pre-line; }
.rd-num { position: absolute; left: 0; top: 7px; width: 34px; text-align: right; font-family: var(--k-fui); font-size: .72rem; font-weight: 600; color: var(--k-line-strong); user-select: none; }
.rd-sec.rd-seen .rd-num { color: var(--k-muted); }
.rd-sec.rd-engaged .rd-num { color: var(--k-accent); }
.rd-ask { position: absolute; left: 0; top: 28px; width: 34px; display: flex; justify-content: flex-end; opacity: 0; transition: opacity .15s; }
.rd-sec:hover .rd-ask, .rd-sec:focus-within .rd-ask { opacity: 1; }
.rd-ask button { cursor: pointer; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--k-chipbd); background: var(--k-panel); color: var(--k-accent); font-weight: 700; font-size: .8rem; font-family: var(--k-fui); }
.rd-sec.rd-flash { background: var(--k-mark); }
.rd-sec.rd-active { background: var(--k-tint); }
.rd-article ::selection { background: var(--k-mark); }
#rd-popover { position: absolute; z-index: 40; display: none; gap: 6px; flex-wrap: wrap; max-width: min(420px, calc(100% - 16px)); background: var(--k-ink); border-radius: 12px; padding: 6px; box-shadow: var(--k-shadow); font-family: var(--k-fui); }
#rd-popover button { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--k-panel); background: transparent; border: 0; border-radius: 8px; padding: 6px 10px; }
#rd-popover button:hover { background: rgba(127,127,127,.25); }
#rd-anchor { display: none; align-items: center; gap: 8px; font-size: .84rem; color: var(--k-ink); background: var(--k-mark); border-radius: 9px; padding: 7px 10px; }
#rd-anchor.on { display: flex; }
.rd-chat-toggle { display: none; }
@media (hover: none) { .rd-ask { opacity: .75; } }

/* Lernkarte */
.flashcard { border: 1px solid var(--k-line); border-radius: 16px; background: var(--k-panel); padding: 28px; display: grid; gap: 14px; min-height: 14rem; align-content: start; box-shadow: var(--k-shadow); }
.flashcard .q { font-family: var(--k-fread); font-size: 1.3rem; line-height: 1.45; }
.flashcard .a { font-family: var(--k-fread); font-size: 1.08rem; line-height: 1.55; border-top: 1px solid var(--k-line); padding-top: 14px; }

/* Anmeldung: eine Karte, mittig */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: var(--k-bg); }
.auth-card { width: min(28rem, 100%); background: var(--k-panel); border: 1px solid var(--k-line); border-radius: 18px; padding: 28px; display: grid; gap: 18px; box-shadow: var(--k-shadow); }
.auth-card.wide { width: min(34rem, 100%); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; }
.auth-foot { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: .82rem; color: var(--k-muted); }
.auth-foot a { color: var(--k-muted); }
.auth-legal { display: contents; }
.demo-logins { display: grid; gap: 6px; font-size: .86rem; }
.demo-logins button { text-align: left; }

/* ---------- 9 Responsive ---------- */
@media (max-width: 1023px) {
  .app, .app.noside { grid-template-columns: minmax(0, 1fr); }
  .sb { position: fixed; top: 0; bottom: 0; left: 0; width: min(18rem, 86vw); z-index: 60; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.25); visibility: visible !important; padding: 14px 10px 12px !important; border-right: 1px solid var(--k-line) !important; }
  body.nav-open .sb { transform: none; }
  body.nav-open .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(20,18,15,.4); }
  .sb-close { display: grid; margin-left: auto; }
  .tb-brand { display: flex; }
  /* Kurs einrichten: der Entwurf unten höchstens 42 % und scrollt; mit "auto" nahm er am Handy die ganze Höhe und das Gespräch war 0 px hoch (07.10.). */
  .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 42%); }
  /* Mindesthöhe fürs Gespräch: sonst rutscht am Handy das Eingabefeld unter die Tab-Leiste (Reader mit Hinweisbanner, 07.10.). */
  .split.canvas-first { grid-template-rows: minmax(0, 1fr) minmax(0, max(46%, 23rem)); }
  .split.canvas-first > .canvas { order: -1; }
  .split > .convo { border-right: 0; border-top: 1px solid var(--k-line); }
  .split > .convo.min .thread, .split > .convo.min .convo-foot,
  .split > .convo.rd-chat-min .thread, .split > .convo.rd-chat-min .convo-foot { display: none; }
  .split.canvas-first:has(.rd-chat-min) { grid-template-rows: minmax(0, 1fr) auto; }
  .rd-chat-toggle { display: inline-flex; }
  .cols-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body { font-size: 15px; }
  .tb { padding: 6px 12px 6px 6px; }
  .tb .hide-sm, .convo-head .hide-sm { display: none; }
  /* Lange Knöpfe oben rechts ("Prüfen und veröffentlichen (noch 6 Teile)") brechen um, statt Logo und Brotkrumen zu überdecken. */
  .tb-left { flex: 1 1 auto; min-width: 72px; }
  .tb-acts { flex: 0 1 auto; min-width: 0; }
  .tb-acts .btn { white-space: normal; text-align: center; line-height: 1.2; }
  .wrap, .wrap-md, .wrap-sm { padding: 18px 16px 88px; }
  .home { padding: 0 16px 96px; }
  .greet { padding-top: 5vh; }
  /* .pg-main hält unten 64px für die Tab-Leiste frei; dazu nur der Home-Indicator. */
  .home.chatting .chat-dock { bottom: env(safe-area-inset-bottom, 0px); }
  .chat-bar .btn span { display: none; }
  .gtitle { font-size: 1.55rem; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .thread { padding: 16px 14px; }
  .convo-foot { padding: 6px 12px 10px; }
  .canvas-in { padding: 16px 14px 48px; }
  .rd-sec { padding-left: 30px; }
  .rd-num, .rd-ask { width: 24px; }
  .rd-article { font-size: 1.05rem; line-height: 1.7; }
  .pg-main { padding-bottom: 64px; }
  .pg-main.fill { padding-bottom: 60px; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--k-bar); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-top: 1px solid var(--k-line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); }
  .tab { display: grid; justify-items: center; gap: 2px; padding: 5px 2px; font-size: .7rem; font-weight: 600; color: var(--k-muted); position: relative; }
  .tab:hover { text-decoration: none; }
  .tab svg { width: 22px; height: 22px; }
  .tab.on { color: var(--k-accent); }
  .tab .sb-count { position: absolute; top: 0; left: calc(50% + 6px); margin: 0; }
  .auth-card { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .app, .sb, .chev, .rd-sec, .just-added { transition: none !important; }
  .gs[open] .gpanel, .typing i { animation: none !important; }
}
@media print {
  .sb, .tb, .tabbar, .notice, .convo-foot { display: none !important; }
  .app { display: block; height: auto; }
  .pg-main { overflow: visible; }
}

/* Meldungen nach einer Aktion (Django messages) */
.flashes { max-width: 64rem; margin: 14px auto 0; padding: 0 28px; display: grid; gap: 8px; }
.flashes .flash { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.flashes .flash.info { background: var(--k-neutralbg); color: var(--k-neutralfg); }
@media (max-width: 700px) { .flashes { padding: 0 16px; } }

/* Wiederholen: Selbsteinschätzung und kurze Rückmeldung */
.grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.grade { border: 1px solid var(--k-line-strong); background: var(--k-panel); border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; display: grid; gap: 2px; color: var(--k-ink); }
.grade:hover { border-color: var(--k-accent); }
.grade b { font-size: .95rem; }
.grade span { font-size: .74rem; color: var(--k-muted); }
.grade.sug { border-color: var(--k-accent); background: var(--k-tint); }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: var(--k-ink); color: var(--k-panel); font-size: .88rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; box-shadow: var(--k-shadow); z-index: 70; }
@media (max-width: 700px) { .grades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Anmeldung und Registrierung */
.auth { align-content: center; gap: 18px; }
.notice-box { background: var(--k-warnbg); color: var(--k-ink); border-radius: var(--k-r); padding: 12px 14px; display: grid; gap: 8px; }
.notice-box p { margin: 0; line-height: 1.55; }
fieldset.field { display: grid; gap: 8px; }
.prompt-box > summary { list-style: none; }
.prompt-box > summary::-webkit-details-marker { display: none; }
.prompt-box[open] .chev { transform: rotate(180deg); }
.prompt-text { margin: 0; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.65; white-space: pre-wrap; background: var(--k-chat); border-top: 1px solid var(--k-line); color: var(--k-ink); border-radius: 0 0 var(--k-r) var(--k-r); overflow-x: auto; }
/* Lernplan */
.week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.day { border: 1px solid var(--k-line); border-radius: var(--k-r); background: var(--k-panel); padding: 12px; display: grid; gap: 8px; align-content: start; min-height: 12rem; }
.day.today { border-color: var(--k-accent); box-shadow: var(--k-shadow); }
.day-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--k-line); }
.day.today .day-h b { color: var(--k-accent); }
.pblock { display: grid; gap: 2px; border-left: 3px solid var(--k-accent); background: var(--k-chat); border-radius: 0 8px 8px 0; padding: 8px 10px; color: inherit; }
a.pblock:hover { text-decoration: none; background: var(--k-hover, var(--k-chat)); }
@media (max-width: 900px) { .week { grid-template-columns: 1fr; } .day { min-height: 0; } }
/* Gespräch mit Seitenspalte (Wochenreflexion) */
.convo-rail { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; height: 100%; min-height: 0; }
.rail { border-left: 1px solid var(--k-line); background: var(--k-bg); padding: 20px 18px; overflow-y: auto; }
.show-narrow { display: none; }
@media (max-width: 1023px) {
  .convo-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .show-narrow { display: inline-flex; }
  .rail-open .rail { display: block; position: fixed; left: 0; right: 0; bottom: 0; max-height: 75vh; z-index: 60; border-left: 0; border-top: 1px solid var(--k-line); border-radius: 16px 16px 0 0; box-shadow: var(--k-shadow); background: var(--k-panel); }
}
/* Briefing (Screen 5) */
.briefing .topic { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--k-line); }
.briefing .topic:last-of-type { border-bottom: 0; }
.briefing .topic .trk { height: 8px; }
.quote-card { margin: 0; }
.quote-card blockquote { margin: 0; font-family: var(--k-fread); font-size: 1.08rem; line-height: 1.55; }
.openers { margin: 0; padding-left: 1.3rem; display: grid; gap: 10px; }
.openers li { padding-left: 2px; }
.openers li b, .openers li span { display: block; }
.openers li span { margin-top: 2px; }
@media print {
  .no-print { display: none !important; }
  .briefing .cols-main { display: block; }
  .briefing .card { box-shadow: none; break-inside: avoid; }
  .briefing { padding: 0; }
}
/* Anführungszeichen je Sprache (für <q>) */
q { quotes: "“" "”" "‘" "’"; }
:lang(de) q { quotes: "„" "“" "‚" "‘"; }
/* Mein KI-Avatar: ohne Text nur das Gespräch in der Mitte, danach Gespräch und Blatt */
.av-focus { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.av-intro { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 5vh 0 6px; }
.av-intro .gtitle { font-size: 1.6rem; }
.av-intro p { margin: 0; max-width: 34rem; color: var(--k-muted); }
.av-text { white-space: pre-line; line-height: 1.6; overflow-wrap: anywhere; }
.sheet-sect.gs > summary { padding: 2px 0; }
/* Formeln (KaTeX) in Avas Antworten: breite Formeln scrollen statt umzubrechen. */
.md .katex { overflow-wrap: normal; font-size: 1.05em; }
.md .katex-display { margin: 8px 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* ---- Beta für unabhängige Lernende (14.10.2026) ----
   Erster Start ohne Kurs, Beispiele zum Ausprobieren, Avas Tagesbudget als
   ruhige Zeile, Hinweis „Testversion“. */
.first-start { display: grid; gap: 22px; padding-bottom: 28px; }
.first-start .greet { padding-top: 7vh; }
.first-start .gline b { font-weight: 600; }
.first-start .composer textarea { min-height: 3.2em; }
.first-try { max-width: 52rem; width: 100%; margin: 0 auto; }
.first-try-h { font-size: .95rem; font-weight: 600; color: var(--k-muted); text-align: center; }
.first-alt { text-align: center; }
.try-grid .card-t { line-height: 1.3; }
.budget-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font-size: .82rem; color: var(--k-muted); }
.budget-line.at-limit { color: var(--k-ink); background: var(--k-warnbg); border-radius: var(--k-r); padding: 8px 12px; }
.budget-state { font-weight: 600; }
.budget-state.ok { color: var(--k-okfg); }
.notice.verify-email .vn-short { display: none; }
.notice.test-banner { background: var(--k-tint); color: var(--k-ink); padding-block: 6px; }
.notice.test-banner a { color: inherit; text-decoration: underline; }
.notice.test-banner .iconbtn { margin-left: auto; }
@media (max-width: 640px) {
  .first-start .greet { padding-top: 3vh; }
  .notice.test-banner { padding-inline: 16px; font-size: .82rem; flex-wrap: nowrap; }
  .notice.test-banner .tb-more { display: none; }   /* eine Zeile: Platz für Text und Ava */
  .notice.verify-email { padding: 6px 16px; gap: 8px; font-size: .82rem; flex-wrap: nowrap; }
  .notice.verify-email .vn-long { display: none; }  /* eine Zeile bis zur Bestätigung */
  .notice.verify-email .vn-short { display: inline; }
  .notice.verify-email .vn-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .notice.verify-email form { flex-shrink: 0; white-space: nowrap; }
  .rd-title { font-size: 1.4rem; }                  /* lange englische Titel (Beispieltexte) */
}

/* ---------- 10 Stage (09.10.2026) ----------
   Dunkler Look für labs nach ui_design_stage_julian_2026-10-09.html („The
   direction“, Screen 01): schwarzer Grund, gedämpfte Seitenleiste, größere
   und engere Überschriften, ein Schimmer Teal hinter der Begrüßung, weiß, was
   zählt. Farben nur über die Tokens in 2. Selektoren mit :where(), damit die
   Klassen der Seiten weiter gewinnen. Die Lesefläche (.paper) ist hell, bis
   das Konto sie dunkel stellt (data-paper="dark"). */
:where([data-ui="stage"]) h1 { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.12; }
:where([data-ui="stage"]) h2 { font-size: 1.28rem; letter-spacing: -.02em; }
:where([data-ui="stage"]) .gtitle { font-size: 2.6rem; font-weight: 650; letter-spacing: -.04em; line-height: 1.06; }
:where([data-ui="stage"]) .eyebrow { letter-spacing: .1em; }
/* Seitenleiste gedämpft (Linear 2026): die Arbeit führt, die Orte treten zurück. */
:where([data-ui="stage"]) .sb-item { color: var(--k-muted); font-weight: 500; }
:where([data-ui="stage"]) .sb-item .ico { opacity: .85; }
:where([data-ui="stage"]) .sb-item:hover { color: var(--k-ink); }
:where([data-ui="stage"]) .sb-item.on { background: var(--k-segbg); color: var(--k-ink); font-weight: 600; }
:where([data-ui="stage"]) .sb-item.on .ico { color: var(--k-accent); opacity: 1; }
:where([data-ui="stage"]) .sb-brand { font-weight: 650; letter-spacing: -.01em; }
/* Kursfarben sind für helle Flächen gewählt: ein feiner Ring hält dunkle Punkte sichtbar. */
:where([data-ui="stage"]) .cdot { box-shadow: 0 0 0 1px var(--k-line-strong); }
:where([data-ui="stage"]) .home.focus .greet { background: radial-gradient(ellipse 70% 60% at 50% 18%, var(--k-glow), transparent 72%); }
:where([data-ui="stage"]) .card-link:hover { border-color: var(--k-line-strong); box-shadow: none; }
:where([data-ui="stage"]) dialog.dlg::backdrop { background: rgba(0,0,0,.62); }
/* Umschalter mit Zustand (Lesefläche dunkel): gedrückt sichtbar, nicht nur für Screenreader. */
:where([data-ui="stage"]) .btn[aria-pressed="true"] { background: var(--k-segbg); border-color: var(--k-line-strong); color: var(--k-ink); }
/* Knopf-Tabs („Kurse“, „Semester“) tragen inline font:inherit und wurden so größer als die
   anderen Tabs; das betrifft auch stable und wird dort nach dem Freeze im Markup behoben. */
:where([data-ui="stage"]) button.tab { font-size: .7rem !important; font-weight: 600 !important; }
/* Lesefläche: Text, Farben und Bildlaufleisten aus dem hellen Satz. */
.paper { color: var(--k-ink); }
@media (max-width: 700px) {
  :where([data-ui="stage"]) h1 { font-size: 1.6rem; }
  :where([data-ui="stage"]) .gtitle { font-size: 1.9rem; }
}