/* Uni-App · shadcn/ui-Designsystem (Basis „neutral", Radius 0.625rem, Schrift Geist)
   Tokens wie in shadcn v4 (oklch). Komponenten nachgebaut: Card, Button, Badge, Tabs, Input,
   Progress, Checkbox, Separator. Kursfarben nur als Punkt oder Linie (wie shadcn --chart-*). */

@font-face { font-family: "Geist"; src: url("/vendor/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/vendor/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-weich: oklch(0.577 0.245 27.325 / 10%);
  --success: oklch(0.596 0.145 163.225);
  --success-weich: oklch(0.596 0.145 163.225 / 12%);
  --warning: oklch(0.666 0.179 58.318);
  --warning-weich: oklch(0.769 0.188 70.08 / 16%);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --bar: oklch(1 0 0 / 0.85);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216); --destructive-weich: oklch(0.704 0.191 22.216 / 15%);
    --success: oklch(0.765 0.177 163.223); --success-weich: oklch(0.765 0.177 163.223 / 14%);
    --warning: oklch(0.828 0.189 84.429); --warning-weich: oklch(0.828 0.189 84.429 / 14%);
    --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0);
    --shadow-xs: none; --shadow-sm: none; --bar: oklch(0.205 0 0 / 0.85);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216); --destructive-weich: oklch(0.704 0.191 22.216 / 15%);
  --success: oklch(0.765 0.177 163.223); --success-weich: oklch(0.765 0.177 163.223 / 14%);
  --warning: oklch(0.828 0.189 84.429); --warning-weich: oklch(0.828 0.189 84.429 / 14%);
  --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0);
  --shadow-xs: none; --shadow-sm: none; --bar: oklch(0.205 0 0 / 0.85);
  color-scheme: dark;
}

/* Abgeleitete Radien wie shadcn */
:root { --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); }

* { box-sizing: border-box; border-color: var(--border); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: contain; font-feature-settings: "ss01";
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
a { color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); border-radius: var(--radius-md); }
.mono, .zl-zeit, .datum-block .nr, .ort-raum, .lk-quote { font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- Login */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-box { width: 100%; max-width: 360px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-sm); }
.login-icon img { width: 48px; height: 48px; border-radius: 12px; }
.login h1 { margin: 16px 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.login p { color: var(--muted-foreground); margin: 0 0 20px; font-size: 14px; }
.login input {
  width: 100%; height: 40px; font: inherit; font-size: 16px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--input);
  background: transparent; color: var(--foreground); outline: none; box-shadow: var(--shadow-xs);
}
.login input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.login button[type="submit"] {
  margin-top: 12px; width: 100%; height: 40px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground);
  font-weight: 500; font-size: 14px; text-align: center; box-shadow: var(--shadow-xs);
}
.login-fehler { color: var(--destructive) !important; min-height: 1.4em; margin: 12px 0 0 !important; font-size: 13px !important; }

/* ---------------------------------------------------------------- Kopf */
.kopf { position: sticky; top: 0; z-index: 5; padding: calc(env(safe-area-inset-top) + 14px) 16px 12px; background: var(--background); }
.kopf.gescrollt { border-bottom: 1px solid var(--border); }
.kopf-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; max-width: 680px; margin: 0 auto; }
.kopf h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.unterzeile { color: var(--muted-foreground); font-size: 14px; margin-top: 2px; max-width: 680px; margin-left: auto; margin-right: auto; }
.icon-knopf {
  width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; color: var(--foreground);
  border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs); flex: none;
}
.icon-knopf svg { width: 18px; height: 18px; }
.icon-knopf.dreht svg { animation: drehen 0.9s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.inhalt { padding: 4px 16px calc(env(safe-area-inset-bottom) + 104px); max-width: 680px; margin: 0 auto; }

/* ---------------------------------------------------------------- Tableiste */
.tabbar {
  position: fixed; z-index: 10; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 10px); max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 4px; border-radius: var(--radius-xl);
  background: var(--bar); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
}
.tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 5px; border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: 10.5px; font-weight: 500; text-align: center; }
.tabbar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tabbar button.aktiv { color: var(--foreground); background: var(--accent); }
.punkt { position: absolute; top: 5px; left: calc(50% + 6px); width: 7px; height: 7px; border-radius: 50%; background: var(--destructive); box-shadow: 0 0 0 2px var(--background); }

