/* Lernpfad Mathematik 9
   Mobile first, keine externen Schriften oder Bibliotheken. */

:root {
  --bg: #f6f7f9;
  --card: #ffffff;
  --ink: #1b2430;
  --dim: #667085;
  --line: #dfe3e8;
  /* Rand von Bedienelementen (Felder, Knoepfe, Chips). --line ist nur fuer
     Trennlinien gedacht: mit 1,3:1 waeren Eingabefelder auf Beamer und
     einfachen Displays kaum zu finden. #858f9f erreicht die fuer
     Bedienelemente noetigen 3:1 auf Weiss und auf --bg (WCAG 1.4.11). */
  --rand-bedien: #858f9f;
  --accent: #2563eb;
  --ok: #15803d;
  --ok-bg: #eefaf1;
  --no: #b42318;
  --no-bg: #fdf1f0;
  --tip: #8a5a00;
  --tip-bg: #fff8e8;
  /* Weisse Schrift braucht 4,5:1 - das hellere #16a34a schaffte nur 3,3:1. */
  --l1: #15803d;
  --l2: #2563eb;
  --l3: #9333ea;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen: eigene Klassen wie .btn setzen
   display und wuerden das hidden-Attribut sonst aushebeln. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

main {
  max-width: 940px;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.25; }

/* ------------------------------------------------------------------ Kopf */

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; text-decoration: none; color: var(--ink);
}
.brand-mark { color: var(--accent); font-size: 1.3rem; }
.brand-logo { height: 26px; width: auto; display: block; }
.who { display: flex; align-items: center; gap: .8rem; font-size: .9rem; }
.pseudo {
  background: #eef2ff; color: #3730a3;
  padding: .15rem .55rem; border-radius: 999px; font-weight: 600;
}
.logout { color: var(--dim); }
.foot {
  text-align: center; color: var(--dim);
  font-size: .8rem; padding: 1rem; border-top: 1px solid var(--line);
}

.page-title { margin: .6rem 0 .2rem; font-size: 1.6rem; }
.lead { color: var(--dim); margin: .2rem 0 1.2rem; }
.crumbs { font-size: .85rem; color: var(--dim); margin: .8rem 0 0; }
.dim { color: var(--dim); }
.error { color: var(--no); font-weight: 600; }
.loading { color: var(--dim); }

/* ---------------------------------------------------------------- Karten */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}

.modules { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .modules { grid-template-columns: 1fr 1fr; } }

.module-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
.module-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,30,50,.09); }
.mc-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.mc-head h2 { margin: 0; font-size: 1.15rem; }
.hours { font-size: .78rem; color: var(--dim); white-space: nowrap; }
.mc-sub { color: var(--dim); margin: .3rem 0 .8rem; font-size: .92rem; }
.mc-progress { font-size: .82rem; color: var(--dim); margin: .4rem 0 0; }

.bar { display: block; height: 8px; background: #eceff3; border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.hint-box {
  background: #fff; border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.4rem;
}
.hint-box h3 { margin-top: 0; }
.hint-box ul { list-style: none; padding: 0; margin: .5rem 0; }
.hint-box li { margin: .35rem 0; }

/* ------------------------------------------------------------- Stationen */

