:root {
  --bg: #eef1ee; --papier: #ffffff; --text: #1d2a25; --leise: #5f6f68; --rand: #d5ddd8;
  --kopf: #17302a; --kopf-text: #e9f1ec;
  --tafel: #1f3d34; --tafel-2: #264a3f; --kreide: #eef3e6; --kreide-leise: #a9c2b6;
  --netz: #f2d45c; --wackel: #8fd3ff; --ok: #8fe39b; --falsch: #ff8f86; --akzent: #2f7d62;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111816; --papier: #18211e; --text: #e3ebe6; --leise: #93a59d; --rand: #2c3a35; --kopf: #0c1513; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
code, .mono { font-family: var(--mono); }
.tipp { color: var(--leise); font-size: .88em; }
.tafel .tipp { color: var(--kreide-leise); }
[hidden] { display: none !important; }

/* Kopf */
.kopf { background: var(--kopf); color: var(--kopf-text); display: flex; align-items: center; gap: 14px; padding: 8px 16px; flex-wrap: wrap; }
.marke { font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logo { font-family: var(--mono); background: var(--tafel-2); color: var(--netz); border-radius: 6px; padding: 1px 7px; }
.logo.gross { font-size: 2rem; padding: 4px 16px; display: inline-block; }
.lernpfad { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: thin; }
.schritt { display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #355a4d; color: var(--kopf-text); border-radius: 18px; padding: 3px 10px 3px 4px; cursor: pointer; white-space: nowrap; font-size: .85rem; }
.schritt:hover { background: #22433a; }
.schritt .nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #355a4d; font-size: .75rem; }
.schritt.gemeistert .nr { background: var(--ok); color: #123; }
.schritt.offen .nr { background: var(--netz); color: #123; }
.schritt.gesperrt { opacity: .55; }
.punkte { display: inline-flex; gap: 2px; }
.punkte i { width: 6px; height: 6px; border-radius: 50%; background: #355a4d; }
.punkte i.p-ok { background: var(--ok); } .punkte i.p-nein { background: var(--falsch); }
.menues { display: flex; gap: 8px; align-items: center; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: 4px 10px; border-radius: 6px; border: 1px solid #355a4d; font-size: .9rem; }
.menu summary::-webkit-details-marker { display: none; }
.menuliste { position: absolute; right: 0; top: calc(100% + 6px); background: var(--papier); color: var(--text); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 8px 24px #0003; min-width: 260px; z-index: 20; padding: 4px; }
.eintrag { display: flex; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.eintrag:hover { background: var(--bg); }
.knopf { background: var(--papier); border: 1px solid var(--rand); border-radius: 6px; padding: 6px 12px; cursor: pointer; text-decoration: none; display: inline-block; }
.knopf:hover:not(:disabled) { border-color: var(--akzent); }
.knopf:disabled { opacity: .45; cursor: default; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.klein { padding: 2px 8px; font-size: .85rem; }
.knopf.flach { background: transparent; color: var(--kopf-text); border-color: #355a4d; font-size: .9rem; padding: 4px 10px; }

/* Hauptbereich */
.hauptbereich { flex: 1; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.9fr); min-height: 0; }
.reiter { display: none; }
.chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--rand); background: var(--papier); }
.verlauf { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.nachricht { max-width: 92%; padding: 8px 12px; border-radius: 12px; overflow-wrap: anywhere; }
.nachricht p { margin: .3em 0; } .nachricht ul, .nachricht ol { margin: .3em 0; padding-left: 1.3em; }
.nachricht.user { align-self: flex-end; background: var(--akzent); color: #fff; border-bottom-right-radius: 3px; white-space: pre-wrap; }
.nachricht.assistant { align-self: flex-start; background: var(--bg); border-bottom-left-radius: 3px; }
.nachricht code { background: #0001; padding: 0 4px; border-radius: 4px; }
.ereignis { align-self: center; font-size: .82rem; color: var(--leise); background: transparent; border: 1px dashed var(--rand); border-radius: 8px; padding: 4px 10px; max-width: 95%; }
.ereignis.fehler { color: #b3261e; border-color: #e6a29c; }
.tafelchip { align-self: flex-start; background: var(--tafel); color: var(--kreide); border: 0; border-radius: 6px; padding: 3px 10px; font-size: .82rem; cursor: pointer; }
.tippt .dots { display: inline-flex; gap: 3px; } .tippt .dots { animation: puls 1.2s infinite; letter-spacing: 2px; color: var(--leise); }
@keyframes puls { 50% { opacity: .3; } }
.eingabe { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--rand); }
.eingabe textarea { flex: 1; resize: none; border: 1px solid var(--rand); border-radius: 8px; padding: 8px; background: var(--papier); }

/* Tafel */
.tafel { background: var(--tafel); color: var(--kreide); display: flex; flex-direction: column; min-height: 0; }
.tafelkopf { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #ffffff1a; }
.tafelkopf h2 { margin: 0; font-size: 1.05rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tafel .knopf { background: var(--tafel-2); color: var(--kreide); border-color: #ffffff2a; }
.tafel .knopf.haupt { background: var(--netz); color: #1d2a25; border-color: var(--netz); font-weight: 600; }
.tafelinhalt { flex: 1; overflow: auto; padding: 18px 20px 40px; }
.tafel input, .tafel select { background: #0f2620; border: 1px solid #ffffff33; border-radius: 6px; padding: 5px 8px; color: var(--kreide); }
.tafel input:focus, .tafel .bit:focus { outline: 2px solid var(--netz); outline-offset: 1px; }
.tafel h4 { margin: 18px 0 6px; color: var(--kreide-leise); font-weight: 600; font-size: .92rem; }
.steuer { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.ipfeld { width: 11em; font-family: var(--mono); }
.zahl { font-family: var(--mono); }
.regler { flex: 1; min-width: 160px; accent-color: var(--netz); }
.erklaer { margin: 0 0 12px; }
.c-netz { color: var(--netz); } .c-wackel { color: var(--wackel); }
.merksatz { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--netz); background: #ffffff0d; border-radius: 0 6px 6px 0; }
.fehler { color: var(--falsch); }

/* Bits */
.bits { display: inline-flex; gap: 3px; font-family: var(--mono); align-items: center; flex-wrap: nowrap; }
.bit { width: 26px; height: 32px; display: inline-grid; place-items: center; border-radius: 4px; background: #ffffff10; border: 1px solid #ffffff22; font-size: 1rem; color: var(--kreide); padding: 0; position: relative; }
button.bit { cursor: pointer; } button.bit:hover:not(:disabled) { background: #ffffff22; }
.bit.leer { background: #0f2620; border-style: dashed; }
.bit.kopf { background: none; border: 0; font-size: .7rem; color: var(--kreide-leise); height: 18px; }
.bit.eins { font-weight: 700; }
.bit.netz { background: #f2d45c33; border-color: var(--netz); color: var(--netz); }
.bit.wackel { border-color: var(--wackel); color: var(--wackel); animation: wackeln 2.4s ease-in-out infinite; }
.bit.wackel:nth-child(3n) { animation-delay: -.8s; } .bit.wackel:nth-child(3n+1) { animation-delay: -1.6s; }
.bit.fest { border-color: #f2d45c88; }
.bit.host { box-shadow: inset 0 -3px 0 #8fd3ff55; }
.bit.io { background-color: #ffffff1c; }
.bit.trenn::after { content: ""; position: absolute; right: -3px; top: -6px; bottom: -6px; width: 3px; background: var(--falsch); border-radius: 2px; }
.bit.falsch { background: #ff8f8640; border-color: var(--falsch); }
.bit.richtig { border-color: #8fe39b88; }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .bit.wackel { animation: none; } }
.bits32 { gap: 2px; } .bits32 .bit { width: 18px; height: 27px; font-size: .88rem; }
.punkt { width: 6px; text-align: center; color: var(--kreide-leise); }
.bitblock { display: inline-flex; flex-direction: column; gap: 4px; max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.rzeile { display: flex; align-items: center; gap: 10px; }
.rlabel { width: 78px; text-align: right; color: var(--kreide-leise); font-size: .85rem; flex: none; }
.rdez { font-family: var(--mono); min-width: 9em; }
.strich { border-top: 2px solid var(--kreide); margin-left: 88px; padding-top: 2px; font-size: .75rem; color: var(--kreide-leise); }
.rechnung.gross { font-family: var(--mono); font-size: 1.25rem; margin: 12px 0; }
.maskendez { font-family: var(--mono); font-size: 1.2rem; margin: 8px 0; }
.maskendez .interessant { color: var(--netz); text-decoration: underline; text-underline-offset: 4px; }
.maskenwerte { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0; }
.mw { font-family: var(--mono); background: #ffffff10; border-radius: 5px; padding: 2px 6px; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.mw small { font-size: .62rem; color: var(--kreide-leise); }
.mw.aktiv { background: var(--netz); color: #1d2a25; } .mw.aktiv small { color: #1d2a25; }
.fakten { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 12px 0; }
.fakten dt { color: var(--kreide-leise); } .fakten dd { margin: 0; font-family: var(--mono); }
.wackelbox { margin-top: 14px; padding-top: 6px; border-top: 1px dashed #ffffff22; }
table.restwert, table.wahrheit, table.daten { border-collapse: collapse; font-size: .9rem; }
table.restwert td, table.restwert th, table.wahrheit td, table.wahrheit th, table.daten td, table.daten th { border: 1px solid #ffffff22; padding: 3px 10px; text-align: center; }
table th { color: var(--kreide-leise); font-weight: 600; }
tr.ja td { background: #f2d45c22; }
.zweispaltig { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.strahl svg { width: 100%; max-width: 760px; display: block; margin: 6px 0; }
.strahl .blk.a { fill: #ffffff14; } .strahl .blk.b { fill: #ffffff26; } .strahl .blk.aktiv { fill: var(--netz); }
.strahl .blk { stroke: var(--tafel); stroke-width: 1; }
.strahl .lbl { fill: var(--kreide-leise); font: 11px var(--mono); text-anchor: middle; }
.strahl .marker { fill: var(--falsch); }
.anschrieb { max-width: 760px; font-size: 1.02rem; }
.anschrieb h3, .anschrieb h4, .anschrieb h5 { color: var(--netz); margin: 14px 0 6px; }
.anschrieb code, .anschrieb pre { background: #0f2620; padding: 1px 5px; border-radius: 4px; }
.anschrieb pre { padding: 10px; overflow-x: auto; }
.anschrieb.leer { color: var(--kreide-leise); margin-top: 10vh; text-align: center; margin-inline: auto; }

/* Aufgaben */
.aufgabenkopf { display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; }
.chip { background: var(--tafel-2); border: 1px solid #ffffff2a; border-radius: 10px; padding: 0 8px; font-size: .78rem; white-space: nowrap; }
.frage { font-size: 1.05rem; }
.formular { display: grid; grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); gap: 8px 14px; align-items: center; }
.fzeile { display: contents; }
.flabel { color: var(--kreide-leise); text-align: right; font-size: .9rem; max-width: 170px; }
.fzeile.eingabe .flabel { color: var(--kreide); }
.fwert { min-width: 0; overflow-x: auto; }
.gegeben { font-family: var(--mono); font-size: 1.1rem; color: var(--netz); }
.rueck { font-size: .82rem; color: var(--falsch); min-height: 0; }
.rueck code { color: var(--ok); font-family: var(--mono); }
input.ok, .bits.ok .bit, .auswahl.ok .gewaehlt { border-color: var(--ok) !important; }
input.falsch, .auswahl.falsch .gewaehlt { border-color: var(--falsch) !important; background: #ff8f8622; }
.auswahl { display: flex; gap: 6px; }
.auswahl .knopf.gewaehlt { background: var(--wackel); color: #1d2a25; border-color: var(--wackel); }
.status { margin-top: 16px; font-weight: 600; min-height: 1.4em; }
.status.richtig_erst, .status.richtig { color: var(--ok); }
.status.aufgegeben { color: var(--wackel); }
.hinweise .hinweis { margin-top: 8px; padding: 6px 10px; background: #ffffff10; border-radius: 6px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* Schublade, Popover, Login, Toast */
.schublade { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--papier); box-shadow: -8px 0 30px #0004; z-index: 30; padding: 14px; overflow-y: auto; }
.schubladenkopf { display: flex; justify-content: space-between; align-items: center; }
.schubladenkopf h2 { margin: 0; font-size: 1.1rem; }
#sammlungsliste .eintrag { border-bottom: 1px solid var(--rand); border-radius: 0; }
#sammlungsliste .eintrag span:nth-child(2) { flex: 1; }
.zeichen { width: 1.4em; text-align: center; font-weight: 700; }
.eintrag.richtig_erst .zeichen, .eintrag.richtig .zeichen { color: var(--akzent); } .eintrag.aufgegeben .zeichen { color: #b3261e; }
.popover { position: absolute; z-index: 40; background: var(--papier); color: var(--text); border: 1px solid var(--rand); border-radius: 10px; box-shadow: 0 10px 30px #0004; padding: 12px 14px; width: min(360px, calc(100vw - 16px)); }
.popover h3 { margin: 0 0 4px; } .popover p { margin: 6px 0; }
.popover .ok { color: var(--akzent); font-weight: 600; }
.popover .reihe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.popover select { border: 1px solid var(--rand); border-radius: 6px; padding: 5px; background: var(--papier); }
.popover > .knopf { margin-top: 6px; }
.login { position: fixed; inset: 0; background: var(--tafel); display: grid; place-items: center; z-index: 50; padding: 16px; }
.login form { background: var(--papier); border-radius: 14px; padding: 28px; width: min(380px, 100%); text-align: center; box-shadow: 0 20px 60px #0005; }
.login h1 { margin: 10px 0 4px; }
.login input { width: 100%; padding: 10px; border: 1px solid var(--rand); border-radius: 8px; margin: 10px 0; font-size: 1.05rem; background: var(--papier); }
.login .knopf { width: 100%; padding: 10px; }
.login .fehler { color: #b3261e; min-height: 1.2em; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--kopf); color: var(--kopf-text); padding: 10px 18px; border-radius: 8px; z-index: 60; box-shadow: 0 8px 24px #0004; }
.toast.erfolg { background: var(--akzent); } .toast.fehler { background: #8c1d18; }

/* Vollbild: nur die Tafel */
body.vollbild .kopf, body.vollbild .chat, body.vollbild .reiter { display: none; }
body.vollbild .hauptbereich { grid-template-columns: 1fr; }

/* Schmal */
@media (max-width: 900px) {
  .hauptbereich { grid-template-columns: 1fr; }
  .reiter { display: flex; background: var(--kopf); }
  .reiter button { flex: 1; background: none; border: 0; color: var(--kopf-text); padding: 8px; border-bottom: 3px solid transparent; }
  .reiter button.aktiv { border-color: var(--netz); }
  body[data-bereich="chat"] .tafel, body[data-bereich="tafel"] .chat { display: none; }
  .kopf { padding: 8px 12px; gap: 8px; }
  .lernpfad { order: 3; flex-basis: 100%; }
  .schritt .mt { display: none; }
  .tafelinhalt { padding: 14px 12px 40px; }
  .formular { grid-template-columns: 1fr; gap: 2px; }
  .flabel { text-align: left; margin-top: 8px; }
  .bits32 .bit { width: 16px; height: 26px; font-size: .8rem; }
  .bits { gap: 2px; }
  .rlabel { width: 56px; }
  .strich { margin-left: 66px; }
}

/* Avatar Prof. Wackelbit */
.az { display: flex; gap: 8px; align-items: flex-end; align-self: flex-start; max-width: 94%; }
.az .nachricht { max-width: 100%; }
.az.folge { margin-top: -4px; }
.av { width: 38px; height: 38px; flex: none; }
.avatar { width: 100%; height: 100%; display: block; overflow: visible; }
.avatar .augen { transform-origin: 32px 31px; animation: blinzeln 5s infinite; }
.avatar .led { fill: #8fe39b; animation: led 2.4s infinite; }
.avatar .ports rect { fill: #8fe39b; }
.avatar .ports rect:nth-child(2) { animation: led 1.3s infinite; } .avatar .ports rect:nth-child(4) { animation: led .9s infinite .3s; }
.avatar .hut { transform-origin: 32px 12px; }
.avatar.denkt .kopf, .avatar.denkt .hut { animation: wippen .9s ease-in-out infinite; transform-origin: 32px 54px; }
.avatar.denkt .led { animation: led .35s infinite; fill: #f2d45c; }
.avatar.denkt .augen { animation: schauen 1.8s ease-in-out infinite; }
.loginavatar { width: 96px; height: 96px; margin: 0 auto; }
.loginavatar .avatar .hut { animation: hutheben 3s ease-in-out infinite; }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes led { 50% { fill: #2c5a47; } }
@keyframes wippen { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes schauen { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }
@keyframes hutheben { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-5px) rotate(-6deg); } }
.tippt .nachricht { display: flex; align-items: center; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .avatar * { animation: none !important; } }

/* Wackeln: Bits drehen sich beim Umspringen, Punkt hüpft im Block */
.bit.flip { animation: flip .45s ease-out; }
.bit.wackel.flip { animation: flip .45s ease-out, wackeln 2.4s ease-in-out infinite .45s; }
@keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg) scale(1.15); background: #8fd3ff55; } 100% { transform: rotateX(0); } }
.bit.wackel { animation: wackeln 1.6s ease-in-out infinite; }
@keyframes wackeln { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-2px) rotate(-8deg); } 60% { transform: translateY(1px) rotate(7deg); } }
.strahl .wackelpunkt { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.strahl .wackelpunkt circle { fill: var(--wackel); stroke: var(--tafel); stroke-width: 2; }
.wackeltext { font-size: .9rem; min-height: 1.5em; font-family: var(--mono); }

.formular input.zahl { width: 8em; }
.tafel { min-width: 0; }
@media (max-width: 900px) {
  .hauptbereich { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .bits32 { gap: 1px; max-width: 100%; }
  .bits32 .bit { width: 10px; height: 22px; font-size: .62rem; border-radius: 2px; }
  .bits32 .punkt { width: 3px; }
  .rlabel { width: 48px; font-size: .72rem; } .strich { margin-left: 58px; }
  .rdez { min-width: 0; font-size: .8rem; }
  .rzeile { gap: 6px; flex-wrap: wrap; }
}

/* Anfängerfreundlich: Aufklapper, größere 4/8-Bit-Kästchen */
.aufklapp { margin-top: 16px; border-top: 1px dashed #ffffff22; padding-top: 8px; }
.aufklapp > summary { cursor: pointer; color: var(--kreide-leise); font-weight: 600; }
.aufklapp[open] > summary { margin-bottom: 8px; }
.bitblock.gross .bit { width: 40px; height: 44px; font-size: 1.3rem; }
.bitblock.gross .bit.kopf { height: 20px; font-size: .85rem; }
.fwert .bits.stellen { display: flex; margin-bottom: 2px; }

/* Hinweis, Schnellantworten, Fußzeile */
.login form, .login .karte { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.login .karte { background: var(--papier); color: var(--text); border-radius: 14px; padding: 24px; box-shadow: 0 20px 60px #0005; }
.hinweistext { text-align: left; background: var(--bg); border-radius: 10px; padding: 10px 14px; margin: 12px 0; font-size: .9rem; }
.hinweistext h2 { font-size: 1rem; margin: 4px 0 6px; }
.hinweistext ul { margin: 0; padding-left: 1.1em; } .hinweistext li { margin: 6px 0; }
.bestaetigen { display: flex; gap: 8px; align-items: center; justify-content: center; font-weight: 600; margin: 6px 0; cursor: pointer; }
.bestaetigen input { width: 18px; height: 18px; margin: 0; }
.schnell { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 10px 6px; }
.chipknopf { background: var(--bg); border: 1px solid var(--rand); border-radius: 14px; padding: 3px 10px; font-size: .82rem; cursor: pointer; }
.chipknopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.chipknopf:disabled { opacity: .5; cursor: default; }
.fusszeile { font-size: .75rem; color: var(--leise); padding: 0 10px 8px; }
.link { background: none; border: 0; padding: 0; color: var(--akzent); text-decoration: underline; cursor: pointer; font-size: inherit; }
.eintrag select { margin-left: auto; border: 1px solid var(--rand); border-radius: 6px; background: var(--papier); padding: 2px 4px; }

/* Zehnersystem */
.zehner { display: flex; gap: 14px; margin: 10px 0; }
.zehner .spalte { display: flex; flex-direction: column; align-items: center; gap: 4px; background: #ffffff0d; border-radius: 10px; padding: 8px 12px; }
.zehner .sname { font-weight: 600; } .zehner .swert { font-size: .8rem; color: var(--kreide-leise); }
.zehner .ziffer { font-family: var(--mono); font-size: 2.2rem; color: var(--netz); min-width: 1.2em; text-align: center; }
/* Frage an der Tafel */
.fragebox { margin-top: 22px; padding: 14px 16px; border: 2px solid var(--netz); border-radius: 12px; background: #f2d45c14; max-width: 720px; }
.fragebox.ok { border-color: var(--ok); background: #8fe39b14; } .fragebox.falsch { border-color: var(--falsch); }
.fragekopf { display: flex; gap: 10px; align-items: baseline; font-size: 1.08rem; margin-bottom: 10px; }
.fragekopf p { margin: 0; }
.fragezeile { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fragezeile .textfeld { width: 16em; }
.fragerueck { margin-top: 8px; min-height: 1.3em; font-weight: 600; }
.fragebox.ok .fragerueck { color: var(--ok); } .fragebox.falsch .fragerueck { color: var(--falsch); }
.weiterleiste { display: flex; justify-content: flex-end; margin-top: 24px; max-width: 760px; }
.knopf.weiter { font-size: 1.05rem; padding: 8px 22px; }

.eigentafel { width: 100%; max-width: 900px; border: 0; height: 240px; display: block; background: var(--tafel); color-scheme: dark; }

/* Stellenwerte als Tabelle: Wert oben, Bit darunter, gleiche Spalten */
.stellentab { display: inline-grid; grid-template-columns: auto repeat(var(--spalten), 44px); border: 1px solid #ffffff33; border-radius: 8px; overflow: hidden; margin: 6px 0; }
.stellentab > div { display: grid; place-items: center; padding: 4px 6px; border-right: 1px solid #ffffff1f; border-bottom: 1px solid #ffffff1f; min-height: 34px; }
.stellentab .zl { justify-items: end; place-items: center end; color: var(--kreide-leise); font-size: .82rem; padding: 4px 10px; background: #ffffff08; }
.stellentab .kopfzelle { font-family: var(--mono); color: var(--kreide-leise); font-size: .95rem; background: #ffffff08; }
.stellentab .zaehlt { font-family: var(--mono); color: var(--netz); font-size: .95rem; }
.stellentab > .bits { display: contents; }
.stellentab .bit { width: 100%; height: 46px; border-radius: 0; border: 0; border-right: 1px solid #ffffff1f; border-bottom: 1px solid #ffffff1f; font-size: 1.35rem; background: transparent; }
.stellentab button.bit:hover:not(:disabled) { background: #ffffff18; }
.stellentab .bit.netz { background: #f2d45c2e; }
.stellentab .bit.falsch { background: #ff8f8640; } .stellentab .bit.richtig { background: #8fe39b22; }
.bits.unberuehrt .bit { color: var(--kreide-leise); }
.fehlt, .bits.fehlt .bit { outline: 2px dashed var(--falsch); outline-offset: 2px; }
.rueck { color: var(--falsch); }

#feedback-form h2 { margin: 0 0 6px; font-size: 1.15rem; }
#feedback-form .feld { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-weight: 600; font-size: .9rem; }
#feedback-form select, #feedback-form textarea { width: 100%; border: 1px solid var(--rand); border-radius: 8px; padding: 8px; background: var(--papier); font-weight: 400; }
#feedback-form .reihe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 900px) { #feedback-auf { padding: 4px 8px; } }