/* ---------------------------------------------------------------- Abschnitte, Card, Badge */
.abschnitt { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 2px 10px; }
.abschnitt h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.abschnitt .mehr, .abschnitt .hinweis { font-size: 13px; color: var(--muted-foreground); font-weight: 500; margin: 0; }
.gruppe { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.gruppe > * + * { border-top: 1px solid var(--border); }
.leer { color: var(--muted-foreground); padding: 20px 16px; font-size: 14px; text-align: center; }
.hinweis { font-size: 12.5px; color: var(--muted-foreground); margin: 20px 2px 0; line-height: 1.55; }
.problem { border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent); background: var(--warning-weich); color: var(--foreground); border-radius: var(--radius-lg); padding: 12px 14px; font-size: 13.5px; margin-top: 12px; }
.problem code { font-family: "Geist Mono", monospace; font-size: 12px; word-break: break-all; }

.marke { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; line-height: 1.3; padding: 2px 8px; border-radius: var(--radius-md); border: 1px solid transparent; background: var(--secondary); color: var(--secondary-foreground); white-space: nowrap; }
.marke.rot { background: var(--destructive); color: #fff; }
.marke.gelb { background: transparent; border-color: var(--border); color: var(--foreground); }
.marke.gruen { background: var(--success-weich); color: var(--success); }
.marke.akzent { background: var(--primary); color: var(--primary-foreground); }
.kpunkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--muted-foreground)); flex: none; }

/* ---------------------------------------------------------------- Ort (Heute) */
.ort { display: block; width: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 20px; box-shadow: var(--shadow-sm); margin-top: 4px; }
.ort-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted-foreground); }
.ort-label .live { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-weich); }
.ort-raum { font-size: 52px; line-height: 1; font-weight: 600; letter-spacing: -0.05em; margin: 14px 0 8px; }
.ort-kurs { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.ort-kurs::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--muted-foreground)); flex: none; }
.ort-meta { color: var(--muted-foreground); font-size: 14px; margin-top: 3px; }
.ort-fortschritt { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 20%, transparent); margin-top: 16px; overflow: hidden; }
.ort-fortschritt i { display: block; height: 100%; background: var(--primary); }
.ort.ruhe .ort-raum { font-size: 28px; letter-spacing: -0.02em; }
.ort.ruhe .ort-kurs::before { display: none; }

