/* Unterrichts-Website – Draft 1. Keine externen Ressourcen; einzige Webschrift lokal: JetBrains Mono Bold (OFL, /fonts). */
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --paper: #fbfaf6;
  --paper-2: #f2f0e8;
  --grid: rgba(60, 80, 120, 0.07);
  --ink: #1d232e;
  --ink-2: #545c6b;
  --line: #d9d5c8;
  --card: #ffffff;
  --accent: #2b4fd8;          /* wird pro Fach überschrieben */
  --accent-soft: #e6ebfc;
  --ok: #1b7f4b;
  --ok-soft: #e1f3e8;
  --bad: #b3261e;
  --bad-soft: #fbe7e5;
  --warn-soft: #fdf3d7;
  --radius: 10px;
  --serif: "Charter", "Iowan Old Style", "Georgia", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --titel: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}
:root[data-theme="hell"] { color-scheme: light; }
:root[data-theme="dunkel"] { color-scheme: dark;
}
body.mathe { --accent: #2b4fd8; --accent-soft: #e6ebfc; }
body.informatik { --accent: #0d7a6a; --accent-soft: #dcf2ee; }
body.lp { --accent: #8a4b14; --accent-soft: #f6eadb; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --paper: #15181e; --paper-2: #1c2028; --grid: rgba(160, 180, 220, 0.05);
    --ink: #e7e9ee; --ink-2: #a3aab8; --line: #333a46; --card: #1d2129;
    --accent: #8ea6ff; --accent-soft: #232c4d; --ok: #5fd193; --ok-soft: #173326; --bad: #ff8a80; --bad-soft: #3a1d1c; --warn-soft: #3a3017;
  }
  :root:not([data-theme="hell"]) body.mathe { --accent: #8ea6ff; --accent-soft: #232c4d; }
  :root:not([data-theme="hell"]) body.informatik { --accent: #4fd1bd; --accent-soft: #163733; }
  :root:not([data-theme="hell"]) body.lp { --accent: #f0a868; --accent-soft: #3a2a1a; }
}
:root[data-theme="dunkel"] {
  --paper: #15181e; --paper-2: #1c2028; --grid: rgba(160, 180, 220, 0.05);
  --ink: #e7e9ee; --ink-2: #a3aab8; --line: #333a46; --card: #1d2129;
  --accent: #8ea6ff; --accent-soft: #232c4d; --ok: #5fd193; --ok-soft: #173326; --bad: #ff8a80; --bad-soft: #3a1d1c; --warn-soft: #3a3017;
}
:root[data-theme="dunkel"] body.mathe { --accent: #8ea6ff; --accent-soft: #232c4d; }
:root[data-theme="dunkel"] body.informatik { --accent: #4fd1bd; --accent-soft: #163733; }
:root[data-theme="dunkel"] body.lp { --accent: #f0a868; --accent-soft: #3a2a1a; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); line-height: 1.5;
  background-color: var(--paper);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .4rem; font-family: var(--titel); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.35rem; margin: 1.8rem 0 .6rem; }
h3 { font-size: 1.1rem; margin: 0 0 .3rem; }
.lead { color: var(--ink-2); font-size: 1.08rem; margin-top: 0; max-width: 60ch; }
code, .mono { font-family: var(--mono); font-size: .95em; }

/* Kopfzeile */
.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top-inner { max-width: 1100px; margin: 0 auto; padding: .6rem 16px; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.brand { font-family: var(--sans); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--logo-ink); text-decoration: none; display: flex; align-items: center; gap: .5rem; }
.brand-name { font-family: var(--titel); font-weight: 700; letter-spacing: -.03em; }
.brand-marke { width: 30px; height: 30px; flex: none; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.brand-marke .k { stroke: var(--logo-akzent); }
.brand-marke .z { stroke: var(--logo-ink); }
.badge-draft { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; color: var(--ink-2); }
.nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--ink-2); padding: .3rem .6rem; border-radius: 6px; font-size: .95rem; }
.nav a:hover, .nav a.aktiv { color: var(--ink); background: var(--paper-2); }
.who { margin-left: auto; display: flex; gap: .6rem; align-items: center; font-size: .9rem; color: var(--ink-2); }
.who .user { font-family: var(--mono); color: var(--ink); }

main { max-width: 1100px; width: 100%; margin: 0 auto; padding: 2rem 16px 3rem; flex: 1; }
main.schmal { max-width: 720px; }
footer { border-top: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; background: var(--card); }
footer .inner { max-width: 1100px; margin: 0 auto; padding: 1rem 16px; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* Karten & Raster */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
a.tile { display: block; text-decoration: none; color: inherit; border-top: 4px solid var(--accent); transition: transform .12s ease, box-shadow .12s ease; }
a.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
a.tile p { color: var(--ink-2); margin: .3rem 0 0; font-size: .95rem; }
.tile .kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
.fach-mathe { --accent: #2b4fd8; } .fach-informatik { --accent: #0d7a6a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .fach-mathe { --accent: #8ea6ff; }
  :root:not([data-theme="hell"]) .fach-informatik { --accent: #4fd1bd; }
}
:root[data-theme="dunkel"] .fach-mathe { --accent: #8ea6ff; }
:root[data-theme="dunkel"] .fach-informatik { --accent: #4fd1bd; }

/* Formulare */
label { display: block; font-weight: 600; font-size: .92rem; margin: .9rem 0 .3rem; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  font: inherit; width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink);
}
textarea { min-height: 8rem; font-family: var(--mono); font-size: .9rem; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn { font: inherit; font-weight: 600; border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: .5rem 1rem; border-radius: 8px; cursor: pointer; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .btn:not(.sec) { color: #111; }
}
:root[data-theme="dunkel"] .btn:not(.sec) { color: #111; }
.btn.sec { background: transparent; color: var(--accent); }
.btn.klein { padding: .2rem .6rem; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.row > * { flex: 0 0 auto; }
.hint { color: var(--ink-2); font-size: .88rem; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs button { font: inherit; background: none; border: none; padding: .5rem .8rem; cursor: pointer; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.aktiv { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }

/* Meldungen */
.msg { border-radius: 8px; padding: .6rem .8rem; margin: .8rem 0; font-size: .95rem; }
.msg.ok { background: var(--ok-soft); color: var(--ok); }
.msg.bad { background: var(--bad-soft); color: var(--bad); }
.msg.info { background: var(--accent-soft); }
.msg.warn { background: var(--warn-soft); }
.hidden { display: none !important; }
.codebox { font-family: var(--mono); font-size: 1.6rem; letter-spacing: .12em; padding: .4rem .8rem; background: var(--paper-2); border-radius: 8px; display: inline-block; }

/* Tabellen */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); background: var(--paper-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
td.name { font-weight: 600; }
td.pseudo { font-family: var(--mono); color: var(--ink-2); font-size: .85rem; }
.pill { display: inline-block; font-size: .78rem; padding: 1px 8px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); }
.score { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.bar { width: 60px; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; display: inline-block; }
.bar > i { display: block; height: 100%; background: var(--accent); }

/* Übungen */
/* Zurück-Link als Pill-Knopf (Pfeil per CSS, letzter Teil fett) */
.zurueck { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--ink-2); font-size: .85rem; line-height: 1.3;
  border: 1px solid var(--line); border-radius: 99px; padding: .25rem .8rem .25rem .6rem; background: var(--paper-2); margin-bottom: .6rem; max-width: 100%;
  transition: border-color .15s, color .15s; }
.zurueck::before { content: "←"; color: var(--accent); font-weight: 700; transition: transform .15s; }
.zurueck b { color: var(--ink); font-weight: 600; }
.zurueck:hover, .zurueck:focus-visible { border-color: var(--accent); color: var(--ink); }
.zurueck:hover::before { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) { .zurueck::before { transition: none; } }
.uebung-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.fortschritt { display: flex; gap: 4px; margin: 1rem 0 1.4rem; }
.fortschritt span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.fortschritt span.ok { background: var(--ok); }
.fortschritt span.bad { background: var(--bad); }
.fortschritt span.jetzt { background: var(--accent); }
.aufgabe { font-family: var(--serif); font-size: clamp(1.8rem, 6vw, 2.6rem); text-align: center; margin: 1.2rem 0; }
.aufgabe sub { font-size: .55em; }
.antwort { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.antwort input { max-width: 200px; text-align: center; font-size: 1.3rem; font-family: var(--mono); }
.erklaerung { text-align: center; }
.erklaerung .katex { font-size: 1.35em; }
.erklaerung .term { font-size: 1.3em; white-space: nowrap; }
.erklaerung .frac > span:first-child { border-bottom-width: 1.5px; }
.resultat { text-align: center; padding: 1rem 0; }
.resultat .gross { font-family: var(--serif); font-size: 3rem; margin: .2rem 0; }

/* Binär-Bits */
.bits { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.bit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bit button { width: 52px; height: 60px; font: 600 1.6rem var(--mono); border-radius: 8px; border: 2px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.bit button.an { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .bit button.an { color: #111; }
}
:root[data-theme="dunkel"] .bit button.an { color: #111; }
.bit small { font-family: var(--mono); color: var(--ink-2); font-size: .78rem; }
@media (max-width: 480px) { .bit button { width: 36px; height: 48px; font-size: 1.2rem; } .bits { gap: 3px; } }

/* Login-Kärtchen zum Drucken */
.kaertchen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.kaertchen .k { border: 1px dashed var(--ink-2); padding: .7rem; border-radius: 6px; font-size: .9rem; background: var(--card); }
.kaertchen .k b { font-family: var(--mono); font-size: 1rem; }
@media print {
  body { background: #fff; color: #000; }
  .top, footer, .no-print { display: none !important; }
  .kaertchen { grid-template-columns: repeat(3, 1fr); }
  .kaertchen .k { break-inside: avoid; }
}
.mt { margin-top: 1rem; }
label.btn { display: inline-block; margin: 0; font-size: 1rem; }
.mt-0 { margin-top: 0; }
.row input[type=text], .row input[type=password], .row input[type=number], .row select { width: auto; min-width: 0; }
.row input[type=password] { flex: 1 1 220px; max-width: 340px; }
#n-zug { width: 4rem; text-align: center; } #n-sj, #sw-jahr { width: 7rem; }
#filter-klasse { min-width: 10rem; }
/* Kontrolle Benutzernamen */
.pruef { text-align: center; padding: 1rem 0 .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); margin: .8rem 0; }
.pruef-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.pruef-user { font-size: clamp(1.4rem, 5vw, 2.1rem); margin: .4rem 0 .9rem; color: var(--accent); word-break: break-all; }
.pruef-knoepfe { justify-content: center; }
kbd { font-family: var(--mono); font-size: .75em; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; opacity: .7; margin-left: .3rem; }
tr.jetzt td { background: var(--accent-soft); }
tr.ok td.status { color: var(--ok); }
/* Ablageflächen (Drag & Drop) */
.drop { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; padding: 1.3rem 1rem;
  border: 2px dashed var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; transition: border-color .12s, background .12s; }
.drop:hover, .drop:focus-visible { border-color: var(--accent); outline: none; }
.drop.aktiv { border-color: var(--accent); background: var(--accent-soft); border-style: solid; }
.drop .drop-icon { font-size: 1.6rem; line-height: 1; color: var(--accent); }
.drop .drop-titel { font-weight: 600; }
.drop .drop-sub { color: var(--ink-2); font-size: .88rem; }
.drop .drop-lokal { color: var(--ok); font-size: .8rem; }
.drop * { pointer-events: none; }
/* Dashboard: Ansichten, Filter, Sortierung */
.tabs.ansichten { margin-top: 1.6rem; }
.tabs.ansichten button { font-size: 1.05rem; padding: .6rem 1.1rem; }
.filterleiste { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .2rem 0 1rem; }
.filterleiste input[type=search] { flex: 1 1 260px; width: auto; }
.filterleiste select { width: auto; }
.sortknopf { font: inherit; text-transform: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sortknopf:hover { color: var(--ink); }
th[aria-sort=ascending], th[aria-sort=descending] { color: var(--accent); }
tr.schnitt td { background: var(--paper-2); font-weight: 600; font-size: .88rem; }
td.aktionen { text-align: right; }
.eingabe-klein { padding: .25rem .5rem !important; min-width: 9rem; }
.drop.drop-klein { flex-direction: column; padding: .8rem 1rem; }
.drop.drop-klein .drop-icon { font-size: 1.1rem; }
a.btn { text-decoration: none; display: inline-block; }
#n-klasse { width: 6rem; text-align: center; font-family: var(--mono); }
/* Freigaben (LP) */
.fg-baum { display: flex; flex-direction: column; }
.fg-zeile { display: flex; align-items: center; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fg-zeile:last-child { border-bottom: none; }
.fg-zeile.ebene-1 { padding-left: 1.4rem; } .fg-zeile.ebene-2 { padding-left: 2.8rem; } .fg-zeile.ebene-3 { padding-left: 4.4rem; font-size: .92rem; }
.fg-titel { flex: 1 1 240px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fg-schalter { display: flex; align-items: center; gap: .7rem; }
.fg-gruppe { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.fg-knopf { font: inherit; font-size: .8rem; border: none; background: var(--card); color: var(--ink-2); padding: .2rem .55rem; cursor: pointer; border-right: 1px solid var(--line); }
.fg-knopf:last-child { border-right: none; }
.fg-knopf.aktiv[data-wert="null"] { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.fg-knopf.aktiv[data-wert="true"] { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.fg-knopf.aktiv[data-wert="false"] { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.fg-effekt { font-size: .8rem; min-width: 10rem; }
.fg-effekt.ok { color: var(--ok); } .fg-effekt.aus { color: var(--ink-2); }

/* Hell/Dunkel-Schalter in der Kopfzeile */
.thema-knopf { font: inherit; background: none; border: 1px solid var(--line); color: var(--ink-2); border-radius: 8px; padding: .15rem .5rem; cursor: pointer; line-height: 1.4; }
.thema-knopf:hover { color: var(--ink); border-color: var(--ink-2); }
.pill.zusatz { background: rgba(225,155,148,.25); }

/* ---------- Kacheln mit Linien-Logo und Fortschrittsring ---------- */
.kachel-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 1rem; }
.kachel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: 1.1rem .9rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit;
  transition: border-color .12s, transform .12s; }
a.kachel:hover { border-color: var(--accent); transform: translateY(-2px); }
.kachel.aktiv { border-color: var(--accent); }
.kachel.erledigt { border-color: var(--ok); }
.kachel.folgt, .kachel.gesperrt { opacity: .45; }
.kachel-nr { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin-top: .35rem; }
.kachel-titel { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; margin-top: .2rem; }
.kachel-unter { font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.kachel-zeile { font-size: .82rem; color: var(--ink-2); margin-top: .25rem; }
.kachel.erledigt .kachel-zeile { color: var(--ok); font-weight: 600; }
.kachel.aktiv .kachel-zeile { color: var(--accent); }
.logo-ring { width: 78px; height: 78px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.logo-ring .ring-spur { stroke: var(--line); stroke-width: 1.5; }
.logo-ring .ring-wert { stroke: var(--accent); stroke-width: 1.8; }
.logo-ring.erledigt .ring-wert { stroke: var(--ok); }
.logo-ring g { stroke: var(--ink); stroke-width: 1.6; }
.logo-ring.erledigt g { stroke: var(--ok); }
.logo-ring.gesperrt g, .logo-ring.folgt g { stroke: var(--ink-2); }
svg.logo { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.kurs-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kurs-werkzeug { text-decoration: none; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .8rem; color: var(--ink); background: var(--card); }
.kurs-werkzeug:hover { border-color: var(--accent); }

/* gesperrte / kommende Kacheln: sichtbar, aber unscharf */
button.kachel { font: inherit; cursor: pointer; width: 100%; }
.kachel.gesperrt, .kachel.folgt { opacity: 1; }
.kachel.gesperrt > *, .kachel.folgt > * { filter: blur(2.2px); opacity: .55; transition: filter .15s, opacity .15s; }
.kachel.gesperrt:hover > *, .kachel.folgt:hover > * { filter: blur(1px); opacity: .75; }
.kachel.gesperrt { position: relative; }
.kachel.gesperrt::after { content: "🔒"; position: absolute; top: .55rem; right: .7rem; font-size: .85rem; opacity: .8; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 50; max-width: min(92vw, 520px);
  background: var(--ink); color: var(--paper); padding: .7rem 1rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: .95rem; }
.kachel-raster.kompakt { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.kachel-raster.kompakt .kachel { padding: .7rem .5rem; }
.kachel-raster.kompakt .logo-ring { width: 54px; height: 54px; }
.kachel-raster.kompakt .kachel-titel { font-size: .95rem; }

/* Namensliste eingeklappt: nur die Kopfzeile */
#lookup.eingeklappt > :not(.row:first-child) { display: none; }
#lookup.eingeklappt { padding-top: .7rem; padding-bottom: .7rem; }
#lookup.eingeklappt h3 { margin: 0; }

/* Menü-Knopf (nur Handy) */
.menu-knopf { display: none; font: inherit; font-size: 1.2rem; line-height: 1; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
@media (max-width: 760px) {
  .top-inner { flex-wrap: wrap; gap: .4rem; padding-top: .45rem; padding-bottom: .45rem; }
  .menu-knopf { display: inline-block; margin-left: auto; }
  .top .nav, .top .who { display: none; }
  .top.offen .nav { display: flex; flex-direction: column; width: 100%; gap: 0; border-top: 1px solid var(--line); padding-top: .3rem; }
  .top.offen .nav a { padding: .55rem .4rem; font-size: 1rem; }
  .top.offen .who { display: flex; width: 100%; margin-left: 0; flex-wrap: wrap; padding: .3rem 0 .4rem; }
}

/* Kacheln auf dem Handy: zwei pro Zeile, kompakter */
@media (max-width: 600px) {
  .kachel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kachel { padding: .8rem .5rem .75rem; }
  .logo-ring { width: 58px; height: 58px; }
  .kachel-unter { display: none; }
  .kachel-titel { font-size: .98rem; }
  .kachel-zeile { font-size: .76rem; }
}

/* LP-Verwaltung: Menü ⋯, Sammelaktionen, Rückfrage-Knopf */
details.menue { display: inline-block; position: relative; }
details.menue > summary { list-style: none; cursor: pointer; display: inline-block; }
details.menue > summary::-webkit-details-marker { display: none; }
.menue-liste { position: fixed; z-index: 20; background: var(--card); border: 1px solid var(--line, #ccc); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: .3rem; min-width: 14rem; text-align: left; }
.menue-liste button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .45rem .6rem; border-radius: 6px; font: inherit; color: inherit; cursor: pointer; }
.menue-liste button:hover, .menue-liste button:focus-visible { background: var(--accent-soft, rgba(0,0,0,.06)); }
.btn.gefahr { background: #b3261e; border-color: #b3261e; color: #fff; }
.row.sammel { gap: .5rem; align-items: center; padding: .5rem .7rem; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--card); }
label.check { display: flex; gap: .4rem; align-items: center; font-weight: normal; margin-top: .6rem; }

/* Trainer: Modus-Wahl und Mehrfachauswahl */
.modus-wahl { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-top: .6rem; background: var(--card); }
.modus-wahl button { border: 0; background: none; font: inherit; font-size: .92rem; padding: .35rem .9rem; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.modus-wahl button.aktiv { background: var(--accent); color: #fff; }
.wahl { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: .8rem 0; }
.wahl.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl-knopf { font: inherit; font-size: 1.05rem; padding: .7rem .8rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 3rem; }
.wahl-knopf:hover:not(:disabled) { border-color: var(--accent); }
.wahl-knopf.gewaehlt { border-color: var(--accent); background: var(--accent-soft); }
.wahl-knopf.richtig { border-color: var(--ok); background: var(--ok-soft); }
.wahl-knopf.falsch { border-color: var(--bad); background: var(--bad-soft); }
.wahl-knopf:disabled { cursor: default; }
.wahl-knopf svg { width: 100%; height: auto; max-width: 220px; }
.term { font-family: var(--serif); }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .15em; }
.frac > span:first-child { border-bottom: 2px solid currentColor; padding: 0 .2em; }
.frac > span:last-child { padding: 0 .2em; }
.zeichnung { display: flex; justify-content: center; margin: .5rem 0; }
.zeichnung svg { max-width: 100%; height: auto; }
.svg-achse { stroke: var(--ink-2); stroke-width: 1; }
.svg-gitter { stroke: var(--line); stroke-width: .6; }
.svg-kurve { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.svg-text { fill: var(--ink-2); font-size: 11px; font-family: var(--sans, sans-serif); }

/* Bereich mit Seitenleiste (Mathe: Klassen) */
.bereich { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1rem; }
.bereich-leiste { position: sticky; top: calc(var(--kopf-h, 64px) + 1rem); display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 1rem; }
.bereich-leiste a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 500; }
.bereich-leiste a:hover { background: var(--accent-soft); }
.bereich-leiste a.aktiv { background: var(--accent); color: #fff; }
.bereich-leiste a.leer { color: var(--ink-2); font-weight: 400; }
.bereich-zahl { font-size: .78rem; min-width: 1.6rem; text-align: center; padding: .05rem .4rem; border-radius: 999px; background: var(--line); color: var(--ink-2); }
.bereich-leiste a.aktiv .bereich-zahl { background: rgba(255,255,255,.25); color: #fff; }
.bereich-kopf { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .4rem; }
.thema { margin-bottom: 1.6rem; }
.thema-titel { margin: 1.2rem 0 .3rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.unterthema-titel { font-size: .85rem; color: var(--ink-2); margin: .7rem 0 .45rem; }
@media (max-width: 760px) {
  .bereich { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .bereich-leiste { position: static; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 .5rem; }
  .bereich-leiste a { flex: none; padding: .45rem .7rem; }
}

/* Venn, Bruchterme, Einheitskreis, Kombinatorik */
.venn-g { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.2; }
.venn-fuellung { fill: var(--accent); fill-opacity: .45; }
.venn-kreis { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.venn-name { fill: var(--ink); font-family: var(--serif); font-size: 18px; font-style: italic; text-anchor: middle; }
.venn-name.klein { font-size: 13px; fill: var(--ink-2); }
.venn-klick svg { cursor: pointer; }
.bruch-eingabe { display: inline-flex; flex-direction: column; align-items: stretch; gap: .35rem; margin: .4rem auto; min-width: 12rem; }
.bruch-eingabe input { text-align: center; font-size: 1.2rem; font-family: var(--mono); }
.bruch-strich { height: 2px; background: var(--ink); }
.bruch-fest { text-align: center; font-size: 1.3rem; }
#bereich { text-align: center; }
#bereich .hint { text-align: left; }
.erweitern-zeile { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.erweitern-zeile .aufgabe { margin: 0; }
.wahl.wf .wahl-knopf { font-size: 1.15rem; }
.wahl.graphen .wahl-knopf { padding: .3rem; }
.kombi-text { font-size: 1.12rem; text-align: left; line-height: 1.5; }
.wahl.kombi-rechnung .wahl-knopf { font-size: 1.25rem; min-height: 4.2rem; }
/* Inhalt eines Antwortknopfs fängt keine Klicks ab: KaTeX-Brüche ragen sonst unsichtbar in den Knopf darüber (Handy) */
.wahl-knopf * { pointer-events: none; }
.wahl.modelle .wahl-knopf { justify-content: flex-start; text-align: left; font-size: .98rem; }
.ek { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1rem; align-items: center; }
#bereich .ek { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.ek-svg { width: 100%; max-width: 320px; touch-action: none; }
.ek-svg:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.ek-kreis { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.ek-radius { stroke: var(--ink); stroke-width: 1.4; }
/* Farben farbenblind-tauglich (Okabe-Ito): cos blau, sin orange, Bogen violett-rosa, tan blaugrün; kein Rot/Grün-Paar */
.ek { --ek-cos: #0072b2; --ek-sin: #c27c00; --ek-bogen: #a64d86; --ek-tan: #00866a; }
:root[data-theme="dunkel"] .ek { --ek-cos: #56b4e9; --ek-sin: #e69f00; --ek-bogen: #cc79a7; --ek-tan: #2ec4a0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) .ek { --ek-cos: #56b4e9; --ek-sin: #e69f00; --ek-bogen: #cc79a7; --ek-tan: #2ec4a0; } }
.ek-cos { stroke: var(--ek-cos); stroke-width: 4; stroke-linecap: round; }
.ek-sin { stroke: var(--ek-sin); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 4; }
.ek-tan { stroke: var(--ek-tan); stroke-width: 3; }
.ek-bogenlaenge { fill: none; stroke: var(--ek-bogen); stroke-width: 6; stroke-linecap: round; opacity: .9; }
.ek-bogen { fill: none; stroke: var(--accent); stroke-width: 2; }
.ek-punkt { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.ek-punkt.ziehbar { cursor: grab; }
.ek-werte { display: grid; gap: .4rem; font-size: 1.05rem; }
.ek-wert b { font-family: var(--mono); }
.ek-wert.cos b { color: var(--ek-cos); } .ek-wert.sin b { color: var(--ek-sin); } .ek-wert.tan b { color: var(--ek-tan); } .ek-wert.bogen b { color: var(--ek-bogen); }
.ek-wert .katex { font-size: 1.15em; }
.ek-optionen { gap: 1.2rem; margin-bottom: .4rem; }
@media (max-width: 640px) { .ek { grid-template-columns: minmax(0, 1fr); } }

/* Gesetz der grossen Zahlen */
.gz { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1rem; align-items: stretch; }   /* linke Spalte bündig mit der untersten Box rechts */
.gz-steuerung { margin: 0; display: flex; flex-direction: column; }
.gz-steuerung select { width: 100%; }
.gz-knoepfe { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.gz-rechts { display: grid; gap: 1rem; }
.gz-rechts .card { margin: 0; }
.gz-rechts canvas { width: 100%; display: block; margin-top: .4rem; }
.gz-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.gz-zahl .gross { font-size: 1.5rem; }
/* Letzte Ergebnisse: grosse Kacheln in 6 Spalten, nutzen den Platz bis zum unteren Rand */
.gz-letzte { margin-top: .8rem; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; align-content: start; }
.gz-letzte > .hint { grid-column: 1 / -1; }
.gz-erg { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--line); font-size: 1.1rem; font-weight: 600; }
.gz-erg.treffer { background: var(--accent); color: #fff; }
.gz-erg.rad-0 { color: #d33; } .gz-erg.rad-1 { color: #2b6cd8; } .gz-erg.rad-2 { color: #2b8a3e; }
.gz-erg.rad-0.treffer { color: #fff; }
@media (max-width: 860px) { .gz { grid-template-columns: minmax(0, 1fr); } .gz-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wahl-knopf > span { display: block; }

/* LP: Filter als Knopfzeilen, «Im Blick»-Panel */
.fokus-label { margin: 0; font-weight: 600; font-size: .9rem; }
#fokus { width: auto; max-width: 22rem; }
.knopfzeilen { display: grid; gap: .35rem; margin: -.4rem 0 1rem; }
.knopfzeile { display: flex; align-items: center; gap: .6rem; }
.knopfzeile-titel { width: 3.6rem; flex: none; font-size: .8rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; }
.knoepfe button { font: inherit; font-size: .88rem; padding: .28rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; }
.knoepfe button:hover { border-color: var(--accent); }
.knoepfe button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.knoepfe button .zahl { opacity: .7; margin-left: .25rem; font-size: .8em; }
.fokus-panel { margin: 0 0 1rem; }
.fokus-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.fokus-kopf h2 { margin: 0; font-size: 1.15rem; }
.fokus-kopf .row { margin-left: auto; }
.fokus-zahlen { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: .5rem 0 .7rem; font-size: .92rem; }
.fokus-zahlen b { font-size: 1.15rem; }
.fokus-sus { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .35rem; }
.fokus-karte { display: flex; align-items: center; gap: .45rem; padding: .35rem .55rem; border-radius: 8px; border: 1px solid var(--line); font-size: .88rem; min-width: 0; }
.fokus-karte .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fokus-karte .w { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .82rem; }
.fokus-karte.fertig { background: var(--ok-soft); border-color: var(--ok); }
.fokus-karte.arbeit { background: var(--warn-soft, #fff4d6); border-color: #e0b84a; }
.fokus-karte.gesperrt { opacity: .55; }
.fokus-aktiv { width: .55rem; height: .55rem; border-radius: 50%; background: #2f9e44; flex: none; box-shadow: 0 0 0 3px rgba(47,158,68,.25); }
.fokus-aktiv.aus { background: transparent; box-shadow: none; }

/* Python-Editor als Seitenleiste (Challenges, Trainer) */
:root { --py-panel-b: clamp(340px, 42vw, 720px); }
.py-panel-knopf { position: fixed; right: 18px; bottom: 18px; z-index: 40; font: inherit; font-weight: 600; font-size: .92rem; padding: .6rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.15); cursor: pointer; display: inline-flex; gap: .45rem; align-items: center; }
.py-panel-knopf span { font-family: var(--mono); color: var(--accent); }
.py-panel-knopf:hover { border-color: var(--accent); }
.py-panel-knopf.aktiv:not(.im-kopf) { right: calc(var(--py-panel-b) + 18px); }
.py-panel-knopf.im-kopf { position: static; box-shadow: none; padding: .35rem .8rem; font-size: .85rem; }
.py-panel-knopf.im-kopf.aktiv { background: var(--accent); border-color: var(--accent); color: #fff; }
.py-panel-knopf.im-kopf.aktiv span { color: #fff; }
.kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; margin-left: auto; }
.py-panel { position: fixed; top: var(--kopf-h, 56px); right: 0; bottom: 0; width: var(--py-panel-b); z-index: 30; background: var(--card); border-left: 1px solid var(--line); box-shadow: -6px 0 24px rgba(0,0,0,.08); display: none; flex-direction: column; }
.py-panel.offen { display: flex; }
body.mit-py-panel { padding-right: var(--py-panel-b); }
.py-panel-kopf { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); }
.py-panel-kopf .hint { margin-right: auto; }
.py-panel-editor { flex: 1.3; min-height: 0; display: flex; flex-direction: column; background: var(--code-bg, #f6f7f9); }
.py-panel-editor .py-platz { flex: 1; min-height: 0; gap: 0; }
.py-panel-editor .py-editor { flex: 1; min-height: 0; border: 0; border-radius: 0; overflow: auto; }
.py-panel-editor .py-leiste { order: -1; padding: .4rem .8rem; border-bottom: 1px solid var(--line); background: var(--card); }
.py-panel-ausgabe { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding: .5rem .8rem; gap: .4rem; overflow: auto; background: var(--paper-2); }
.py-panel-titel { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); font-weight: 600; }
.py-panel-ziel .py-konsole { max-height: none; }
.py-panel-ziel .py-buehne { max-width: 100%; }
@media (max-width: 900px) {
  :root { --py-panel-b: 100vw; }
  body.mit-py-panel { padding-right: 0; overflow: hidden; }
  .py-panel-knopf.aktiv:not(.im-kopf) { right: 18px; bottom: auto; top: calc(var(--kopf-h, 56px) + 8px); display: none; }
}
@media print { .py-panel, .py-panel-knopf { display: none !important; } }
.btn.wartet, button.wartet { opacity: .55; cursor: progress; transition: opacity .2s; }
:root .btn.gefahr, :root .btn.gefahr:not(.sec) { background: #b3261e; border-color: #b3261e; color: #fff; }
:root .btn.gefahr:hover:not(:disabled) { background: #8f1d17; border-color: #8f1d17; }

/* Logo «Zahlenlabor» {ℤ}: feste Markenfarben, unabhängig vom Fach-Akzent */
:root { --logo-ink: #14213D; --logo-akzent: #0F8B8D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="hell"]) { --logo-ink: #F1F3F7; --logo-akzent: #2BB5B7; } }
:root[data-theme="dunkel"] { --logo-ink: #F1F3F7; --logo-akzent: #2BB5B7; }

/* Hinweisband unter der Kopfzeile (Übungsseiten): ohne Login / Status für die LP */
.status-band { background: var(--accent-soft, #e8f0f6); border-top: 1px solid var(--line); font-size: .88rem; }
.status-band.entwurf { background: var(--warn-soft, #fff3d6); }
.status-band-innen { max-width: 1100px; margin: 0 auto; padding: .35rem 1rem; }

/* Bogenmass: Merke-Kreise (Grad / Bogenmass) und π-Knopf */
.mk-kreise { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: .6rem 0; }
.mk-figur { margin: 0; text-align: center; width: 300px; max-width: 100%; }
.mk-kreis { position: relative; }
.mk-kreis svg { width: 100%; height: auto; display: block; }
.mk-punkt { fill: var(--accent); }
.mk-label { position: absolute; transform: translate(-50%, -50%); font-size: .9rem; white-space: nowrap; color: var(--ink); }
.pi-knopf { font-family: var(--serif); font-size: 1.3rem; min-width: 3rem; }

/* Theorie-Schublade (public/js/theorie.js): Knopf «? Theorie», Schublade rechts */
.karte-kopf { display: flex; justify-content: flex-end; margin: -.4rem -.4rem 0 0; }
.uebung-kopf > .theorie-knopf { align-self: center; }
.theorie-knopf { font: inherit; font-size: .85rem; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); border-radius: 99px; padding: .15rem .75rem; cursor: pointer; }
.theorie-knopf:hover, .theorie-knopf:focus-visible { border-color: var(--accent); color: var(--accent); }
.theorie-knopf.offen { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.schublade { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -10px 0 30px rgba(0,0,0,.25); z-index: 30; overflow-y: auto; animation: schublade-rein .18s ease-out; }
@keyframes schublade-rein { from { transform: translateX(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .schublade { animation: none; } }
.schublade[hidden], .schublade-hintergrund[hidden] { display: none; }
.schublade-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.schublade-kopf h2 { margin: 0; font-size: 1.1rem; outline: none; }
.schublade-kopf .btn { white-space: nowrap; }
.theorie-inhalt { padding: .4rem 1.1rem 1.4rem; }
.theorie-inhalt h3 { font-size: 1rem; margin: 1.1rem 0 .3rem; }
.theorie-inhalt .formel { font-family: var(--serif); font-size: 1.25rem; text-align: center; margin: .8rem 0; padding: .55rem .6rem; background: var(--accent-soft); border-radius: 8px; line-height: 1.6; }
.theorie-inhalt .bsp { font-family: var(--serif); font-size: 1.05rem; }
.theorie-inhalt ul { margin: .4rem 0; padding-left: 1.2rem; }
.theorie-inhalt table { border-collapse: collapse; margin: .4rem 0; font-family: var(--serif); }
.theorie-inhalt td, .theorie-inhalt th { padding: .15rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
.theorie-inhalt tr.treffer td { color: var(--ok); font-weight: 600; }
.schublade-hintergrund { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 29; }
@media (min-width: 1000px) {
  body.mit-schublade { padding-right: 400px; }      /* Übung bleibt daneben sichtbar */
  .schublade-hintergrund { display: none; }
}
/* Lücken in Termen (Faktorisieren-Trainer) */
input[type=text].luecke { width: 3.4rem; text-align: center; font: inherit; font-size: .75em; line-height: 1.2; padding: .1rem .2rem; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); vertical-align: middle; }
input[type=text].luecke:focus { border-color: var(--accent); outline: none; }
input[type=text].luecke.schmal { width: 3rem; }
input[type=text].luecke::placeholder { color: var(--ink-2); opacity: .5; }
.aufgabe .gl { color: var(--ink-2); margin: 0 .25em; }
.aufgabe .nw { white-space: nowrap; display: inline-block; }
@media (max-width: 500px) { .aufgabe:has(.luecke) { font-size: 1.45rem; } input[type=text].luecke, input[type=text].luecke.schmal { width: 2.5rem; } }
.faktor-eingabe { display: flex; align-items: center; justify-content: center; gap: .3rem; flex-wrap: wrap; font-family: var(--serif); font-size: 1.6rem; }
.faktor-eingabe input { width: auto; max-width: 9rem; font-size: 1.1rem; font-family: var(--mono); text-align: center; }
.faktor-eingabe input.lang { max-width: 15rem; }
.theorie-inhalt > :first-child { margin-top: .8rem; }
.theorie-inhalt .aufgabe { font-size: 1.15rem !important; margin: .6rem 0; }