:root { --fg:#222; --muted:#666; --line:#ddd; --ok:#2a7; --warn:#c60; --bad:#a33; --info:#468; --bg-soft:#f6f6f8; }
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; }
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: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: .5rem 0; }
.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; }
table.grid th { text-align: left; font-weight: normal; color: var(--muted); padding: .2rem .5rem; width: 27%; }
table.grid th:first-child { width: 19%; }
table.grid td { vertical-align: top; border: 1px solid var(--line); padding: .4rem .5rem; }
table.grid tr.comp { cursor: pointer; }
table.grid tr.comp:hover td { background: var(--bg-soft); }
table.grid 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; }
@media (max-width: 700px) { table.grid { font-size: .8em; } table.grid th:first-child { width: 25%; } }
/* 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; }
.dialog { background: #fff; border-radius: .5rem; max-width: 44rem; width: 100%; max-height: calc(100vh - 6rem); overflow: auto; padding: .8rem 1rem; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.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: 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; }
.h-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.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: #c33; 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; } .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); }