.status-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs); font-size: 13px; font-weight: 500; }
.status b { font-weight: 600; }
.status.rot { color: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 35%, transparent); }
.status svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- Zeitleiste */
.zeitleiste { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 4px 0; overflow: hidden; }
.zl-eintrag { display: grid; grid-template-columns: 48px 3px 1fr; gap: 0 14px; padding: 12px 16px; width: 100%; position: relative; }
.zl-eintrag + .zl-eintrag, .zl-luecke + .zl-eintrag { border-top: 1px solid var(--border); }
.zl-zeit { font-weight: 600; font-size: 14px; line-height: 1.35; }
.zl-zeit small { display: block; color: var(--muted-foreground); font-weight: 400; font-size: 12.5px; }
.zl-linie { border-radius: 3px; background: var(--k, var(--primary)); }
.zl-was { min-width: 0; }
.zl-kurs { font-weight: 600; font-size: 15px; line-height: 1.35; }
.zl-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--muted-foreground); font-size: 13px; margin-top: 2px; }
.zl-meta .raum { color: var(--foreground); font-weight: 600; font-feature-settings: "tnum"; }
.zl-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zl-eintrag.aus .zl-kurs, .zl-eintrag.aus .zl-zeit { color: var(--muted-foreground); text-decoration: line-through; }
.zl-eintrag.aus .zl-linie { background: repeating-linear-gradient(var(--destructive) 0 4px, transparent 4px 7px); }
.zl-eintrag.vorbei { opacity: 0.5; }
.zl-eintrag.laeuft { background: var(--accent); }
.zl-luecke { padding: 4px 16px 4px 78px; font-size: 12px; color: var(--muted-foreground); border-top: 1px dashed var(--border); }
.zl-jetzt { display: flex; align-items: center; gap: 8px; padding: 2px 16px; color: var(--destructive); font-size: 11px; font-weight: 600; font-family: "Geist Mono", monospace; }
.zl-jetzt::after { content: ""; flex: 1; height: 1px; background: var(--destructive); }
.zl-tag { display: flex; justify-content: space-between; align-items: baseline; margin: 26px 2px 10px; scroll-margin-top: 110px; }
.zl-tag h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.zl-tag span { font-size: 13px; color: var(--muted-foreground); }
.zl-tag.heute h3::after { content: "Heute"; margin-left: 8px; font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); vertical-align: 2px; }

/* ---------------------------------------------------------------- Woche */
.woche-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.woche-kopf .titel { font-weight: 600; font-size: 15px; }
.woche-kopf .titel small { display: block; color: var(--muted-foreground); font-size: 13px; font-weight: 400; }
.pfeile { display: flex; gap: 6px; }
.pfeile button { height: 32px; min-width: 32px; border-radius: var(--radius-md); display: grid; place-items: center; border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs); color: var(--foreground); }
.pfeile button svg { width: 16px; height: 16px; }
.pfeile button.heute-knopf { padding: 0 12px; font-size: 13px; font-weight: 500; }
.tage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 14px; }
.tage.sieben { grid-template-columns: repeat(7, 1fr); }
.tag-pille { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-xs); text-align: center; }
.tag-pille .wt { font-size: 11.5px; font-weight: 500; color: var(--muted-foreground); }
.tag-pille .nr { font-size: 17px; font-weight: 600; font-feature-settings: "tnum"; }
.tag-pille .punkte { display: flex; gap: 3px; height: 6px; }
.tag-pille .punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--k, var(--muted-foreground)); }
.tag-pille .punkte i.aus { background: var(--destructive); }
.tag-pille.heute { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.tag-pille.heute .wt { color: color-mix(in oklab, var(--primary-foreground) 70%, transparent); }
.tag-pille.leer { opacity: 0.45; box-shadow: none; background: transparent; }

/* ---------------------------------------------------------------- Zeilen */
.zeile { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; width: 100%; }
button.zeile:active, .paket:active, .news-zeile:active { background: var(--accent); }
.zeile-text { flex: 1; min-width: 0; }
.zeile-titel { font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.zeile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted-foreground); font-size: 12.5px; margin-top: 4px; }
.zeile-detail { color: var(--muted-foreground); font-size: 13.5px; margin-top: 4px; line-height: 1.5; }
.chevron { flex: none; color: var(--muted-foreground); align-self: center; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.datum-block { flex: none; width: 44px; text-align: center; padding: 6px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.datum-block .wt { display: block; font-size: 10.5px; font-weight: 500; color: var(--muted-foreground); text-transform: uppercase; }
.datum-block .nr { display: block; font-size: 18px; font-weight: 600; line-height: 1.15; }
.datum-block .mo { display: block; font-size: 10.5px; color: var(--muted-foreground); }
.datum-block.bald { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); }
.datum-block.bald .nr { color: var(--destructive); }

/* Checkbox (shadcn): size-4, rounded-[4px], checked = primary */
.haken { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--input); background: transparent; box-shadow: var(--shadow-xs); display: grid; place-items: center; margin-top: 2px; color: transparent; }
.haken svg { width: 13px; height: 13px; }
.frist.erledigt .haken, .lk-punkt.an .haken { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.frist.erledigt .zeile-titel { text-decoration: line-through; color: var(--muted-foreground); }
.frist.erledigt .datum-block { opacity: 0.5; }

/* ---------------------------------------------------------------- News & Mail */
.news-zeile { display: block; width: 100%; padding: 14px 16px; }
.news-kopf { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); min-width: 0; }
.news-kopf .von { color: var(--foreground); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.news-kopf .zeit { margin-left: auto; flex: none; font-feature-settings: "tnum"; }
.news-titel { font-weight: 600; font-size: 14.5px; line-height: 1.4; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-zeile.offen .news-titel { -webkit-line-clamp: unset; display: block; }
.news-zeile.ungelesen .news-kopf .von::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-right: 6px; vertical-align: 2px; }
.news-text { color: var(--muted-foreground); font-size: 13.5px; margin-top: 4px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.news-zeile.offen .news-text { -webkit-line-clamp: unset; display: block; }
.news-text.md { white-space: normal; }
.news-text.md p, .news-text.md ul { margin: 4px 0; }
.news-text.md ul { padding-left: 18px; }
.punkte-liste { list-style: none; margin: 6px 0 0; padding: 0; font-size: 13.5px; color: var(--foreground); line-height: 1.5; }
.punkte-liste li { display: flex; gap: 8px; white-space: nowrap; overflow: hidden; }
.punkte-liste li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--k, var(--foreground)); margin-top: 9px; }
.punkte-liste li span { overflow: hidden; text-overflow: ellipsis; }
.news-zeile.offen .punkte-liste li { white-space: normal; }
.mail-voll { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--muted); color: var(--foreground); font-size: 13.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.mail-info { margin-top: 10px; font-size: 12px; color: var(--muted-foreground); line-height: 1.6; }
.mail-auf { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; }
.mail-warnung { margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); background: var(--destructive-weich); color: var(--destructive); font-size: 13px; line-height: 1.5; }