.stations { list-style: none; padding: 0; margin: 1rem 0 0; }
.station-row { margin-bottom: .6rem; }
.station-row > a {
  display: flex; align-items: flex-start; gap: .8rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem .9rem;
  text-decoration: none; color: inherit;
}
.station-row > a:hover { border-color: var(--accent); }
.station-row.is-done > a { background: var(--ok-bg); border-color: #bfe6cb; }
.dot {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .9rem;
  background: #eef2f7; color: var(--dim);
}
.is-done .dot { background: var(--ok); color: #fff; }
.sr-body { flex: 1 1 auto; display: block; }
.sr-body strong { display: block; }
.kind {
  display: inline-block; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dim); margin: .1rem 0;
}
.sr-lead { display: block; font-size: .85rem; color: var(--dim); }
.levels { display: flex; gap: .25rem; flex: 0 0 auto; }

.lvl {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: .78rem; font-weight: 700; color: #fff; opacity: .35;
}
.lvl.reached { opacity: 1; }
.lvl-1 { background: var(--l1); }
.lvl-2 { background: var(--l2); }
.lvl-3 { background: var(--l3); }
.hint-box .lvl { opacity: 1; margin-right: .4rem; }

/* --------------------------------------------------------------- Station */

.levelbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 1rem 0 .8rem;
}
.lb-label { font-size: .85rem; color: var(--dim); margin-right: .2rem; }
.lvlbtn {
  border: 1px solid var(--rand-bedien); background: #fff; color: var(--dim);
  border-radius: 999px; padding: .3rem .75rem; font-size: .85rem;
  cursor: pointer; font-weight: 600;
}
.lvlbtn.active.lvl-1 { background: var(--l1); border-color: var(--l1); color: #fff; }
.lvlbtn.active.lvl-2 { background: var(--l2); border-color: var(--l2); color: #fff; }
.lvlbtn.active.lvl-3 { background: var(--l3); border-color: var(--l3); color: #fff; }
.streak { margin-left: auto; font-size: .82rem; color: var(--dim); }
.dots { letter-spacing: .15em; color: var(--ok); }

.task {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.task-title { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--dim); font-weight: 600; }
.task-text { margin: 0 0 .8rem; }
.figure-box { margin: .6rem 0 1rem; text-align: center; }
.figure { width: 100%; max-width: 440px; height: auto; }

.answer { margin-top: .6rem; }
.field { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.field label { min-width: 4.5rem; font-weight: 600; }
input.num, .freetext, input[type=text] {
  font: inherit; padding: .5rem .6rem;
  border: 1px solid var(--rand-bedien); border-radius: 8px; background: #fff;
}
input.num { width: 8rem; }
input.num[aria-invalid="true"] { border-color: var(--no); box-shadow: 0 0 0 1px var(--no); }
.freetext { width: 100%; }
.unit { color: var(--dim); }

.option {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--rand-bedien); border-radius: 10px;
  padding: .6rem .7rem; margin: .4rem 0; background: #fff; cursor: pointer;
}
.option:hover { border-color: var(--accent); }
.option input { margin-top: .25rem; }

.slot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .5rem 0; }
.slot-name { min-width: 5.5rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  border: 1px solid var(--rand-bedien); background: #fff; color: var(--ink);
  border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .9rem; cursor: pointer;
}
.chip.picked { background: var(--accent); border-color: var(--accent); color: #fff; }

ol.order { padding-left: 1.2rem; margin: .5rem 0; }
ol.order li {
  display: flex; gap: .6rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .7rem; margin: .4rem 0;
}
.step-text { flex: 1 1 auto; }
.step-btns { display: flex; flex-direction: column; gap: .2rem; }

/* -------------------------------------------------------------- Feedback */

.feedback { margin: .8rem 0; padding: 0; border-radius: var(--radius); }
.feedback:not(:empty) { padding: .8rem 1rem; border: 1px solid var(--line); background: #fff; }
.feedback.ok  { background: var(--ok-bg);  border-color: #bfe6cb; }
.feedback.no  { background: var(--no-bg);  border-color: #f3c6c2; }
.feedback.tip { background: var(--tip-bg); border-color: #f0dcae; }
.fb-msg { margin: 0; font-weight: 600; }
.feedback.ok .fb-msg { color: var(--ok); }
.feedback.no .fb-msg { color: var(--no); }
.fb-sol, .fb-felder { margin: .5rem 0 0; }
.fb-sample { margin-top: .6rem; }
.fb-sample p { margin: .3rem 0 0; font-style: italic; }
.fb-steps { margin-top: .6rem; font-size: .95rem; }
.fb-steps summary { cursor: pointer; font-weight: 600; }
.fb-steps ol { margin: .4rem 0; padding-left: 1.3rem; }
.fb-steps li { margin: .2rem 0; }
.hints .hint { margin: .3rem 0; }

/* -------------------------------------------------------------- Knoepfe */

.controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .4rem; }
.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rand-bedien); background: #fff; color: var(--ink);
  border-radius: 10px; padding: .55rem 1rem; text-decoration: none; display: inline-block;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--dim); }
.btn.tiny { padding: .25rem .6rem; font-size: .82rem; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: default; }
.adjust { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }

/* Auf Touchgeraeten mindestens 44 px hohe Ziele (WCAG 2.5.5). Mit der Maus
   bleibt die kompakte Darstellung - dort trifft man auch kleinere Knoepfe. */
@media (pointer: coarse) {
  .lvlbtn, .chip, .btn.tiny { min-height: 44px; }
  .step-btns .btn.tiny { min-width: 44px; }
  .top .who a { display: inline-block; padding: .7rem .2rem; }
}
.bp { font-size: .75rem; color: var(--dim); }

/* --------------------------------------------------------- Buchbezug */

.buchbezug {
  background: #f2f5f9; border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem .8rem; margin: 0 0 1rem;
  font-size: .88rem;
}
.buch-icon { margin-right: .2rem; }
.buch-hinweis { display: block; color: var(--dim); margin-top: .2rem; }
.sr-buch { display: block; font-size: .78rem; color: #475569; margin: .1rem 0; }

/* -------------------------------------------------------- Heftaufgaben */

.heft-block { margin-top: 2rem; }
.heft-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.heft-icon { color: #b45309; }

.heft-card {
  background: #fffdf7; border: 1px solid #ecdcb8;
  border-left: 5px solid #d97706;
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem;
}
.heft-card.is-done { background: var(--ok-bg); border-color: #bfe6cb; border-left-color: var(--ok); }
.heft-card header { margin-bottom: .6rem; }
.heft-card h3 { margin: .3rem 0 0; font-size: 1.05rem; }
.heft-nr {
  display: inline-block; background: #b45309; color: #fff;   /* 5,0:1; #d97706 nur 3,2:1 */
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  padding: .15rem .6rem; border-radius: 6px;
}
.is-done .heft-nr { background: var(--ok); }
.heft-art {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); margin-left: .5rem;
}
.heft-material { font-size: .88rem; color: var(--dim); margin: .2rem 0 .6rem; }
.heft-text ol, .heft-text ul { padding-left: 1.3rem; margin: .4rem 0; }
.heft-text li { margin: .25rem 0; }
.heft-text blockquote {
  margin: .6rem 0; padding: .6rem .9rem; background: #fff;
  border-left: 3px solid var(--line); border-radius: 6px;
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: .9rem;
}
table.heft-tab { border-collapse: collapse; margin: .6rem 0; font-size: .9rem; }
table.heft-tab th, table.heft-tab td {
  border: 1px solid var(--line); padding: .3rem .8rem; min-width: 5.5rem; height: 1.9rem;
}
table.heft-tab th { background: #f2f5f9; }

.heft-loesung { margin: .8rem 0; }
.heft-loesung summary { cursor: pointer; font-weight: 600; color: var(--dim); }
.heft-schritte { margin: .6rem 0; padding-left: 1.3rem; }
.heft-schritte li { margin: .3rem 0; }

.heft-fuss { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .8rem; }
.heft-btn[aria-pressed="true"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.heft-zeit { font-size: .8rem; color: var(--dim); }

.heft-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; color: #b45309; background: #fff7ea;
  border: 1px solid #ecdcb8; border-radius: 999px; padding: .05rem .5rem;
  white-space: nowrap;
}
.heft-badge.voll { color: var(--ok); background: var(--ok-bg); border-color: #bfe6cb; }

/* Heft-Matrix im Dashboard */
table.matrix { border-collapse: collapse; font-size: .82rem; }
table.matrix th, table.matrix td {
  border: 1px solid var(--line); padding: .25rem .4rem; text-align: center;
}
table.matrix th.name { text-align: left; white-space: nowrap; position: sticky; left: 0; background: #fff; }
table.matrix thead th { background: #f2f5f9; font-weight: 600; }
table.matrix td.ja { background: var(--ok-bg); color: var(--ok); font-weight: 700; }
table.matrix td.nein { color: #d0d5dd; }
table.matrix td.summe { font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------- Merkkaesten */

.info-unit { display: grid; gap: 1rem; }
.merk {
  background: var(--card); border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius); padding: .9rem 1.1rem;
}
.merk-alt { border-left-color: #94a3b8; }
.merk h3 { margin-top: 0; }
.formel {
  font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
  background: #eef2ff; padding: .1rem .4rem; border-radius: 6px; font-size: 1.02em;
}
.hinweis { color: var(--dim); font-size: .9rem; }

table.verh { border-collapse: collapse; margin: .6rem 0; }
table.verh td { padding: .2rem .45rem; vertical-align: middle; }
table.verh .br { display: table-cell; }
table.verh .br span {
  display: block; text-align: center; padding: 0 .3rem; font-size: .95em;
}
table.verh .br span:first-child { border-bottom: 1.5px solid var(--ink); }

/* -------------------------------------------------------------- Applets */

.applet {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem; margin-bottom: 1rem;
}
.applet-wrap { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .applet-wrap { grid-template-columns: 1.1fr 1fr; align-items: start; } }
/* Beim Ziehen darf sich die Beschriftung nicht markieren lassen. */
.applet-svg {
  width: 100%; height: auto;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
/* min-width: 0 erlaubt dem Rasterfeld, schmaler zu werden als sein Inhalt -
   sonst schiebt eine breite Tabelle die ganze Seite auseinander. */
.applet-side { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; }
.applet-table, .applet-log { width: 100%; border-collapse: collapse; font-size: .85rem; }
.applet-table th, .applet-table td, .applet-log th, .applet-log td {
  border: 1px solid var(--line); padding: .3rem .4rem; text-align: center;
}
.applet-table th, .applet-log th { background: #f2f5f9; font-weight: 600; }
.applet-table .hl, .applet-log .hl { background: #fff6da; }
.applet-table .fnrow td { background: #eef2ff; font-size: .78rem; }

/* Potenztreppe: die beiden Richtungen sind farblich getrennt. Nach oben
   (mal a) baut man die Potenz auf, nach unten (geteilt durch a) entstehen
   die negativen Hochzahlen. Die Startzeile a⁰ = 1 bleibt neutral - sie ist
   der Anker, von dem aus beide Richtungen abgehen. */
.applet-table .auf td { background: #eef7ee; }
.applet-table .ab td { background: #f3eefb; }
.applet-table .start td { background: #fff6da; font-weight: 700; }
.applet-table .auf td:nth-child(4) { color: #15803d; font-weight: 600; }
.applet-table .ab td:nth-child(4) { color: #7c3aed; font-weight: 600; }

/* Spalte "gesamt von 1 ausgehend": jeder Faktor ein eigenes Kaestchen.
   Abzaehlen der Kaestchen ergibt die Hochzahl - deshalb linksbuendig und
   nicht umbrechend, damit die Reihe als Reihe lesbar bleibt. */
.applet-table td.kette { text-align: left; white-space: nowrap; }
.applet-table .k-start { font-weight: 700; }
.applet-table .k-auf, .applet-table .k-ab {
  display: inline-block; padding: 0 .28rem; border-radius: 5px; margin-left: .1rem;
}
.applet-table .k-auf { background: #cfe8d4; color: #14532d; }
.applet-table .k-ab { background: #e4d8f7; color: #4c1d95; }
.btn.stufe-auf { border-color: #15803d; color: #15803d; }
.btn.stufe-ab { border-color: #7c3aed; color: #7c3aed; }
.applet-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.applet-hint { font-size: .85rem; color: var(--dim); margin: 0; }
.sliders { display: grid; gap: .4rem; margin-top: .4rem; }
.sliders label { font-size: .88rem; display: grid; gap: .2rem; }
.sliders input[type=range] { width: 100%; }
.sliders output { font-weight: 700; color: var(--accent); }

/* SVG-Klassen */
.fshape, .tri { fill: rgba(37,99,235,.09); stroke: #1f3d7a; stroke-width: 2; stroke-linejoin: round; }
.fline { stroke: #1f3d7a; stroke-width: 2; fill: none; }
.fdiag { stroke: #b45309; stroke-width: 2.2; fill: none; }
.fhelp { stroke: #64748b; stroke-width: 1.6; stroke-dasharray: 5 4; fill: none; }
.fhidden { stroke: #94a3b8; stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
.fwall { stroke: #475569; stroke-width: 6; stroke-linecap: round; }
.fground { stroke: #475569; stroke-width: 4; stroke-linecap: round; }
.fright { stroke: #1f3d7a; stroke-width: 2; fill: none; }
.farc { stroke: #64748b; stroke-width: 2; fill: none; }
.farc.mark { stroke: #b45309; stroke-width: 3; }
.flabel { font: 600 15px system-ui, sans-serif; fill: #1b2430; text-anchor: middle; }
.flabel.mark { fill: #b45309; }
.flabel.diag { fill: #b45309; }
.fvertex { font: 700 15px system-ui, sans-serif; fill: #475569; text-anchor: middle; }
.fshape.base { fill: rgba(37,99,235,.05); }
.fgitter { stroke: #e3e8ef; stroke-width: 1; fill: none; }
.fachse { stroke: #64748b; stroke-width: 1.6; fill: none; }
.fpunkt { fill: #b45309; stroke: #fff; stroke-width: 1.5; }

.sq { stroke: #1f3d7a; stroke-width: 1.5; }
.sq-a { fill: rgba(22,163,74,.20); }
.sq-b { fill: rgba(37,99,235,.20); }
.sq-c { fill: rgba(234,88,12,.22); }
.sqtext { font: 700 15px system-ui, sans-serif; fill: #1b2430; text-anchor: middle; }
.leglabel { font: 600 13px system-ui, sans-serif; fill: #1b2430; text-anchor: middle; }
.leglabel.mark { fill: #b45309; }
.leglabel.end { text-anchor: end; }
.leglabel.start { text-anchor: start; }
.handle { fill: #2563eb; stroke: #fff; stroke-width: 3; cursor: grab; }
.handle:active { cursor: grabbing; }

/* ------------------------------------------------------------ Dashboard */

.flash {
  background: var(--ok-bg); border: 1px solid #bfe6cb; color: var(--ok);
  border-radius: var(--radius); padding: .7rem 1rem; font-weight: 600; margin: 0 0 1rem;
}
.demo .controls { margin-top: .8rem; }
.demo form { display: inline; }

/* -------------------------------------------------- Autorenoberflaeche */

.autorform .card { margin-bottom: 1rem; }
.autorform label { display: grid; gap: .25rem; font-weight: 600; font-size: .88rem; }
.autorform label.voll { margin: .6rem 0; }
.autorform input, .autorform select, .autorform textarea {
  font: inherit; font-weight: 400; padding: .45rem .6rem;
  border: 1px solid var(--rand-bedien); border-radius: 8px; background: #fff; width: 100%;
}
.autorform textarea { resize: vertical; }
.feldreihe { display: flex; flex-wrap: wrap; gap: .8rem; }
.feldreihe label { flex: 1 1 12rem; }

table.felder { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.felder th { text-align: left; font-weight: 600; color: var(--dim); padding: .2rem .3rem; }
table.felder td { padding: .2rem .3rem; }
table.felder input { width: 100%; }

.option-zeile { display: flex; gap: .6rem; align-items: center; margin: .4rem 0; flex-wrap: wrap; }
.option-zeile .radio { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; font-size: .78rem; color: var(--dim); }
.option-zeile .radio input { width: auto; }
.option-zeile input[type=text], .option-zeile input:not([type]) { flex: 1 1 12rem; }

.checkzeile { display: flex; gap: .6rem; align-items: flex-start; margin: .5rem 0; font-weight: 400; }
.checkzeile input { width: auto; margin-top: .25rem; }
.checkzeile.frei {
  background: #f0f7ff; border: 1px solid #cfe0f7; border-radius: 10px;
  padding: .7rem .9rem; margin-top: .9rem;
}

.error-box {
  background: var(--no-bg); border: 1px solid #f3c6c2; color: var(--no);
  border-radius: var(--radius); padding: .7rem 1rem; font-weight: 600; margin: 0 0 1rem;
}

table.beitraege td { white-space: normal; }
table.beitraege .aktionen { white-space: nowrap; }
table.beitraege .aktionen a, .linkbtn {
  font-size: .82rem; margin-right: .5rem;
  color: var(--accent); background: none; border: 0; padding: 0;
  font-family: inherit; cursor: pointer; text-decoration: underline;
}
form.inline { display: inline; }
.tag {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
}
.tag.ok { color: var(--ok); border-color: #bfe6cb; background: var(--ok-bg); }
.tag.frei { color: #3730a3; border-color: #c7d2fe; background: #eef2ff; }
.heft-nr.klein { font-size: .78rem; padding: .05rem .4rem; }

/* Stand einer Aufgabe - ein Klick schaltet zwischen Entwurf und veroeffentlicht */
table.beitraege td.stand form { display: inline; }
.standknopf {
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--line); background: #fff; color: var(--dim);
  border-radius: 999px; padding: .12rem .6rem; cursor: pointer; white-space: nowrap;
}
.standknopf:hover { border-color: var(--accent); color: var(--accent); }
.standknopf .punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #cbd2dc; flex: 0 0 auto;
}
.standknopf.ist-offen { color: var(--ok); border-color: #bfe6cb; background: var(--ok-bg); }
.standknopf.ist-offen .punkt { background: var(--ok); }
.standknopf.ist-offen:hover { border-color: var(--ok); }
.option.richtig { border-color: var(--ok); background: var(--ok-bg); }

/* ---------------------------------------------------- Klassenverwaltung */

.klassen { display: grid; gap: .9rem; grid-template-columns: 1fr; margin: .8rem 0; }
@media (min-width: 640px) { .klassen { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
.klasse {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem .9rem; background: #fff;
}
.klasse.archiviert { background: #f7f8fa; opacity: .75; }
.klasse header { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.klasse h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.klasse .jahr { font-weight: 400; font-size: .8rem; color: var(--dim); margin-left: .3rem; }
.klasse .tag {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
}
.beitritt { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.klasse .code {
  background: #eef2ff; color: #3730a3; font-weight: 700;
  padding: .15rem .5rem; border-radius: 6px; font-size: .95rem;
}
.qr { width: 128px; max-width: 100%; }
.qr-svg { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 6px; }
.beitrittslink { font-size: .7rem; word-break: break-all; margin: .35rem 0 .5rem; }

.druckreihe { display: flex; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .6rem; font-size: .82rem; }

.neue-klasse { margin: 1rem 0 .5rem; }
.neue-klasse summary { cursor: pointer; font-weight: 600; }
.klasse-form {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: .8rem 0 .4rem;
}
.klasse-form label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 600; }
.klasse-form input { font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid var(--rand-bedien); border-radius: 8px; }

.codes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.codes code {
  background: #eef2ff; padding: .15rem .5rem; border-radius: 6px; font-weight: 700;
}
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.grid th, table.grid td {
  border-bottom: 1px solid var(--line); padding: .45rem .5rem; text-align: left; white-space: nowrap;
}
table.grid th { color: var(--dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.diagnose th { width: 16rem; vertical-align: top; text-transform: none; font-size: .9rem; color: var(--ink); }
table.diagnose td { white-space: normal; word-break: break-all; }
table.diagnose code { font-size: .85rem; }

td.ok { color: var(--ok); font-weight: 700; }
td.mid { color: var(--tip); font-weight: 700; }
td.low { color: var(--no); font-weight: 700; }

ul.niveau { list-style: none; padding: 0; }
ul.niveau li { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
ul.niveau .bar { flex: 1 1 auto; max-width: 320px; }

ul.texte { list-style: none; padding: 0; }
ul.texte li { border-top: 1px solid var(--line); padding: .6rem 0; }
ul.texte .meta { font-size: .82rem; color: var(--dim); }
ul.texte p { margin: .25rem 0 0; }

/* ---------------------------------------------------------------- Login */

.login { max-width: 460px; margin: 2rem auto; }
.login h1 { font-size: 1.3rem; margin-top: 0; }
.stack { display: grid; gap: .8rem; }
.stack label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
/* Eingabefelder der Anmeldung: dieselbe Form wie in der Autorenoberflaeche.
   input[type=text] weiter oben greift hier nicht, weil die Felder gar kein
   type-Attribut tragen - sie saehen sonst wie Browservorgaben aus. */
.stack input, .stack select {
  font: inherit; font-weight: 400; width: 100%; padding: .45rem .6rem;
  border: 1px solid var(--rand-bedien); border-radius: 8px; background: #fff; color: var(--ink);
}
.stack input:focus, .stack select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.stack select:disabled { background: #f7f8fa; color: var(--dim); }
.teacher-login, .probe-login { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.teacher-login summary, .probe-login summary { cursor: pointer; color: var(--dim); font-size: .9rem; }
.teacher-login form, .probe-login form { margin-top: .8rem; }

/* Erklaerung unter einem Eingabefeld - normalgewichtig, damit sie nicht
   mit der Feldbezeichnung konkurriert. */
.feldhilfe { font-weight: 400; font-size: .82rem; color: var(--dim); }

/* --------------------------------------------------------- Impressum u. a. */

/* Laufender Text, keine Bedienoberflaeche: etwas schmaler als die Karte sonst,
   damit die Zeilen lesbar kurz bleiben. */
.rechtstext { max-width: 42rem; }
.rechtstext h1 { margin-bottom: 1.2rem; }
.rechtstext h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dim); margin: 1.6rem 0 .4rem;
}
.rechtstext p { margin: 0 0 .7rem; }

/* Fuenf Ziffern: Zeichenabstand macht das Nachzaehlen leicht. */
.pin-feld { letter-spacing: .35em; font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; }

/* ------------------------------------------------- Anmeldefenster, Freigabe */

.fenster { margin: .4rem 0 .6rem; font-size: .82rem; }
.fenster form { display: inline; }
.fenster .offen { color: var(--ok); font-weight: 700; }
.fenster .zu { color: var(--dim); }
.fenster .rest { color: var(--dim); }

.namenstand { font-size: .8rem; color: var(--dim); margin: .2rem 0 .5rem; }
.namenstand.dringend { color: #b45309; }

/* ------------------------------------------------- Erste Schritte, Anleitung */

/* Fortschrittsliste im Dashboard. Ist alles erledigt, schrumpft die Karte auf
   eine Zeile - sie soll nicht dauerhaft Platz beanspruchen. */
.card.start.fertig { padding: .7rem 1.1rem; }
.start-fertig { margin: 0; font-size: .9rem; color: var(--dim); }
ol.startliste { list-style: none; padding: 0; margin: .8rem 0; }
ol.startliste li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .3rem 0; color: var(--dim);
}
ol.startliste li.ist-fertig { color: var(--ok); }
ol.startliste .haken {
  flex: 0 0 1.2rem; text-align: center; font-weight: 700;
  color: #cbd2dc;
}
ol.startliste li.ist-fertig .haken { color: var(--ok); }

.anleitung h2 {
  font-size: 1.05rem; margin: 0 0 .6rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--line);
}
.anleitung p { margin: 0 0 .7rem; }
.anleitung .wichtig {
  background: var(--tip-bg); border: 1px solid #f0dcae;
  border-radius: 10px; padding: .7rem .9rem; color: var(--ink);
}
ol.schritte { margin: .8rem 0 1rem; padding-left: 1.4rem; }
ol.schritte li { margin: 0 0 .8rem; padding-left: .2rem; }
ul.liste { margin: .6rem 0 .8rem; padding-left: 1.2rem; }
ul.liste li { margin: 0 0 .5rem; }
.anleitung table.grid td { vertical-align: top; }

.kuerzel-form { display: flex; gap: .4rem; align-items: center; margin: .2rem 0 .6rem; }
.kuerzel-form input {
  font: inherit; font-size: .85rem; padding: .3rem .5rem; width: 7rem;
  border: 1px solid var(--rand-bedien); border-radius: 8px;
}

ul.freigabe { list-style: none; padding: 0; margin: .6rem 0; }
ul.freigabe li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: .5rem 0;
}
ul.freigabe .kuerzel { font-weight: 700; }
ul.freigabe .klar { color: var(--dim); }
ul.freigabe .wo { color: var(--dim); font-size: .82rem; }
ul.freigabe form { display: inline; margin-left: auto; }
ul.freigabe form + form { margin-left: .4rem; }

/* Band ueber dem Testzugang: es muss jederzeit klar sein, dass diese Daten
   verschwinden - sonst arbeitet jemand eine Stunde lang ins Leere. */
.probe-band {
  background: #fff7ea; border-bottom: 1px solid #ecdcb8; color: #b45309;
  font-size: .85rem; text-align: center; padding: .4rem 1rem;
}
.probe-band strong { color: #92400e; }

.sr-only, .sr-body.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- Formeln
   Wurzeln kommen als MathML (src/Formel.php). Die Mathematikschrift liegt auf
   dem eigenen Server: ohne Schrift mit MATH-Tabelle - auf ChromeOS und Android
   ist meist keine installiert - wird der Wurzelstrich unsauber gesetzt.
   Geladen wird sie nur auf Seiten, die tatsaechlich eine Formel enthalten. */
@font-face {
  font-family: "Lernpfad Math";
  src: url("fonts/fira-math.otf") format("opentype");
  font-display: swap;
}
math {
  font-family: "Lernpfad Math", "Cambria Math", "STIX Two Math", math;
  font-size: 1.05em;
}

/* Ersatz fuer Browser ohne MathML-Satz, erkannt von assets/formel.js. Nicht
   schoen, aber eindeutig: Wurzelzeichen plus Strich ueber dem Radikanden. */
.ohne-mathml math { font-family: inherit; font-size: 1em; white-space: nowrap; }
.ohne-mathml msqrt, .ohne-mathml mroot { display: inline-flex; align-items: flex-end; }
.ohne-mathml msqrt::before, .ohne-mathml mroot::before { content: "\221A"; order: -1; }
.ohne-mathml msqrt > mrow, .ohne-mathml mroot > mrow:first-child {
  border-top: .08em solid currentColor; padding: 0 .1em; line-height: 1.25;
}
.ohne-mathml mroot > mrow:last-child { order: -2; font-size: .65em; align-self: flex-start; margin-right: -.3em; }
.ohne-mathml msup > mrow:last-child { font-size: .75em; vertical-align: .5em; }