{\rtf1\ansi\ansicpg1252\cocoartf2908
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0

\f0\fs24 \cf0 body \{ font-family: system-ui, sans-serif; background: #f4f4f6; margin: 0; \}\
main \{ max-width: 700px; margin: 2rem auto; padding: 1rem; \}\
input, select, textarea, button \{ font-size: 1rem; padding: .5rem; margin: .25rem 0; width: 100%; box-sizing: border-box; \}\
button \{ background: #2b59c3; color: #fff; border: 0; border-radius: 6px; cursor: pointer; \}\
fieldset \{ background: #fff; border: 1px solid #ddd; border-radius: 8px; margin: 1rem 0; \}\
label \{ display: block; padding: .25rem 0; \}\
label input \{ width: auto; \}\
table \{ border-collapse: collapse; width: 100%; background: #fff; \}\
td, th \{ border: 1px solid #ddd; padding: .3rem; text-align: center; \}\
.ok \{ color: green; \} .no \{ color: #c00; \}\
}
.q { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: .75rem; margin: 1rem 0; }
.qhead, .opt, .addrow, .row { display: flex; gap: .5rem; align-items: center; }
.qhead strong { flex: 1; }
.qhead select { width: auto; }
.opt input[type=radio] { width: auto; transform: scale(1.3); }
.opt input:not([type=radio]) { flex: 1; }
.row input { flex: 1; }
button.small, .addrow button, .row button { width: auto; padding: .4rem .8rem; }
.addrow button { flex: 1; background: rgb(15, 105, 110); }
button.del { background: #c33; }
.hint { font-size: .8rem; color: #777; margin: .25rem 0 0; }
main { max-width: 1000px; }
.scroll { overflow-x: auto; }
td.left { text-align: left; }
td.actions { white-space: nowrap; }
td.actions button { margin: 0 .1rem; }
td.ans { max-width: 160px; font-size: .85rem; word-break: break-word; }
td.ans.ok { background: #e6f4ea; }
td.ans.no { background: #fde8e8; }
tr.sol td { background: #eef3ff; font-size: .85rem; font-style: italic; }
tr.stat td { font-weight: bold; background: #f7f7f7; }
label.check { display: flex; gap: .4rem; align-items: center; flex: 1; }
label.check input { width: auto; }
.qlist small { color: #666; }
#refresh { margin-bottom: .5rem; }
td.cell { cursor: pointer; user-select: none; }
td.cell:hover { outline: 2px solid #2b59c3; }
.half { color: #b07800; }
td.ans.half { background: #fff3cd; }
td.manual { outline: 2px dashed #555; outline-offset: -3px; }
textarea { font-family: inherit; }
.instr { font-style: italic; font-weight: 600; margin: 1.5rem 0 .3rem; }
.qtext { white-space: pre-wrap; margin: .3rem 0; }

.open { color: #666; }
td.ans.open { background: #f0f0f0; }
td.commented { position: relative; }
td.commented::after { content: ""; position: absolute; top: 0; right: 0;
  border: 5px solid #2b59c3; border-left-color: transparent; border-bottom-color: transparent; }
td.name { cursor: pointer; color: #2b59c3; text-decoration: underline; }

#detail { position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 10; }
#detail[hidden] { display: none; }
#panel { background: #f4f4f6; width: min(800px, 95vw); max-height: 90vh;
  overflow: auto; border-radius: 10px; padding: 0 1rem 1rem; }
.dhead { display: flex; gap: .5rem; align-items: center; position: sticky; top: 0;
  background: #f4f4f6; padding: .75rem 0; z-index: 1; }
.dhead h3 { flex: 1; margin: 0; }
.answer { white-space: pre-wrap; background: #fafafa; border-left: 5px solid #bbb;
  padding: .5rem; margin: .4rem 0; text-align: left; }
.d-ok .answer { border-color: #2a8a4a; }
.d-half .answer { border-color: #d49b00; }
.d-no .answer { border-color: #c33; }
.marks { display: flex; gap: .4rem; margin: .4rem 0; }
button.mark { background: #aaa; }
button.mark.active[data-m="1"] { background: #2a8a4a; }
button.mark.active[data-m="0.5"] { background: #d49b00; }
button.mark.active[data-m="0"] { background: #c33; }
:root {
  --teal: #2D6A65;
  --red: #7F232F;
  --blue: #0076BA;
  --teal-l: #dfeceb;
  --red-l: #f2e1e3;
  --blue-l: #d9eaf5;
  --bg: #f3f5f5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg); color: #222; margin: 0; }
main { max-width: 700px; margin: 2rem auto; padding: 1rem; }
main.wide { max-width: 1000px; }
h1, h2, h3 { color: var(--teal); }
code { color: var(--red); font-weight: bold; }

input, select, textarea, button { font: inherit; font-size: 1rem; padding: .55rem;
  margin: .25rem 0; width: 100%; }
input, select, textarea { border: 1px solid #ccc; border-radius: 6px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
textarea { resize: vertical; }

button { background: var(--blue); color: #fff; border: 0; border-radius: 6px; cursor: pointer; }
button:hover { filter: brightness(1.1); }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--teal); font-weight: bold; }
button.secondary { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
button.del { background: var(--red); }
button.small, .addrow button, .row button { width: auto; padding: .4rem .8rem; }

label { display: block; padding: .25rem 0; }
label input { width: auto; }
label.check { display: flex; gap: .4rem; align-items: center; flex: 1; }
label.check input[type=number] { width: 90px; }
.hint { font-size: .85rem; color: #666; margin: .25rem 0; }

/* ---------- Schüler ---------- */
.progress { height: 6px; background: #dde3e3; border-radius: 3px; overflow: hidden; }
#bar { height: 100%; width: 0; background: var(--teal); transition: width .2s; }
.page { background: #fff; border-top: 4px solid var(--teal); border-radius: 8px;
  padding: 1rem 1.2rem; margin: 1rem 0; min-height: 220px; }
.instr { font-weight: bold; color: var(--teal); margin: 0 0 .5rem; }
.qtext { white-space: pre-wrap; font-size: 1.1rem; margin: .3rem 0 .8rem; }
label.choice { border: 1px solid #ddd; border-radius: 6px; padding: .6rem .8rem;
  margin: .4rem 0; cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-l); }
.nav { display: flex; gap: .5rem; }
.nav button { flex: 1; }
#err { color: var(--red); }

/* ---------- Tabellen ---------- */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
td, th { border: 1px solid #ddd; padding: .35rem; text-align: center; }
th { background: var(--teal); color: #fff; font-weight: 600; }
td.left { text-align: left; }
td.actions { white-space: nowrap; }
td.actions button { margin: 0 .1rem; }
#refresh { margin-bottom: .5rem; }

/* ---------- Editor ---------- */
.settings { display: flex; gap: 1rem; flex-wrap: wrap; background: #fff;
  border: 1px solid #ddd; border-radius: 8px; padding: .5rem .8rem; margin: .5rem 0; }
.q { background: #fff; border: 1px solid #ddd; border-left: 4px solid var(--teal);
  border-radius: 8px; padding: .75rem; margin: 1rem 0; }
.qhead, .opt, .addrow, .row { display: flex; gap: .5rem; align-items: center; }
.qhead strong { flex: 1; color: var(--teal); }
.qhead select { width: auto; }
.opt input[type=radio] { width: auto; transform: scale(1.3); accent-color: var(--teal); }
.opt input:not([type=radio]) { flex: 1; }
.row input { flex: 1; }
.addrow button { flex: 1; background: var(--teal); }

/* ---------- Bewertung ---------- */
.ok { color: var(--teal); font-weight: bold; }
.no { color: var(--red); font-weight: bold; }
.half { color: var(--blue); font-weight: bold; }
.open { color: #777; }
td.na { background: repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 4px, #e8e8e8 4px, #e8e8e8 8px); }
td.cell { cursor: pointer; user-select: none; }
td.cell:hover { outline: 2px solid var(--blue); }
td.ans { max-width: 160px; font-size: .85rem; font-weight: normal; word-break: break-word; color: #222; }
td.ans.ok { background: var(--teal-l); }
td.ans.no { background: var(--red-l); }
td.ans.half { background: var(--blue-l); }
td.ans.open { background: #f0f0f0; }
td.manual { outline: 2px dashed #555; outline-offset: -3px; }
td.commented { position: relative; }
td.commented::after { content: ""; position: absolute; top: 0; right: 0;
  border: 5px solid var(--blue); border-left-color: transparent; border-bottom-color: transparent; }
td.name { cursor: pointer; color: var(--blue); text-decoration: underline; }
tr.sol td { background: #eef5f9; font-size: .85rem; font-style: italic; }
.qlist small { color: #666; }

/* ---------- Detailansicht ---------- */
#detail { position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 10; }
#panel { background: var(--bg); width: min(800px, 95vw); max-height: 90vh;
  overflow: auto; border-radius: 10px; padding: 0 1rem 1rem; }
.dhead { display: flex; gap: .5rem; align-items: center; position: sticky; top: 0;
  background: var(--bg); padding: .75rem 0; z-index: 1; }
.dhead h3 { flex: 1; margin: 0; }
.answer { white-space: pre-wrap; background: #fafafa; border-left: 5px solid #bbb;
  padding: .5rem; margin: .4rem 0; }
.d-ok .answer { border-color: var(--teal); }
.d-half .answer { border-color: var(--blue); }
.d-no .answer { border-color: var(--red); }
.marks { display: flex; gap: .4rem; margin: .4rem 0; }
button.mark { background: #aaa; }
button.mark.active[data-m="1"] { background: var(--teal); }
button.mark.active[data-m="0.5"] { background: var(--blue); }
button.mark.active[data-m="0"] { background: var(--red); }
.instr.repeat { font-weight: normal; color: #999; font-size: .85rem; }
details.paste { background: #fff; border: 1px dashed var(--teal); border-radius: 8px;
  padding: .5rem .8rem; margin: .75rem 0; }
details.paste summary { cursor: pointer; color: var(--teal); font-weight: bold; }
html { background: var(--bg); }
html:fullscreen { overflow-y: auto; }

/* Timer dezent, letzte Minute rot */
.timer { position: sticky; top: 0; z-index: 5; text-align: right; font-size: .85rem;
  color: #999; background: var(--bg); padding: .3rem 0; font-variant-numeric: tabular-nums; }
.timer.warn { background: var(--red); color: #fff; font-weight: bold; font-size: 1rem;
  text-align: center; padding: .5rem; border-radius: 6px; }

/* Markieren sperren */
#quiz { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#quiz input, #quiz textarea { -webkit-user-select: text; user-select: text; }

/* Dialog und Hinweis */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex;
  align-items: center; justify-content: center; z-index: 20; padding: 1rem; }
.modal .box { background: #fff; border-radius: 10px; padding: 1.2rem; max-width: 420px;
  width: 100%; border-top: 5px solid var(--red); }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: .6rem 1rem; border-radius: 6px; z-index: 30; }

/* Lehrer: Protokoll */
td.log { font-size: .8rem; text-align: left; color: #666; cursor: pointer; }
td.log.flag { color: var(--red); font-weight: bold; background: var(--red-l); }
td.sus { position: relative; }
td.sus::before { content: "!"; position: absolute; top: 0; left: 3px;
  color: var(--red); font-weight: bold; font-size: .75rem; }
.logbox { background: #fff; border-left: 5px solid var(--teal); border-radius: 6px;
  padding: .5rem .8rem; margin-bottom: .5rem; }
.logbox.flag { border-color: var(--red); }
.logbox ul { margin: .2rem 0; padding-left: 1.2rem; }
.susline { color: var(--red); font-weight: bold; }
th.sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.sort:hover { background: var(--blue); }
td.date { font-size: .8rem; white-space: nowrap; color: #555; }
.vrow { display: flex; gap: 1rem; flex-wrap: wrap; }
ul.qlist { padding-left: 1.2rem; }
/* Schüler: Titel und Anweisung schwarz */
main:not(.wide) h1, main:not(.wide) h2 { color: #222; }
.page .instr:not(.repeat) { color: #222; }

/* Lückentext */
.cloze { white-space: pre-wrap; font-size: 1.1rem; line-height: 2.4; margin: .3rem 0; }
.cloze input.gapin { display: inline-block; width: 6ch; max-width: 100%; margin: 0 .15rem; padding: .25rem .4rem;
  vertical-align: baseline; }

/* Editor: Pflicht */
.qhead label.must { flex: 0 0 auto; white-space: nowrap; font-size: .9rem; }
.q.mustq { border-left-color: var(--blue); }
.pre { white-space: pre-wrap; }
/* ================= SCHÜLERANSICHT ================= */
body.student {
  --ink: #1f2626; --muted: #6b7676; --line: #dfe4e4; --soft: #f3f5f5;
  background: var(--soft); color: var(--ink); -webkit-font-smoothing: antialiased;
}
body.student main { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 0; }
body.student h1, body.student h2 { color: var(--ink); }
body.student .card { background: #fff; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .75; } }

/* Start */
body.student .start { max-width: 420px; margin: 10vh auto 0; padding: 2rem; }
body.student .brand { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); font-weight: 700; margin-bottom: .4rem; }
body.student .start h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1.5rem; }
body.student label.field { display: block; padding: 0; margin: 0 0 1rem; }
body.student label.field span { display: block; font-size: .8rem; font-weight: 600;
  color: var(--muted); margin-bottom: .35rem; }
body.student label.field input { width: 100%; }
body.student #go { margin-top: .5rem; width: 100%; }
body.student .msg { color: var(--red); font-size: .9rem; min-height: 1.2em; margin: .8rem 0 0; }

/* Felder */
body.student input:not([type=radio]), body.student select, body.student textarea {
  font-size: 1.05rem; padding: .75rem .9rem; margin: 0; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
body.student input:focus, body.student select:focus, body.student textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,118,186,.15); }
body.student textarea { line-height: 1.6; }
body.student select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7676' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center; }

/* Buttons */
body.student button { border-radius: 10px; padding: .8rem 1.4rem; margin: 0;
  font-weight: 600; font-size: 1rem; transition: filter .15s, background .15s; }
body.student button.primary { background: var(--teal); }
body.student button.ghost { background: transparent; color: var(--muted); }
body.student button.ghost:hover { background: #e9eded; color: var(--ink); filter: none; }

/* Kopfzeile */
body.student .topbar { position: sticky; top: 0; z-index: 6; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line); }
body.student .tb-in { max-width: 720px; margin: 0 auto; padding: .8rem 1rem;
  display: flex; align-items: center; gap: 1rem; }
body.student .tb-title { flex: 1; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.student .tb-right { display: flex; align-items: center; gap: .9rem; font-size: .9rem;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.student .topbar .timer { position: static; margin: 0; padding: .2rem .7rem; font-size: .9rem;
  background: none; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; text-align: center; }
body.student .topbar .timer.warn { background: var(--red); border-color: var(--red); color: #fff;
  font-weight: 700; animation: pulse 1s ease-in-out infinite; }
body.student .topbar .progress { height: 3px; background: transparent; border-radius: 0; }
body.student #bar { background: var(--teal); }

/* Punkteleiste */
body.student .dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.2rem 0 1rem; }
body.student .dot { width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: .75rem;
  font-weight: 600; background: #fff; color: var(--muted); border: 1.5px solid var(--line); }
body.student .dots.compact { gap: .35rem; }
body.student .dots.compact .dot { width: .8rem; height: .8rem; font-size: 0; }
body.student .dot.filled { background: var(--teal); border-color: var(--teal); color: #fff; }
body.student .dot.cur { border-color: var(--blue); }

/* Aufgabe */
body.student .page { padding: 2rem; margin: 0 0 1rem; min-height: 260px; border-top: 0;
  animation: fadeUp .25s ease; }
body.student .instr { font-size: .95rem; font-weight: 600; color: var(--ink); margin: 0 0 .6rem; }
body.student .instr.repeat { font-weight: 500; font-size: .85rem; color: var(--muted); }
body.student .qtext { font-size: 1.3rem; line-height: 1.5; color: var(--ink); margin: 0 0 1.5rem; }

/* Multiple Choice */
body.student .choices { display: grid; gap: .6rem; }
body.student label.choice { position: relative; display: flex; align-items: center; gap: .9rem; margin: 0;
  padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff;
  cursor: pointer; transition: border-color .15s, background .15s; }
body.student label.choice:hover { border-color: #b9c3c3; background: #fafbfb; }
body.student label.choice input { position: absolute; opacity: 0; pointer-events: none; }
body.student .letter { flex: 0 0 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px;
  font-size: .85rem; font-weight: 700; background: var(--soft); color: var(--muted); transition: all .15s; }
body.student .otext { font-size: 1.05rem; line-height: 1.4; }
body.student label.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-l); }
body.student label.choice:has(input:checked) .letter { background: var(--blue); color: #fff; }
body.student label.choice:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(0,118,186,.15); }

/* Lückentext */
body.student .cloze { font-size: 1.2rem; line-height: 2.3; color: var(--ink); margin: 0; }
body.student .cloze input.gapin { display: inline-block; min-width: 6ch; margin: 0 .15rem;
  padding: .1rem .35rem; font-size: 1.1rem; line-height: 1.4; vertical-align: baseline;
  border: 0; border-bottom: 2px solid #9aa5a5; border-radius: 4px 4px 0 0;
  background: var(--soft); box-shadow: none; }
body.student .cloze input.gapin:focus { border-bottom-color: var(--blue); background: var(--blue-l); box-shadow: none; }

/* Navigation */
body.student .navbar { position: sticky; bottom: 0; z-index: 4; padding: 1rem 0 1.2rem;
  background: linear-gradient(to top, var(--soft) 70%, rgba(243,245,245,0)); }
body.student .navin { display: flex; justify-content: space-between; gap: .75rem; }
body.student .navin button { width: auto; min-width: 9rem; }
body.student #err { color: var(--red); text-align: center; font-size: .9rem; }

/* Dialog */
body.student .modal { background: rgba(20,28,28,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.student .modal .box { max-width: 440px; padding: 1.8rem; text-align: center; border-top: 0;
  border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.2); animation: fadeUp .2s ease; }
body.student .micon { width: 3rem; height: 3rem; margin: 0 auto 1rem; display: grid; place-items: center;
  border-radius: 50%; font-size: 1.4rem; font-weight: 800; background: var(--red-l); color: var(--red); }
body.student .box.info .micon { background: var(--teal-l); color: var(--teal); }
body.student .modal p { font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.4rem; }
body.student .mbtns { display: flex; justify-content: center; gap: .6rem; }
body.student .mbtns button { flex: 1; }
body.student .mbtns button.secondary { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
body.student .toast { border-radius: 999px; padding: .6rem 1.2rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); }

/* Abschluss */
body.student .done { max-width: 460px; margin: 12vh auto 0; padding: 2.5rem 2rem; text-align: center; }
body.student .donecheck { width: 4rem; height: 4rem; margin: 0 auto 1.2rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal); color: #fff; font-size: 2rem; font-weight: 700; }
body.student .done h2 { font-size: 1.3rem; font-weight: 600; line-height: 1.4; margin: 0 0 .5rem; }

/* Handy */
@media (max-width: 600px) {
  body.student .page { padding: 1.3rem; }
  body.student .qtext { font-size: 1.15rem; }
  body.student .navin button { flex: 1; min-width: 0; }
  body.student .tb-title { font-size: .9rem; }
}
body.student .tb-left { flex: 1; min-width: 0; }
body.student .tb-who { font-size: .8rem; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
body.student .rtitle { margin: 0 0 .8rem; font-size: 1.2rem; }
body.student .rules { text-align: left; margin: 0 0 1.4rem; padding-left: 1.2rem;
  line-height: 1.5; font-size: .95rem; }
body.student .rules li { margin: .35rem 0; }
body.student .rules strong { color: var(--red); }
#live { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex;
  align-items: center; justify-content: center; z-index: 10; }
#livePanel { background: var(--bg); width: min(1150px, 96vw); max-height: 92vh;
  overflow: auto; border-radius: 10px; padding: 0 1rem 1rem; }
.lbar { height: 6px; min-width: 80px; background: #e3e7e7; border-radius: 3px; overflow: hidden; }
.lbar div { height: 100%; background: var(--teal); }
tr.lflag td:first-child { border-left: 4px solid var(--red); }
tr.stale td { opacity: .45; }
body.student .instrbox { background: var(--teal-l); border-left: 4px solid var(--teal);
  border-radius: 8px; padding: .7rem 1rem; margin: 0 0 1.4rem; }
body.student .ilabel { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--teal); margin-bottom: .2rem; }
body.student .instrbox .instr { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
body.student .instrbox.changed { animation: instrFlash 1.4s ease; }
@keyframes instrFlash {
  0% { box-shadow: 0 0 0 0 rgba(45,106,101,.45); }
  100% { box-shadow: 0 0 0 12px rgba(45,106,101,0); }
}
/* Lehrerseite breiter */
main.wide { max-width: min(1500px, 96vw); }

/* Checkbox direkt neben dem Text */
.row input[type=checkbox] { flex: 0 0 auto; width: auto; margin: 0; }
.row label.check { flex: 0 0 auto; margin-right: 1rem; }

/* Testliste kompakter */
#list td { white-space: nowrap; }
#list td.left { white-space: normal; min-width: 160px; }
td.actions button { padding: .3rem .6rem; font-size: .85rem; }
/* ===== Formatierungs-Buttons ===== */
.fmtbar { display: inline-flex; gap: .2rem; }
.fmtbar .fb { font-weight: 700; }
.fmtbar .fi { font-style: italic; }
.fmtbar .fu { text-decoration: underline; }

/* ===== Umschalter ===== */
html body button.themebtn { background: transparent; color: var(--muted, #6b7676);
  border: 1.5px solid rgba(128,128,128,.45); width: 2.2rem; height: 2.2rem; padding: 0;
  margin: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; }
.themefix { position: fixed; top: .6rem; right: .8rem; z-index: 9; }
body.student .start { position: relative; }
body.student .themeslot { position: absolute; top: .9rem; right: .9rem; }

/* ===== Darkmode ===== */
html[data-theme=dark] {
  color-scheme: dark;
  --bg: #0f1414; --soft: #0f1414; --ink: #e6ecec; --muted: #9aa7a7; --line: #323d3d;
  --teal: #3a8a82; --teal-l: #1c3835;
  --blue: #2f8fcb; --blue-l: #12304a;
  --red: #c4475a; --red-l: #3a1a20;
}
html[data-theme=dark] body { background: var(--bg); color: #e3eaea; }
html[data-theme=dark] body.student { --ink: #e6ecec; --muted: #9aa7a7; --line: #323d3d; --soft: #0f1414; }

/* Felder (Admin) */
html[data-theme=dark] :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  background-color: #1a2121; color: #e6ecec; border-color: #3a4646; }
html[data-theme=dark] ::placeholder { color: #7d8a8a; }
html[data-theme=dark] .hint, html[data-theme=dark] small { color: #9aa7a7; }
html[data-theme=dark] code { color: #ff9aa6; background: transparent; }

/* Karten und Tabellen (Admin) */
html[data-theme=dark] .q, html[data-theme=dark] .logbox, html[data-theme=dark] details.paste,
html[data-theme=dark] .settings, html[data-theme=dark] #panel, html[data-theme=dark] #livePanel {
  background: #1a2121; color: #e3eaea; }
html[data-theme=dark] table { background: #1a2121; }
html[data-theme=dark] td { background: #1a2121; color: #e3eaea; border-color: #2f3a3a; }
html[data-theme=dark] tr.sol td { background: #232d2d; }
html[data-theme=dark] td.na { background: #131919; }
html[data-theme=dark] td.cell.ok { background: #1f4a35; color: #bfeccf; }
html[data-theme=dark] td.cell.no { background: #55242c; color: #f3c0c7; }
html[data-theme=dark] td.cell.half { background: #58471a; color: #f5de9a; }
html[data-theme=dark] td.cell.open { background: #2a3a4a; color: #cfe3f5; }
html[data-theme=dark] .q.d-ok { background: #1c3a2b; }
html[data-theme=dark] .q.d-no { background: #3a1f25; }
html[data-theme=dark] .q.d-half { background: #3d3418; }
html[data-theme=dark] .q.d-open { background: #243442; }
html[data-theme=dark] .answer { background: #232d2d; color: #e3eaea; }
html[data-theme=dark] span.ok { color: #6fd09a; }
html[data-theme=dark] span.no { color: #ff8e9c; }
html[data-theme=dark] .lbar { background: #2f3a3a; }

/* Schüler */
html[data-theme=dark] body.student .card { background: #1a2121; box-shadow: none; border: 1px solid var(--line); }
html[data-theme=dark] body.student input:not([type=radio]),
html[data-theme=dark] body.student select,
html[data-theme=dark] body.student textarea { background-color: #1a2121; color: #e6ecec; }
html[data-theme=dark] body.student .cloze input.gapin { background-color: #232d2d; }
html[data-theme=dark] body.student .cloze input.gapin:focus { background-color: var(--blue-l); }
html[data-theme=dark] body.student .topbar { background: rgba(20,26,26,.92); }
html[data-theme=dark] body.student .navbar {
  background: linear-gradient(to top, #0f1414 70%, rgba(15,20,20,0)); }
html[data-theme=dark] body.student button.ghost:hover { background: #243030; color: #e6ecec; }
html[data-theme=dark] body.student label.choice { background: #1a2121; }
html[data-theme=dark] body.student label.choice:hover { background: #202929; border-color: #4a5757; }
html[data-theme=dark] body.student label.choice:has(input:checked) {
  background: var(--blue-l); border-color: var(--blue); }
html[data-theme=dark] body.student .letter { background: #2a3535; color: #b4c0c0; }
html[data-theme=dark] body.student label.choice:has(input:checked) .letter { background: var(--blue); color: #fff; }
html[data-theme=dark] body.student .dot { background: #1a2121; color: var(--muted); border-color: var(--line); }
html[data-theme=dark] body.student .dot.filled { background: var(--teal); border-color: var(--teal); color: #fff; }
html[data-theme=dark] body.student .dot.cur { border-color: var(--blue); }
html[data-theme=dark] body.student .modal .box { background: #1a2121; color: #e6ecec; }
html[data-theme=dark] body.student .mbtns button.secondary { background: #1a2121; color: #e6ecec; border-color: var(--line); }
html[data-theme=dark] .page .instr:not(.repeat) { color: var(--ink); }
html[data-theme=dark] body.student .instr.repeat { color: var(--muted); }