/* Tabs (shadcn): TabsList bg-muted rounded-lg p-[3px], Trigger aktiv bg-background shadow-sm */
.segment { display: flex; gap: 0; padding: 3px; border-radius: var(--radius-lg); background: var(--muted); overflow-x: auto; scrollbar-width: none; height: 36px; }
.segment::-webkit-scrollbar { display: none; }
.segment button { flex: 1 0 auto; padding: 0 12px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 500; color: var(--muted-foreground); text-align: center; white-space: nowrap; border: 1px solid transparent; }
.segment button.aktiv { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .segment button.aktiv { background: var(--input); border-color: var(--input); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .segment button.aktiv { background: var(--input); border-color: var(--input); } }

.tag-label { font-size: 13px; font-weight: 600; color: var(--foreground); margin: 24px 2px 10px; display: flex; justify-content: space-between; gap: 8px; }
.tag-label span:last-child { font-weight: 400; color: var(--muted-foreground); }

/* ---------------------------------------------------------------- Lernen */
.fach { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.fach + .fach { margin-top: 12px; }
.fach-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 16px 12px; width: 100%; }
.fach-kopf .name { font-weight: 600; font-size: 15px; line-height: 1.3; }
.fach-kopf .wann { font-size: 12.5px; color: var(--muted-foreground); margin-top: 1px; }
.paket { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-top: 1px solid var(--border); }
.gruppe > .paket:first-child { border-top: 0; }
.paket-icon { flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; border: 1px solid var(--border); background: var(--background); color: var(--k, var(--foreground)); }
.paket-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.paket.folgt { color: var(--muted-foreground); font-size: 13.5px; }
.paket.folgt .paket-icon { color: var(--muted-foreground); border-style: dashed; }

/* ---------------------------------------------------------------- Sheet */
.blatt { position: fixed; inset: 0; z-index: 20; }
.blatt-hinter { position: absolute; inset: 0; background: rgb(0 0 0 / 0.5); animation: ein 0.2s ease; }
.blatt-karte {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top) + 12px); max-width: 760px; margin: 0 auto;
  background: var(--background); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: flex; flex-direction: column; animation: hoch 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blatt-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.blatt-titel { font-weight: 600; font-size: 15px; line-height: 1.3; min-width: 0; }
