:root { --fg:#222; --muted:#666; --line:#ddd; --ok:#2a7; --warn:#c60; --bad:#a33; --info:#468; --bg-soft:#f6f6f8; --bg:#fff; color-scheme: only light; }
/* light only, for now: Teams (dark mode) and dark-mode browsers would otherwise give the page a dark canvas under light-tuned colours (Markus 2026-10-20) */
html, body { background: var(--bg); }
body { font-family: system-ui, sans-serif; max-width: 56rem; margin: 0 auto; padding: 0 1rem 3rem; color: var(--fg); line-height: 1.45; }
.loading { padding: 3rem 0; color: var(--muted); }
header.top { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; padding: .8rem 0; border-bottom: 1px solid var(--line); }
header.top h1 { font-size: 1.2rem; margin: 0; }
nav.tabs { display: flex; gap: .4rem; margin: .8rem 0; }
nav.tabs button { font: inherit; padding: .3rem .9rem; border: 1px solid var(--line); background: var(--bg-soft); border-radius: .4rem; cursor: pointer; }
nav.tabs button.active { background: var(--fg); color: #fff; border-color: var(--fg); }
.card { border: 1px solid var(--line); border-radius: .4rem; margin: .6rem 0; }
.card > .head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .5rem .8rem; cursor: pointer; }
.card > .head:hover { background: var(--bg-soft); }
.card > .body { padding: .2rem .8rem .8rem; border-top: 1px solid var(--line); }
.badge { display: inline-block; padding: 0 .45rem; border-radius: .3rem; font-size: .85em; background: #eee; }
.badge.ok { background: #dfd; } .badge.warn { background: #fed; } .badge.bad { background: #fdd; } .badge.info { background: #dde8ff; }
.meta { color: var(--muted); font-size: .9em; }
.task { border-left: 3px solid var(--line); padding: .2rem .8rem; margin: .5rem 0; }
.task .ref { font-family: monospace; background: #eef; padding: 0 .3rem; border-radius: .2rem; }
.md blockquote { border-left: 3px solid #ccc; margin: .5rem 0; padding: .1rem .8rem; color: #444; }
.md .geometry svg { max-width: 100%; height: auto; display: block; margin: .4rem auto; }
/* code blocks (#+begin_src LANG) and inline code (~code~), 2026-10-20 */
.md pre { background: var(--bg-soft); border: 1px solid var(--line); border-radius: .3rem; padding: .5rem .7rem; overflow-x: auto; font-size: .9em; line-height: 1.35; }
.md code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.md :not(pre) > code { background: var(--bg-soft); padding: 0 .25em; border-radius: .2rem; font-size: .92em; }
details summary { cursor: pointer; color: var(--info); }
.row { padding: .4rem 0; border-top: 1px dashed var(--line); }
.row .level { cursor: help; border-bottom: 1px dotted var(--muted); }
ul.plain { list-style: none; padding-left: 0; }
.row .level { margin-left: .5rem; font-size: .85em; }
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .5rem 0; } /* the BTC grid is 2x2 (2026-10-19) */
@media (max-width: 30rem) { .notes-grid { grid-template-columns: 1fr; } }
.notes-grid > .cell { border: 1px solid var(--line); border-radius: .3rem; padding: .3rem .7rem; background: var(--bg-soft); }
.notes-grid > .cell > :first-child { margin-top: .2rem; } .notes-grid > .cell > :last-child { margin-bottom: .2rem; }
.future { opacity: .55; }
.note { margin: .6rem 0; }
.card .card { margin: .4rem 0; }
/* header: tabs left, name right */
header.top { justify-content: space-between; padding: 0; border-bottom: 2px solid var(--line); }
header.top nav.tabs { margin: 0; gap: 0; }
header.top nav.tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: .7rem 1rem; margin-bottom: -2px; color: var(--muted); }
header.top nav.tabs button.active { background: none; color: var(--fg); border-bottom-color: var(--fg); }
header.top .who { padding: .7rem 0; }
/* competence grids */
.grid-section h2 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .92em; }
:is(table.grid > tr, table.grid > tbody > tr) > th { text-align: left; font-weight: normal; color: var(--muted); padding: .2rem .5rem; width: 27%; }
:is(table.grid > tr, table.grid > tbody > tr) > th:first-child { width: 19%; }
:is(table.grid > tr, table.grid > tbody > tr) > td { vertical-align: top; border: 1px solid var(--line); padding: .4rem .5rem; }
table.grid tr.comp { cursor: pointer; }
/* hover (2026-11-02): a translucent grey veil over the cell's own colour – the stand
   colours stay recognisable, only muted; the content is not touched */
table.grid tr.comp:hover > td { box-shadow: inset 0 0 0 100vmax rgba(120, 120, 120, .13); }
:is(table.grid > tr, table.grid > tbody > tr) > td.comp-title { background: var(--bg-soft); }
table.grid td.cell.empty { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f1f1f1 6px, #f1f1f1 12px); }
table.grid td.stand-assessed { background: #c8f0d0; } table.grid td.stand-strong { background: #d9f5df; }
table.grid td.stand-emerging { background: #ecf9ee; } table.grid td.stand-partial { background: #f4f8d8; }
table.grid td.stand-notyet { background: #fff3d6; }
.badge.stand-assessed, .badge.stand-strong { background: #2a7; color: #fff; } .badge.stand-emerging { background: #8d5; }
.badge.stand-partial { background: #dd5; } .badge.stand-notyet { background: #f3c15f; color: #4a3104; }
.badge .icon { display: inline-flex; vertical-align: -.15em; margin-right: .2rem; font-size: 1.1em; }
.cell .desc { color: var(--muted); font-size: .9em; margin: .2rem 0; } .cell .desc p { margin: .2rem 0; }
.cell .chips { display: flex; flex-wrap: wrap; gap: .25rem; margin: .3rem 0 .1rem; }
.chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .75em; padding: .05rem .4rem .05rem .3rem; border-radius: .9rem; border: 1px solid transparent; cursor: help; line-height: 1.5; }
.chip .icon { display: inline-flex; font-size: 1.25em; }
.chip.formal { border-color: #4a5568; font-weight: 600; }
/* abilities: green, yellow-green, blue (with help), amber (not yet: on the way, never red) */
.chip.ab-s { background: #cfead3; color: #1f5e30; } .chip.ab-d { background: #e4f3cf; color: #3f6a1a; }
.chip.ab-u { background: #d9e6fb; color: #2a4a80; } .chip.ab-n { background: #ffe9bf; color: #7a4f08; }
.meta.small { font-size: .8em; }
tr.comp-details td { background: #fafafa; }
tr.comp-details .task { margin: .3rem 0; }
/* below 64 rem the grid stacks (see .grid-stack) */
/* collapsed grids, dialog */
.grid-section h2.head { cursor: pointer; }
.cell a.more { display: block; font-size: .8em; color: var(--info); margin-top: .2rem; }
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; z-index: 10; overflow: auto; }
/* as wide as the page's content (Markus 2026-11-02) */
.dialog { background: #fff; border-radius: .5rem; max-width: 54rem; width: 100%; max-height: calc(100vh - 6rem); overflow: hidden; padding: .4rem 1rem .8rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); box-sizing: border-box; display: flex; flex-direction: column; }
/* the crumbs and the head stay, the body scrolls (2026-11-02) */
.dialog > .crumbs, .dialog > .dialog-head, .dialog > .hi-actions { flex: none; }
.dialog > .dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
/* the stack of dialogs above the head: always a line, the dialog below as a
   link, "… »" in front when deeper, the earlier ones on hover */
.crumbs { display: flex; align-items: center; gap: .25rem; min-height: 1.4rem; font-size: .8em; color: var(--muted); white-space: nowrap; }
.crumbs button.crumb { font: inherit; border: 0; background: none; padding: 0; color: var(--info); cursor: pointer; overflow: hidden; text-overflow: ellipsis; max-width: 30rem; }
.crumbs button.crumb:hover { text-decoration: underline; }
.crumb-more { position: relative; cursor: default; padding: .1rem .2rem; }
.crumb-more .crumb-list { display: none; position: absolute; left: 0; top: 100%; z-index: 5; background: var(--bg); border: 1px solid var(--line); border-radius: .3rem; box-shadow: 0 4px 14px rgba(0,0,0,.15); padding: .3rem .5rem; flex-direction: column; align-items: flex-start; gap: .2rem; }
.crumb-more:hover .crumb-list { display: flex; }
.dialog-head .back { font: inherit; font-size: 1.2rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 .2rem 0 0; }
.dialog-head .back:hover { color: var(--info); }
.card.ausgabe-link > .head { align-items: baseline; }
.dialog-head { display: flex; gap: .5rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .4rem; margin-bottom: .4rem; }
.dialog-head .close { margin-left: auto; font: inherit; font-size: 1.3rem; line-height: 1; border: 0; background: none; cursor: pointer; color: var(--muted); }
/* task header band */
.task { border-left: 0; padding: 0; margin: .7rem 0; }
.task-head { background: var(--bg-soft); border-left: 3px solid #b8c4d6; padding: .3rem .6rem; border-radius: 0 .3rem .3rem 0; margin-bottom: .3rem; }
.task > .md, .task > details, .task > p { padding-left: .6rem; }
.dialog details > summary { margin: .5rem 0; }
.md img { max-width: 100%; height: auto; cursor: zoom-in; }
/* tap-to-enlarge: the image at the full width of the screen (up to 64rem), scrollable, a tap closes */
.lightbox { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.88); overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: .5rem; cursor: zoom-out; }
.lightbox img { display: block; width: 100%; max-width: 64rem; height: auto; margin: auto; }
/* timeline: a vertical line on the left, one branch per day with the date on
   the line's left; the day's entries as boxes to the right */
.timeline { position: relative; margin: 1rem 0 1rem 6.6rem; padding-left: 1.4rem; border-left: 2px solid var(--line); }
.day { position: relative; padding: .15rem 0 .55rem; }
.day::before { content: ""; position: absolute; left: -1.4rem; top: 1.05rem; width: 1.1rem; border-top: 2px solid var(--line); }
.day::after { content: ""; position: absolute; left: calc(-1.4rem - 6px); top: calc(1.05rem - 4px); width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--muted); box-sizing: border-box; }
.day > .date { position: absolute; right: calc(100% + 1.9rem); top: .55rem; white-space: nowrap; color: var(--muted); font-size: .9em; }
.day.future::after { border-style: dashed; }
.entry { border: 1px solid var(--line); border-radius: .4rem; padding: .4rem .7rem; margin: .3rem 0; cursor: pointer; min-width: 0; }
.entry:hover { background: var(--bg-soft); }
.entry.bare { cursor: default; border-style: dashed; }
.entry .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.entry .badges { display: flex; flex-wrap: wrap; gap: .25rem .3rem; margin-top: .25rem; }
.badges .badge { font-size: .75em; padding: 0 .4rem; line-height: 1.6; }
.badges .aus { display: inline-flex; gap: .25rem; cursor: pointer; border-radius: .3rem; }
.badges .aus .badge { transition: box-shadow .1s, filter .1s; }
.badges .aus:hover .badge { filter: brightness(.9); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--info); text-decoration: underline; }
.entry.homework .title { font-weight: normal; }
.entry.chapter { background: var(--bg-soft); border-color: #c9d3e3; }
.entry.chapter .title { color: var(--info); }
.entry.chapter .title .meta { font-weight: normal; }
.dialog-head .badges { display: inline-flex; gap: .25rem; margin-left: .3rem; }
.chip.implicit { opacity: .55; border-style: dashed; border-color: currentColor; }
.badge.lvl-none { background: #eee; color: var(--muted); } .badge.lvl-notyet { background: #ffe9bf; color: #7a4f08; }
.badge.lvl-W { background: #e3f4e6; color: #1f5e30; } .badge.lvl-M { background: #bfe8c8; color: #1f5e30; } .badge.lvl-F { background: #2a7; color: #fff; }
.dialog.wide { max-width: 80rem; min-width: 64rem; }
@media (max-width: 600px) { .timeline { margin-left: 5.2rem; } .day > .date { font-size: .8em; right: calc(100% + 1.7rem); } }
.fold { color: var(--info); font-size: .85em; cursor: pointer; padding: .1rem .7rem; }
.fold:hover { text-decoration: underline; }
.entry.elided { border-style: dashed; color: var(--muted); font-size: .9em; padding: .25rem .7rem; }
.day.elided::after { border-style: dashed; }
/* hand-out header: title line, then kind/date left and state right */
.h-block { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .5rem; }
.h-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; min-width: 0; }
.h-kind { white-space: nowrap; }
.h-block .badges { margin-left: auto; margin-top: 0; display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.h-sub { display: flex; align-items: baseline; gap: .5rem; }
.h-sub .badges { margin-left: auto; margin-top: 0; display: inline-flex; gap: .25rem; }
.card > .head { align-items: flex-start; }
.card > .head > .meta:first-child { padding-top: .1rem; }
.dialog-head .h-block .h-title { font-size: 1.05em; }
/* hand-ins: a row of small buttons under an open task, the reason form */
.submit { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin: .3rem 0 .2rem .6rem; }
button.small, label.btn { font: inherit; font-size: .8em; padding: .1rem .6rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--bg-soft); cursor: pointer; color: var(--fg); }
button.small:hover, label.btn:hover { border-color: var(--info); color: var(--info); }
label.btn input[type=file] { display: none; }
.reject { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; margin-top: .2rem; }
.reject select, .reject input[type=text] { font: inherit; font-size: .85em; padding: .1rem .3rem; }
.reject input[type=text] { flex: 1; min-width: 10rem; }
.badge.sub { border: 1px dashed var(--info); background: #eef3ff; }
/* the hand-in box under an open task */
.handin { border: 1px dashed #b8c4d6; border-radius: .4rem; padding: .4rem .7rem; margin: .4rem 0 .3rem .6rem; background: #fafbfd; }
.handin-title { font-size: .8em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.handin-row { display: flex; gap: .6rem; align-items: baseline; margin: .2rem 0; }
.handin-row > button, .handin-row > label { flex: 0 0 10rem; width: 10rem; box-sizing: border-box; display: inline-block; text-align: center; padding: .15rem .6rem; line-height: 1.4; }
.handin-row.off > button, .handin-row.off > label { opacity: .45; cursor: not-allowed; }
.handin-row.off .meta { font-style: italic; }
.handin .reject { margin-left: 0; }
/* examples of a competence level: one slide at a time */
.carousel { margin: .2rem 0; }
.carousel-head { display: flex; align-items: center; gap: .3rem; font-size: .8em; color: var(--muted); }
.carousel-head .nav { font: inherit; font-size: 1.1em; line-height: 1; padding: 0 .35rem; border: 1px solid var(--line); border-radius: .3rem; background: #fff; cursor: pointer; color: var(--fg); }
.carousel-head .nav:hover { border-color: var(--info); color: var(--info); }
.carousel-head .meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carousel-head .tip { cursor: help; color: var(--info); }
.carousel .md { font-size: .9em; } .carousel .md p { margin: .2rem 0; }
.carousel .md .geometry svg { max-height: 9rem; }
.carousel .slides { display: grid; }
.carousel .slides > .slide { grid-area: 1 / 1; }
.carousel .slides > .slide.hidden { visibility: hidden; }
/* teacher view: student picker in the header */
header.top .who select { font: inherit; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--bg-soft); max-width: 16rem; }
.teacher-note { font-size: .9em; color: var(--muted); border-top: 1px dashed var(--line); margin-top: .5rem; padding-top: .3rem; }
/* the Pflicht box: green = done, yellow = some work open, red = nothing done yet */
.clauses { margin: .4rem 0 .8rem; padding: .4rem .8rem; border-left: 3px solid #e8b04a; background: #fff8ec; border-radius: .2rem; }
.clauses p.meta { margin: 0 0 .3rem; font-weight: 600; color: #8a4b00; }
.clauses.done { border-left-color: #5a5; background: #f0faf0; } .clauses.done p.meta { color: #1f5e30; }
.clauses.none { border-left-color: #d66; background: #fff0ee; } .clauses.none p.meta { color: #8a2a1a; }
/* task states: the two greens count, light yellow asks for more, light red is still needed */
.badge.ok-light { background: #ecf7dc; } .badge.warn-light { background: #fff6dc; } .badge.bad-light { background: #fde7e3; }
.badge .tip { cursor: help; color: var(--info); }
/* the hand-in bar of a hand-out and the hand-in dialog over it */
.backdrop.over { z-index: 12; background: rgba(0,0,0,.45); }
.handin-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; border: 1px dashed #b8c4d6; border-radius: .4rem; padding: .4rem .7rem; margin: .4rem 0 .6rem; background: #fafbfd; }
.handin-bar .handin-title { margin: 0; }
.handin-bar button[disabled] { opacity: .45; cursor: not-allowed; }
.dialog h4 { margin: .7rem 0 .2rem; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hi-task { padding: .25rem 0; border-top: 1px solid var(--line); }
.hi-task label { cursor: pointer; }
.hi-task.done { color: var(--muted); }
.hi-task .reject { margin: .2rem 0 0 1.6rem; width: auto; } .hi-task .reject input[type=text] { min-width: 0; }
.hi-file { margin: .6rem 0; display: flex; gap: .5rem; align-items: center; }
.hi-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.clause { margin: .15rem 0; }
/* Offen tab: the counter in the tab, the open tasks under a hand-out */
nav.tabs button .count { display: inline-block; min-width: 1.5em; height: 1.5em; line-height: 1.5em; padding: 0 .35em; margin-left: .35rem; border-radius: .75em; background: var(--info); color: #fff; font-size: .75em; font-weight: 600; text-align: center; vertical-align: .15em; box-sizing: border-box; }
.entry.open .badges { margin-top: .15rem; }
.open-tasks { margin: .35rem 0 0; font-size: .92em; }
.open-tasks li { padding: .1rem 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.open-tasks .ref { font-family: monospace; background: #eef; padding: 0 .3rem; border-radius: .2rem; font-size: .9em; }
/* hand-in dialog: section heads with "Alles erledigt", the absent button */
.dialog h4 { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.dialog h4 button.small { text-transform: none; letter-spacing: 0; font-size: 1em; }
.hi-absent { text-align: center; margin: .6rem 0 .2rem; }
/* hand-in dialog rows: one line, title cut, badge and reason box at the right */
.hi-line { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.hi-line label, .hi-line .hi-done { display: flex; align-items: center; gap: .35rem; flex: 1; min-width: 0; }
.hi-line .hi-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hi-line .badge { flex: none; white-space: nowrap; }
.hi-line select { flex: none; font: inherit; font-size: .85em; padding: .1rem .3rem; }
.hi-task .reject { margin: .25rem 0 0 1.6rem; } .hi-task .reject input[type=text] { flex: 1; }
/* Pflicht box head: headline left, the hand-in button right; attachment rows */
.clauses-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.clauses-head p.meta { margin: 0; margin-right: auto; } .clauses-head { gap: .4rem; } .clauses-head button.small { flex: none; }
.hi-upload { padding: .2rem 0; border-top: 1px solid var(--line); } .hi-upload button.small { flex: none; padding: 0 .45rem; }
.hi-upload .hi-done { gap: .5rem; }
/* Erwartungen: one line per expectation with the mark, unfolding to the criteria */
.erw { margin: .4rem 0 .8rem; padding: .4rem .8rem; border-left: 3px solid #b8c4d6; background: var(--bg-soft); border-radius: .2rem; }
.erw p.meta { margin: 0 0 .2rem; font-weight: 600; }
.erw details summary { cursor: pointer; margin: .15rem 0; }
.erw details .md { margin: .2rem 0 .3rem; }
.erw ul.plain { margin: 0 0 .3rem; }
.erw li { padding: .1rem 0; }
.erw li .md { display: inline; } .erw li .md p { display: inline; margin: 0; }
.erw li.reached { background: #dfd; border-radius: .3rem; padding: .1rem .3rem; }
/* Projekte: deadline line, the milestone list with Pflicht/Bonus, the dated log */
.projekt-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; margin: .3rem 0 .6rem; }
.verlauf { margin: .3rem 0 .6rem; }
.verlauf li { padding: .1rem 0; }
.verlauf .date { font-variant-numeric: tabular-nums; color: var(--muted); margin-right: .4rem; }
.verlauf .note { color: var(--muted); font-style: italic; }
.hi-partners { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .2rem 0; }
.hi-partners label { display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.hi-partners label.off { color: var(--muted); cursor: default; }
/* images and inlined SVG pictures (TikZ): size from #+attr_roam: :größe */
.md figure.img { margin: .4rem auto; text-align: center; }
.md figure.img svg { max-width: 100%; height: auto; }
.md .img.klein, .md figure.img.klein svg { max-width: 30%; }
.md .img.mittel, .md figure.img.mittel svg { max-width: 50%; }
.md .img.gross, .md figure.img.gross svg { max-width: 80%; }
.md figure.img figcaption { font-size: .9em; color: var(--muted); }
/* the standing (2026-10-19): the missed hand-outs folded at the end of Offen, and the way out */
h3.aktuell { margin: 1rem 0 .25rem; font-size: 1.05em; color: #555; }
details.versaeumt { margin: 1rem 0 0; } details.versaeumt > summary { cursor: pointer; font-weight: 600; color: #a33; }
details.abgegeben { margin: 1rem 0 0; } details.abgegeben > summary { cursor: pointer; font-weight: 600; color: var(--info); }
.nachholen { background: #fff6dc; border-left: 4px solid #e9b949; padding: .5rem .75rem; border-radius: .3rem; font-weight: 600; }
/* a refused hand-in or a failed load: a bar fixed at the bottom of the screen, a tap closes it (2026-10-20) */
.fehler { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: .8rem 1rem; background: #fdd; color: #7a1a1a; border-top: 3px solid var(--bad); font-weight: 600; cursor: pointer; box-shadow: 0 -6px 20px rgba(0,0,0,.15); }
.fehler::after { content: " ×"; color: var(--bad); }
/* the green counterpart: the hand-in was accepted (Markus 2026-10-22: students missed a confirmation) */
.hinweis { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: .8rem 1rem; background: #dfd; color: #175a35; border-top: 3px solid var(--ok); font-weight: 600; cursor: pointer; box-shadow: 0 -6px 20px rgba(0,0,0,.15); }
.hinweis::after { content: " ×"; color: var(--ok); }
button.small.primary { background: var(--info); color: #fff; border-color: var(--info); }
button.small.primary:hover { background: #355a8a; color: #fff; }
button.small[disabled] { opacity: .45; cursor: not-allowed; }
/* phones and tablets (2026-10-20, Markus: the app is used on mobile devices): touch targets of at
   least 2.6rem, inputs at 16px so iOS does not zoom, dialogs over the full screen with the
   buttons fixed at the bottom, the timeline without its date gutter, the tabs scrollable */
@media (pointer: coarse) {
  button.small, label.btn, .carousel-head .nav, header.top .who select { font-size: 1em; padding: .5rem .9rem; min-height: 2.6rem; }
  .dialog-head .close { font-size: 1.8rem; padding: .3rem .6rem; min-width: 2.6rem; min-height: 2.6rem; }
  .hi-line select, .reject select, .reject input[type=text] { font-size: 16px; padding: .4rem .5rem; min-height: 2.4rem; }
  input[type=checkbox] { width: 1.35rem; height: 1.35rem; margin: .3rem .4rem .3rem .1rem; }
  .hi-task label { min-height: 2.6rem; }
  .hi-line .badge { font-size: .8em; }
  .hi-upload button.small { padding: .3rem .7rem; }
  nav.tabs button .count { min-width: 1.6em; height: 1.6em; line-height: 1.6em; }
}
@media (max-width: 600px) {
  body { padding: 0 .7rem 3rem; }
  /* the tabs scroll sideways on their own line, the name goes below them */
  header.top { flex-wrap: wrap; gap: 0; }
  header.top nav.tabs { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  header.top nav.tabs button { padding: .7rem .7rem; white-space: nowrap; }
  header.top .who { flex: 1 1 100%; padding: .35rem 0; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the date above the day's boxes instead of beside them: the cards get the width */
  .timeline { margin: .8rem 0 1rem .4rem; padding-left: .9rem; }
  .day { padding: .1rem 0 .5rem; }
  .day > .date { position: static; display: block; right: auto; font-size: .8em; margin: .1rem 0 .1rem; }
  .day::before { left: -.9rem; top: .75rem; width: .6rem; }
  .day::after { left: calc(-.9rem - 6px); top: calc(.75rem - 4px); }
  .entry { padding: .45rem .6rem; }
  /* dialogs: the whole screen, scrolling inside, the actions always within reach */
  .backdrop { padding: 0; align-items: stretch; }
  .dialog { max-width: none; max-height: 100vh; max-height: 100dvh; border-radius: 0; padding: .6rem .7rem; box-shadow: none; }
  .dialog-head .back { font-size: 1.8rem; padding: .3rem .6rem .3rem 0; min-height: 2.6rem; }
  .hi-actions { background: var(--bg); padding: .6rem .7rem 0; margin: .6rem -.7rem 0; border-top: 1px solid var(--line); }
  .hi-actions button { flex: 1; }
  .clauses-head { flex-wrap: wrap; }
  .clauses-head button.small { flex: 1 1 100%; margin-top: .3rem; }
  .handin-row > button, .handin-row > label { flex: 1 1 auto; width: auto; }
  .md .img.klein, .md figure.img.klein svg { max-width: 60%; }
  .md .img.mittel, .md figure.img.mittel svg { max-width: 85%; }
  .md .img.gross, .md figure.img.gross svg { max-width: 100%; }
  .fehler { padding: .8rem 2.2rem .8rem .8rem; }
}
/* Material eines Auftrags: eine Zeile echter Reiter über den Aufgaben (Markus 2026-10-21), seitlich
   scrollbar, wenn sie nicht hineinpassen. Die Grundlinie ist ein 1px-Hintergrund der Leiste; der
   aktive Reiter deckt sie mit seinem unteren Rand in Seitenfarbe und hängt so am Feld darunter. */
.tabbed { display: flex; flex-direction: column; margin-top: .3rem; }
.tabstrip { display: flex; align-items: flex-end; gap: .2rem; overflow-x: auto; scrollbar-width: thin; padding: .2rem .4rem 0;
  background: linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat; }
.tabstrip .tab { flex: 0 0 auto; white-space: nowrap; font: inherit; color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: .4rem .4rem 0 0; padding: .35rem .8rem; cursor: pointer; }
.tabstrip .tab:hover { color: var(--fg); }
.tabstrip .tab.on { background: var(--bg); color: var(--fg); font-weight: 600; border-bottom-color: var(--bg); }
.tabpane { padding-top: .5rem; }

/* Aktuell (2026-10-31): the last lesson on top, one timeline of the mandatory
   work below; settled days fold to one line with the icons at the right */
.letzte-stunde { margin: .5rem 0 1rem; padding: .2rem .9rem .6rem; border: 1px solid var(--line); border-radius: .5rem; background: #fafafa; }
.letzte-stunde > h3.aktuell { cursor: pointer; margin: .5rem 0 .4rem; }
.letzte-stunde > h3.aktuell:hover { text-decoration: underline; }
.order { display: flex; justify-content: flex-end; margin: .8rem 0 0; font-size: .9em; }
.order .toggle { display: inline-flex; border: 1px solid var(--info); border-radius: 1rem; overflow: hidden; }
.order .seg { padding: .15rem .7rem; border: 0; background: #fff; color: var(--info); cursor: pointer; font: inherit; font-size: .95em; }
.order .seg + .seg { border-left: 1px solid var(--info); }
.order .seg:hover { background: #eef3ff; }
.order .seg.active { background: var(--info); color: #fff; }
/* the branch of a day is an arrow: line → entry "ausgegeben", entry → line "fällig" */
.timeline.aktuell .day::before { content: none; }
.timeline.aktuell .day > .arrow { position: absolute; left: -1.4rem; top: 1.05rem; width: 1.1rem; border-top: 2px solid var(--line); }
.timeline.aktuell .day > .arrow::after { content: ""; position: absolute; top: -5px; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.timeline.aktuell.by-ausgabe .day > .arrow::after { right: -2px; border-left: 7px solid var(--muted); }
.timeline.aktuell.by-frist .day > .arrow::after { left: -2px; border-right: 7px solid var(--muted); }
 (pointer: coarse) { .timeline.aktuell .day > .arrow { left: -.9rem; top: .75rem; width: .6rem; } }
.entry.folded { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .25rem .7rem; color: var(--muted); font-size: .9em; }
.entry.folded .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; }
.entry.folded.run { border-style: dashed; }
.entry.folded:hover .title { text-decoration: underline; }
.entry.folded .marks { display: inline-flex; gap: .3rem; flex: 0 0 auto; }
.mark { display: inline-flex; align-items: center; gap: .15rem; padding: 0 .35rem; border-radius: .75em; font-size: .85em; line-height: 1.6; }
.mark .icon { display: inline-flex; font-size: 1.1em; }
.mark.fehlt { background: #fdd; color: #a33; }
.mark.abgegeben { background: #dde8ff; color: #246; }
.mark.ok { color: #2a7; }
/* the count turns red only when something is late; the summary sentence; the late mark */
nav.tabs button .count.late { background: #c33; }
p.summary { margin: .9rem 0 0; padding: .7rem 1rem; font-size: 1.1em; border: 2px solid var(--info); border-radius: .5rem; background: #eef3ff; }
p.summary.late { border-color: #c33; background: #fde7e3; }
p.summary.done { border-color: var(--ok); background: #ecf7dc; }
.mark.late { background: #fdd; color: #a33; margin-left: .45rem; font-size: .8em; vertical-align: .1em; }
/* an opened run: a strip at the right, across its days, folds it again */
.run-open { position: relative; padding-right: 1.6rem; }
.run-open > .fold-side { position: absolute; right: 0; top: .2rem; bottom: .4rem; width: 1.25rem; writing-mode: vertical-rl; display: flex; align-items: center; justify-content: center; font-size: .8em; color: var(--info); cursor: pointer; border-left: 1px dashed var(--line); border-radius: 0 .3rem .3rem 0; }
.run-open > .fold-side:hover { background: #eef3ff; text-decoration: underline; }
/* the participation of the last lesson, under its title */
.letzte-stunde .mitarbeit { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: -.1rem 0 .6rem; font-size: .95em; }

/* Schularbeit (spec/schularbeit.org, Abschnitt 6): the term line in Aktuell, the Stoff card in a lesson, the Stoff view */
.termin { margin: .3rem 0 .6rem; padding: .45rem .8rem; border: 1px solid #c9d3e3; border-radius: .5rem; background: var(--bg-soft); cursor: pointer; }
.termin:hover { border-color: var(--info); }
.termin .link { color: var(--info); text-decoration: underline; }
.stoff-card .small { margin-top: .3rem; }
table.grid.stoff th:not(:first-child) { width: auto; }
.vorbereiten { margin: .6rem 0; padding: .45rem .8rem; border-radius: .5rem; background: #fff3d6; }
.vorbereiten.done { background: #d9f5df; }

/* The competence grid (Markus 2026-11-01): the table from 64 to 80 rem with rotated titles and a hover overlay; below 64 rem one folding block per competence, the levels one after the other */
.grid-stack { display: none; }
@media (max-width: 64rem) { .dialog.wide { min-width: 0; } .grid-wide { display: none; } .grid-stack { display: block; } }
.grid-hint { margin: .2rem 0 .6rem; }
/* the full 80 rem (window ≥ 82 rem, the backdrop pads 1 rem a side): titles as text */
table.grid .rot { display: none; }
/* 64 to 82 rem: the title column narrow, the title rotated in two lines filling
   the row's height (word-wrapped, the ellipsis after the second line), the full
   title as an overlay on hover */
@media (min-width: 64rem) and (max-width: 81.99rem) {
  :is(table.grid > tr, table.grid > tbody > tr) > th { width: auto; }
  :is(table.grid > tr, table.grid > tbody > tr) > th:first-child { width: auto; }
  :is(table.grid > tr, table.grid > tbody > tr) > td.comp-title { width: auto; min-height: 9.5rem; position: relative; padding: 0; }
  table.grid { grid-template-columns: 2.9rem repeat(3, minmax(0, 1fr)); }
  table.grid.cols-2 { grid-template-columns: 2.9rem repeat(2, minmax(0, 1fr)); }
  table.grid.cols-1 { grid-template-columns: 2.9rem minmax(0, 1fr); }
  table.grid .rot { display: -webkit-box; position: absolute; top: .35rem; bottom: .35rem; left: .4rem; width: 2.4em; writing-mode: vertical-rl; transform: rotate(180deg); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.2; font-weight: 600; font-size: .9em; cursor: default; }
  table.grid td.comp-title .full { display: none; position: absolute; left: 100%; top: 0; z-index: 5; min-width: 16rem; max-width: 26rem; padding: .5rem .7rem; background: #fff; border: 1px solid var(--line); border-radius: .4rem; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
  table.grid td.comp-title:hover .full { display: block; }
}
.comp-stack { margin: .35rem 0; border: 1px solid var(--line); border-radius: .4rem; padding: .2rem .6rem; }
.comp-stack > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.comp-stack .lvl { margin: .35rem 0 .35rem 1.2rem; padding: .3rem .5rem; border-left: 3px solid var(--line); border-radius: 0 .3rem .3rem 0; }
.comp-stack .lvl-name { font-size: .78em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.comp-stack .lvl.stand-assessed { background: #c8f0d0; } .comp-stack .lvl.stand-strong { background: #d9f5df; }
.comp-stack .lvl.stand-emerging { background: #ecf9ee; } .comp-stack .lvl.stand-partial { background: #f4f8d8; }
.comp-stack .lvl.stand-notyet { background: #fff3d6; }

/* #+begin_auswahl: no bullets, a square to tick in front of every option */
ul.choice { list-style: none; padding-left: .2rem; margin: .4rem 0; }
ul.choice li { display: flex; gap: .45rem; align-items: baseline; margin: .2rem 0; }
ul.choice .box { font-size: 1.15em; line-height: 1; flex: 0 0 auto; }
ul.choice li > p { margin: 0; }

/* info boxes with an icon at the left (2026-11-01): ! attention, i information, ✓ done */
.box-icon { flex: 0 0 auto; display: inline-flex; font-size: 1.45em; line-height: 1; margin-top: .05em; }
.box-text { flex: 1; min-width: 0; }
p.summary, .termin, .vorbereiten, .nachholen { display: flex; gap: .65rem; align-items: flex-start; }
p.summary .box-icon { color: var(--info); }
p.summary.late .box-icon { color: #c33; }
p.summary.done .box-icon { color: var(--ok); }
.nachholen .box-icon, .vorbereiten .box-icon { color: #b8860b; }
.vorbereiten.done .box-icon { color: var(--ok); }
/* an upcoming Schularbeit: prominent, yellow, the exclamation mark */
.termin { background: #fff3c4; border: 2px solid #e9b949; font-size: 1.05em; padding: .6rem .9rem; margin: .8rem 0 .4rem; }
.termin:hover { border-color: #c99a1e; }
.termin .box-icon { color: #b8860b; font-size: 1.6em; }

/* the Stoff view's ticks and filter (2026-11-01) */
.stoff-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .5rem 0; }
.stoff-filter .toggle { display: inline-flex; border: 1px solid var(--line); border-radius: .4rem; overflow: hidden; }
.stoff-filter .seg { font: inherit; font-size: .9em; padding: .25rem .6rem; border: 0; border-left: 1px solid var(--line); background: #fff; cursor: pointer; }
.stoff-filter .seg:first-child { border-left: 0; }
.stoff-filter .seg.active { background: var(--info); color: #fff; }
table.grid.stoff > tr > td.cell, table.grid.stoff > tbody > tr > td.cell, .comp-stack .lvl { position: relative; }
/* in the Stoff view the footer leaves room for the tick at its right and is at least as high, so its last line ends level with the tick */
table.grid.stoff .cell-foot, .comp-stack .lvl .cell-foot { padding-right: 2.6rem; min-height: 2.1rem; }
button.haken { position: absolute; right: .45rem; bottom: .45rem; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: #b5b5b5; font-size: 1.15rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
button.haken .icon { display: inline-flex; }
button.haken.an { color: var(--ok); border-color: var(--ok); }
button.haken:hover { color: #d2d2d2; background: #fafafa; }
button.haken.an:hover { color: #6fcf8f; }
button.haken:disabled { cursor: default; opacity: .7; }

/* a level cell (2026-11-01): the content on top, the status (stand, observations, tasks) at the bottom */
/* the grid table laid out as a CSS grid: every cell of a row stretches to the row's height */
table.grid { display: grid; }
@media (min-width: 82rem) {
  table.grid { grid-template-columns: 19% repeat(3, minmax(0, 1fr)); }
  table.grid.cols-2 { grid-template-columns: 19% repeat(2, minmax(0, 1fr)); }
  table.grid.cols-1 { grid-template-columns: 19% minmax(0, 1fr); }
}
/* only the grid's own rows and cells: tables inside a cell's content stay tables */
table.grid > tbody, table.grid > tr, table.grid > tbody > tr { display: contents; }
:is(table.grid > tr, table.grid > tbody > tr) > th { width: auto; }
:is(table.grid > tr, table.grid > tbody > tr) > td { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
:is(table.grid > tr, table.grid > tbody > tr) > td.comp-title { border-left: 1px solid var(--line); }
:is(table.grid > tr, table.grid > tbody > tr):nth-child(2) > td { border-top: 1px solid var(--line); }
:is(table.grid > tr, table.grid > tbody > tr) > td.cell { display: flex; flex-direction: column; }
.cell-inner { flex: 1; display: flex; flex-direction: column; }
.cell-foot { margin-top: auto; padding-top: .35rem; display: flex; flex-direction: column; justify-content: flex-end; }
/* the stand at the very top right of the cell */
.cell-inner > .stand { align-self: flex-end; margin-bottom: .2rem; }

/* a table inside a level cell's content (examples, level texts): a plain small table */
table.grid td.cell table { border-collapse: collapse; margin: .3rem 0; }
table.grid td.cell table th, table.grid td.cell table td { border: 1px solid var(--line); padding: .1rem .4rem; width: auto; }
/* a project's milestones (2026-11-02): one fold each, in the lesson and in the
   hand-out dialog alike; a reached one starts folded */
details.milestone { margin: .7rem 0; }
details.milestone > summary { background: var(--bg-soft); border-left: 3px solid #b8c4d6; padding: .3rem .6rem; border-radius: 0 .3rem .3rem 0; color: var(--fg); }
details.milestone > summary .ref { font-family: monospace; background: #eef; padding: 0 .3rem; border-radius: .2rem; }
details.milestone > summary .badge { margin-left: .2rem; }
details.milestone[open] > summary { margin-bottom: .3rem; }
details.milestone > .task { margin-left: 1rem; }
/* admonitions (2026-11-02): a bar at the side in the kind's colour */
.admonition { border-left: 4px solid #b8c4d6; padding-left: 1em; margin: .6rem 0 .6rem 1em; }
.admonition > .admonition-title { margin: .2rem 0; }
.admonition.definition { border-left-color: #468; }
.admonition.satz { border-left-color: #a33; }
.admonition.beweis { border-left-color: #999; }
.admonition.bemerkung { border-left-color: #c60; }
.admonition.merksatz { border-left-color: #2a7; }
.admonition.beispiel { border-left-color: #8a6bbf; }

/* the views of a hand-out (2026-11-02): the switch, then the step view –
   the milestones as a bar with a dot per task or step, the page, back/on */
.ansicht { display: flex; gap: .3rem; justify-content: flex-end; margin: .2rem 0 .5rem; }
.ansicht button.small.on { background: var(--info); color: #fff; border-color: var(--info); }
.wt-nav { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; padding: .4rem .6rem; background: var(--bg-soft); border-radius: .4rem; margin-bottom: .6rem; }
.wt-group { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.wt-dots { display: flex; gap: .3rem; }
.wt-label { font-family: monospace; font-size: .85em; color: var(--muted); cursor: pointer; border: 0; background: none; padding: 0; }
.wt-label:hover { color: var(--info); text-decoration: underline; }
.wt-group.cur .wt-label { color: var(--fg); font-weight: 600; }
.wt-dot { width: .8rem; height: .8rem; padding: 0; border-radius: 50%; border: 1px solid #b8c4d6; background: #fff; cursor: pointer; }
.wt-dot.ok { background: #8fd19e; border-color: #5bb06f; }
.wt-dot.warn { background: #f6d77a; border-color: #d9b440; }
.wt-dot.cur { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--info); }
.wt-dot:hover { border-color: var(--info); }
.wt-head { background: var(--bg-soft); border-left: 3px solid #b8c4d6; padding: .3rem .6rem; border-radius: 0 .3rem .3rem 0; margin-bottom: .4rem; }
.wt-head .ref { font-family: monospace; color: var(--muted); }
/* a fixed height: the page scrolls, back and on stay where they are */
.wt-page { height: clamp(10rem, calc(100vh - 27rem), 40rem); overflow: auto; }
.wt-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); padding-top: .4rem; margin-top: .6rem; }
@media (max-width: 600px) { .wt-dot { width: 1.1rem; height: 1.1rem; } }
.clauses-head.bare { justify-content: flex-end; margin: .3rem 0; }