.zurueck { width: 32px; height: 32px; border-radius: var(--radius-md); display: grid; place-items: center; flex: none; color: var(--muted-foreground); border: 1px solid var(--border); }
.zurueck svg { width: 16px; height: 16px; }
.blatt-inhalt { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 16px calc(env(safe-area-inset-bottom) + 34px); flex: 1; }
@keyframes hoch { from { transform: translateY(40px); opacity: 0; } }
@keyframes ein { from { opacity: 0; } }

.info { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); margin-top: 8px; }
.info > div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 16px; font-size: 14px; }
.info > div + div { border-top: 1px solid var(--border); }
.info span:first-child { color: var(--muted-foreground); }
.info span:last-child { text-align: right; font-weight: 500; }
.knopf-reihe { display: flex; gap: 8px; margin-top: 12px; }
/* Button outline (shadcn) */
.knopf-reihe a, .kopieren {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs); font-weight: 500; font-size: 14px; color: var(--foreground); text-decoration: none;
}
.kopieren { width: 100%; margin: 6px 0 4px; }
.fliess { font-size: 14.5px; line-height: 1.6; padding: 14px 16px; }
.fliess p { margin: 0 0 8px; }
.laden { padding: 40px 0; text-align: center; color: var(--muted-foreground); font-size: 14px; }

/* ---------------------------------------------------------------- Markdown (Prose) */
.md { font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.md h1 { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 18px 0 8px; letter-spacing: -0.025em; }
.md h2 { font-size: 18px; font-weight: 600; margin: 30px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); letter-spacing: -0.015em; }
.md h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
.md p { margin: 0 0 12px; }
.md ul, .md ol { padding-left: 22px; margin: 0 0 12px; }
.md li { margin: 5px 0; }
.md code { font-family: "Geist Mono", monospace; font-size: 0.86em; background: var(--muted); padding: 2px 5px; border-radius: var(--radius-sm); }
.md pre { background: var(--muted); padding: 12px; border-radius: var(--radius-lg); overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 13.5px; margin: 0 0 12px; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--muted); font-weight: 600; }
.md blockquote { margin: 12px 0; padding: 2px 14px; border-left: 2px solid var(--border); color: var(--muted-foreground); font-style: italic; }
.md hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
.md .katex-display { overflow-x: auto; overflow-y: hidden; padding: 6px 0; }
.md strong { font-weight: 600; }
/* Alert (shadcn) */
.callout { margin: 14px 0; padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); }
.callout > summary, .callout > .c-titel { font-weight: 600; cursor: pointer; list-style: none; color: var(--c, var(--foreground)); font-size: 14.5px; }
.callout > summary::-webkit-details-marker { display: none; }
.callout > summary::after { content: " ▾"; font-size: 11px; color: var(--muted-foreground); }
.callout[open] > summary::after { content: " ▴"; }
.callout > :last-child { margin-bottom: 0; }
.c-success, .c-tip, .c-check { --c: var(--success); }
.c-warning, .c-important, .c-caution, .c-attention { --c: var(--warning); }
.c-danger, .c-error, .c-bug, .c-failure { --c: var(--destructive); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }

/* ---------------------------------------------------------------- Lernkurse */
.lk-balken { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 15%, transparent); margin-top: 8px; overflow: hidden; }
.lk-balken i { display: block; height: 100%; background: var(--primary); }
.lk-kopf { position: sticky; top: -10px; z-index: 2; background: var(--background); padding: 10px 0 12px; margin: -10px 0 4px; border-bottom: 1px solid var(--border); }
.lk-schritte { display: flex; gap: 4px; }
.lk-schritte button { flex: 1; height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, transparent); padding: 0; }
.lk-schritte button.fertig { background: color-mix(in oklab, var(--primary) 45%, transparent); }
.lk-schritte button.aktiv { background: var(--primary); }
.lk-unter { font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); margin-top: 8px; }
.lk-titel { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; margin: 14px 0 12px; }
.lk-kern h1, .lk-kern h2 { font-size: 16px; margin: 20px 0 6px; border: 0; padding: 0; }
.lk-folie { margin: 18px 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); }
.lk-folie img { display: block; width: 100%; height: auto; background: #fff; border-bottom: 1px solid var(--border); }
.lk-folie figcaption { padding: 10px 14px; font-size: 13px; color: var(--foreground); line-height: 1.5; }
.lk-folie figcaption span { color: var(--muted-foreground); }
/* Button default/outline (shadcn), Größe lg */
.lk-knopf { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 18px; padding: 0 16px; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); font-weight: 500; font-size: 14px; box-shadow: var(--shadow-xs); border: 1px solid var(--primary); }
.lk-knopf.zweit { background: var(--background); color: var(--foreground); border-color: var(--border); }
.lk-unten { display: flex; gap: 8px; margin-top: 8px; }
.lk-unten .lk-knopf { flex: 1; }
.lk-frage { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 16px; margin-top: 14px; }
.lk-typ { display: inline-block; font-size: 11.5px; font-weight: 500; padding: 1px 7px; border-radius: var(--radius-md); border: 1px solid var(--border); color: var(--muted-foreground); }
.lk-text { font-weight: 600; font-size: 15px; line-height: 1.45; margin-top: 10px; }
.lk-optionen { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lk-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--background); box-shadow: var(--shadow-xs); font-size: 14px; line-height: 1.45; }
.lk-option .buchst { flex: none; width: 22px; height: 22px; border-radius: var(--radius-sm); display: grid; place-items: center; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted-foreground); font-family: "Geist Mono", monospace; }
.lk-option.richtig { border-color: var(--success); background: var(--success-weich); }
.lk-option.richtig .buchst { background: var(--success); border-color: var(--success); color: #fff; }
.lk-option.falsch { border-color: var(--destructive); background: var(--destructive-weich); }
.lk-option.falsch .buchst { background: var(--destructive); border-color: var(--destructive); color: #fff; }
.lk-option:disabled { cursor: default; color: var(--foreground); }
.lk-feedback { margin-top: 12px; font-size: 13.5px; line-height: 1.55; padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.lk-feedback.gut { border-color: color-mix(in oklab, var(--success) 45%, transparent); }
.lk-feedback.gut b { color: var(--success); }
.lk-feedback.schlecht { border-color: color-mix(in oklab, var(--destructive) 45%, transparent); }
.lk-feedback.schlecht b { color: var(--destructive); }
/* Textarea (shadcn) */
.lk-antwort { width: 100%; margin-top: 12px; padding: 8px 12px; border-radius: var(--radius-md); border: 1px solid var(--input); background: transparent; color: var(--foreground); font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; min-height: 88px; outline: none; box-shadow: var(--shadow-xs); }
.lk-antwort:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent); }
.lk-antwort::placeholder { color: var(--muted-foreground); }
.lk-frage .lk-knopf.zweit { margin-top: 10px; height: 36px; }
.lk-loesung { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.lk-loesung .md { font-size: 14px; margin-top: 8px; }
.lk-punkt { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 7px 0; font-size: 14px; line-height: 1.45; }
.lk-wertung { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted-foreground); }
.lk-ende { text-align: center; padding: 24px 0 4px; }
.lk-quote { font-size: 56px; font-weight: 600; letter-spacing: -0.05em; }
.vorbereitung { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-sm); }

@media (min-width: 700px) { .kopf h1 { font-size: 32px; } .ort-raum { font-size: 60px; } }