ohne eigene Klasse: streckt das innere Label auf volle Hoehe, damit alle drei Tonfall-Karten gleich gross sind (unabhaengig von der Laenge des Beispiel-Textes). */ .kim-tonfall-gruppe > div { display: flex; flex-direction: column; } .kim-tonfall-radio { position: absolute; opacity: 0; pointer-events: none; } .kim-tonfall-karte { display: flex; flex-direction: column; flex: 1; padding: var(--abstand-m); background-color: var(--farbe-box-bg); color: var(--farbe-text); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-m); cursor: pointer; margin-bottom: 0; box-sizing: border-box; } .kim-tonfall-karte:hover { border-color: var(--farbe-akzent); } .kim-tonfall-radio:checked + .kim-tonfall-karte { border-color: var(--farbe-akzent); background-color: var(--farbe-button-sekundaer); box-shadow: inset 0 0 0 1px var(--farbe-akzent); } .kim-tonfall-radio:focus-visible + .kim-tonfall-karte { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; } .kim-tonfall-titel { font-weight: 500; margin: 0 0 var(--abstand-xs); } .kim-tonfall-beispiel { margin: 0; color: var(--farbe-h4); font-size: var(--fs-klein); line-height: var(--zeile-text); } /* --- Passwort-Checkliste -------------------------------- */ .kim-pw-checkliste { list-style: none; padding-left: 0; margin: var(--abstand-xs) 0 0; font-size: var(--fs-klein); } .kim-pw-checkliste li { margin-bottom: 0; } .kim-pw-erfuellt::before { content: "\2713\00a0"; color: var(--farbe-akzent); font-weight: 600; } .kim-pw-offen::before { content: "\25CF\00a0"; color: var(--farbe-h4); } /* --- Klassencode-Eingabe (2 x 4 Zeichen) ----------------- */ .kim-code-eingabe { display: flex; align-items: center; gap: var(--abstand-s); } .kim-code-eingabe input[type="text"] { flex: 0 0 auto; width: 6.5rem; text-align: center; letter-spacing: 0.2rem; font-family: monospace; text-transform: uppercase; } .kim-code-trenner { color: var(--farbe-h4); font-size: var(--fs-text); user-select: none; } /* --- Lehrer-Frontend: Kacheln + Auswahl ----------------- */ .kim-lehrer-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--abstand-m); margin: 0 0 var(--abstand-m); } .kim-lehrer-kachel { display: block; padding: var(--abstand-l) var(--abstand-m); background-color: var(--farbe-box-bg); color: var(--farbe-text); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-m); font-family: inherit; font-size: var(--fs-text); text-align: center; cursor: pointer; } .kim-lehrer-kachel:hover { border-color: var(--farbe-akzent); background-color: var(--farbe-button-sekundaer); } .kim-lehrer-kachel:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; } /* Aktiv-Klasse: dunkle Hervorhebung der gewaehlten Kachel (Fix-Sub-Baustein 10.7-Fix-1). Die zweite Regel patcht die Spezifitaet gegen .kim-lehrer-kachel:hover (gleiches Gewicht, spaetere Definition gewinnt), damit der dunkle Stil auch bei Mauszeiger ueber der aktiven Kachel erhalten bleibt. */ .kim-lehrer-kachel-aktiv, .kim-lehrer-kachel-aktiv:hover { background-color: var(--farbe-akzent); color: var(--farbe-box-bg); border-color: var(--farbe-akzent); } /* Locked-Modus: nach Kachel-Auswahl wird der Container per JS mit .kim-lehrer-kacheln-locked markiert. Alle Kacheln (auch die aktive) sind dann nicht mehr klickbar; Wechsel nur ueber "Zurueck zur Auswahl" (Fix-Sub-Baustein 10.7-Fix-1). */ .kim-lehrer-kacheln-locked .kim-lehrer-kachel { pointer-events: none; cursor: default; } /* --- Lehrer-Frontend: Zurueck-Link + Rollen-Badge ------- */ .kim-lehrer-zurueck { display: inline-block; margin-top: var(--abstand-s); padding: 0; background: none; border: none; color: var(--farbe-link); font-family: inherit; font-size: var(--fs-klein); text-decoration: underline; cursor: pointer; } .kim-rolle-badge { display: inline-block; padding: var(--abstand-xs) var(--abstand-s); background-color: var(--farbe-button-sekundaer); color: var(--farbe-akzent); border-radius: var(--radius-s); font-size: var(--fs-klein); font-weight: 500; } /* --- Admin-Konfigurations-Oberflaeche (Baustein 12.13.c) --- */ /* Komponenten fuer ~/www/admin/kim-konfiguration.html: vier Fieldset-Gruppen mit Settings-Zeilen (Label/Control + Meta), read-only-Tabelle fuer Bausteine, Cache-Beschreibungsliste und Cache-Knoepfe. Alle Werte ueber Token-Vars, keine Verlaeufe, [hidden]-Overrides fuer Container mit explizitem display-Wert (Konvention 10.7-Fix-2/3). */ .kim-admin-fieldset { margin: var(--abstand-m) 0; padding: var(--abstand-m); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-m); background-color: var(--farbe-box-bg); } .kim-admin-fieldset legend { padding: 0 var(--abstand-s); color: var(--farbe-h1-h3); font-weight: 500; font-size: var(--fs-h4); } .kim-admin-settings-liste { margin: 0; } /* Settings-Zeile: 2-Spalten-Grid (Label / Control). Bemerkung und Meta-Info gefliesen unter dem Control auf grid-column 2. Border-bottom trennt Zeilen platzsparend; letzte Zeile ohne Trennlinie. */ .kim-admin-settings-zeile { display: grid; grid-template-columns: 14rem 1fr; column-gap: var(--abstand-m); row-gap: var(--abstand-xs); align-items: start; padding: var(--abstand-s) 0; border-bottom: 1px solid var(--farbe-rahmen); } .kim-admin-settings-zeile:last-child { border-bottom: none; } .kim-admin-settings-zeile[hidden] { display: none; } .kim-admin-settings-zeile > .kim-admin-label-zeile { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: var(--abstand-xs); flex-wrap: wrap; padding-top: var(--abstand-xs); } .kim-admin-label-zeile > label { font-weight: 500; word-break: break-word; } /* Info-Schalter: kleiner runder „?"-Knopf neben dem Label, klappt die Bemerkung ein/aus. Farben ausschliesslich ueber Tokens. */ .kim-admin-info-toggle { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; padding: 0; border: 1px solid var(--farbe-rahmen); border-radius: 50%; background-color: var(--farbe-box-bg); color: var(--farbe-h4); font-size: var(--fs-klein); font-weight: 600; line-height: 1; cursor: pointer; } .kim-admin-info-toggle[aria-expanded="true"] { background-color: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-box-bg); } .kim-admin-info-toggle:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; } .kim-admin-settings-zeile > .kim-admin-control { grid-column: 2; grid-row: 1; } .kim-admin-settings-zeile > .kim-admin-meta-bemerkung, .kim-admin-settings-zeile > .kim-admin-stand, .kim-admin-settings-zeile > .kim-feld-fehler { grid-column: 2; margin: 0; } /* Einheitliche Form-Controls. Checkbox-Spezialfall ueberschreibt die 100%-Breite. textarea-Variante nutzt Monospace fuer JSON- Lesbarkeit. */ .kim-admin-control { font-family: inherit; font-size: var(--fs-text); line-height: var(--zeile-text); padding: var(--abstand-xs) var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-box-bg); color: var(--farbe-text); width: 100%; max-width: 30rem; } textarea.kim-admin-control { max-width: 40rem; font-family: monospace; font-size: var(--fs-klein); resize: vertical; } input[type="checkbox"].kim-admin-control { width: auto; max-width: none; margin: var(--abstand-xs) 0; } .kim-admin-control:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; } /* --- E8: Modell-Dropdown (R-S65) --- */ /* Wrap fuer und Beschriftungs-Span. Native Label-Klick-Toggle, kein for=/id=-Aufwand. */ .kim-uebung-option { display: flex; align-items: flex-start; gap: var(--abstand-s); padding: var(--abstand-xs) var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-box-bg); cursor: pointer; } .kim-uebung-option:hover { background-color: var(--farbe-button-sekundaer); } .kim-uebung-option input[type="radio"] { margin-top: 2px; flex-shrink: 0; } /* Phase 3.5 Plan-Item 2 — Lueckentext-Inline-Input. Wird im Frage-Container an die Stellen der ___-Marker eingesetzt. */ .kim-uebung-luecke-input { display: inline-block; min-width: 80px; padding: 2px 6px; margin: 0 2px; border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-box-bg); font-family: inherit; font-size: inherit; } .kim-uebung-luecke-input:focus { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; } /* Bewertungs-Slot inline (K3). [data-status] steuert Hintergrundfarbe. */ .kim-uebung-bewertung { padding: var(--abstand-s) var(--abstand-m); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-m); margin-bottom: var(--abstand-s); } .kim-uebung-bewertung[hidden] { display: none; } .kim-uebung-bewertung[data-status="korrekt"] { background-color: var(--farbe-status-gruen); } .kim-uebung-bewertung[data-status="falsch"] { background-color: var(--farbe-status-rot); } /* S116/U5 (Plan S115 §3.6): dritter Zustand 'teilweise richtig' — Token --farbe-status-gelb (#F4E8B0) aus :root. */ .kim-uebung-bewertung[data-status="teilweise"] { background-color: var(--farbe-status-gelb); } .kim-uebung-bewertung-status { font-weight: 600; color: var(--farbe-h1-h3); margin-bottom: var(--abstand-xs); } .kim-uebung-bewertung-text { color: var(--farbe-text); font-size: var(--fs-text); } .kim-uebung-bewertung-tipp { margin-top: var(--abstand-xs); color: var(--farbe-h4); font-size: var(--fs-klein); } .kim-uebung-bewertung-tipp[hidden] { display: none; } /* Plan-Item 3 Session 53 Variante B — Weiter-Knopf statt Auto-Pause. Bewertungs-Block bleibt sichtbar bis Schueler:in selbst weiterklickt. */ .kim-uebung-bewertung-aktion { margin-top: var(--abstand-s); text-align: right; } /* Mobile-Anpassungen aller SPA-Komponenten (Header, HomeScreen, TopicSelect, Chat-View) sind in den konsolidierten @media-Block weiter oben (Sub-Baustein 13.6.c) eingearbeitet. */ /* ============================================================ Lehrer-Dashboard — Schueler-Detail-Sheet (Phase 4 · 2.2) ============================================================ Right-Drawer-Sheet mit Backdrop. Eintritt: Klick auf Namen-Spalte in #kim-lehrer-schueler-tbody. Bauteil B65-2.a (Strukturschicht); Daten- und Rest-Sektionen folgen in B65-2.b/c. Keine Verlauefe (User-Praeferenz), platzsparend in der Vertikalen. ============================================================ */ /* Klickbarer Schueler-Name in der Reset-Tabelle. Button-Element mit Link-Optik (Unterstreichung, Cursor pointer). Keine eigene Spalte — Konv. „platzsparende Gestaltung horizontal". */ .kim-lehrer-namen-link { background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; color: var(--farbe-link); text-decoration: underline; cursor: pointer; text-align: left; } .kim-lehrer-namen-link:hover, .kim-lehrer-namen-link:focus-visible { color: var(--farbe-akzent); outline: none; } .kim-lehrer-namen-link:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; } /* Backdrop: voller Viewport, dunkelt Hintergrund ab. Klick schliesst das Sheet (Listener im JS). */ .kim-lehrer-sheet-backdrop { position: fixed; inset: 0; background-color: rgba(26, 37, 53, 0.4); z-index: 1000; } .kim-lehrer-sheet-backdrop[hidden] { display: none; } /* Sheet: Drawer von rechts, halbe Viewport-Breite (max 560px), volle Hoehe, Scroll innerhalb. Slide-in per transform. z-index ueber Backdrop. */ .kim-lehrer-sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 92vw); background-color: var(--farbe-box-bg); border-left: 1px solid var(--farbe-rahmen); box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08); z-index: 1001; display: flex; flex-direction: column; transform: translateX(0); transition: transform 0.2s ease-out; } .kim-lehrer-sheet[hidden] { /* hidden-Attribut schaltet das Sheet vollstaendig aus. transform/transition spielen erst bei Open/Close-Animation. */ display: none; } /* Header-Sektion des Sheets: Title (Schueler-Name) + Sub (Lehrbetrieb) + Schliessen-Knopf rechts. */ .kim-lehrer-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--abstand-s); padding: var(--abstand-m) var(--abstand-m) var(--abstand-s) var(--abstand-m); border-bottom: 1px solid var(--farbe-rahmen); } /* B94-3 (Session 94): Titelblock waechst, PW-Reset + Schliessen rechts. */ .kim-lehrer-sheet-titelblock { flex: 1; min-width: 0; } /* B104-1 (Session 104, Variante B): Aktionsgruppe haelt die beiden Buttons + Schliessen in einer Reihe. align-items:stretch laesst den einzeiligen Bericht-Button auf die Hoehe des zweizeiligen PW-Reset-Buttons mitwachsen, sodass beide gleich hoch sind. Kompaktes horizontales Padding spart Breite. */ .kim-lehrer-sheet-aktionen { display: flex; align-items: stretch; gap: var(--abstand-s); flex-shrink: 0; } .kim-lehrer-sheet-aktionen .kim-btn-sekundaer { padding-left: var(--abstand-m); padding-right: var(--abstand-m); display: inline-flex; align-items: center; justify-content: center; text-align: center; } .kim-lehrer-sheet-bericht { white-space: nowrap; } /* "Passwort zuruecksetzen" bewusst zweizeilig: schmaler -> mehr Platz fuer den Titel (Variante B, Wunsch Herbert S104). */ .kim-lehrer-sheet-pwreset { white-space: normal; line-height: 1.15; max-width: 7.5rem; } .kim-lehrer-sheet-aktionen .kim-lehrer-sheet-close { align-self: flex-start; } /* Schmale Viewports: Kopf darf umbrechen, Aktionsgruppe rutscht unter den Titel und teilt die Breite gleichmaessig. */ @media (max-width: 768px) { .kim-lehrer-sheet-aktionen { flex-wrap: wrap; width: 100%; margin-top: var(--abstand-s); } .kim-lehrer-sheet-aktionen .kim-btn-sekundaer { flex: 1; } .kim-lehrer-sheet-pwreset { max-width: none; } } .kim-lehrer-sheet-title { margin: 0; font-size: var(--fs-h2); color: var(--farbe-h1-h3); line-height: var(--zeile-headline); } .kim-lehrer-sheet-sub { margin: var(--abstand-xs) 0 0 0; color: var(--farbe-h4); font-size: var(--fs-klein); } .kim-lehrer-sheet-close { background: none; border: none; padding: 0; margin: 0; font-size: 1.5rem; line-height: 1; color: var(--farbe-h4); cursor: pointer; } .kim-lehrer-sheet-close:hover, .kim-lehrer-sheet-close:focus-visible { color: var(--farbe-akzent); outline: none; } .kim-lehrer-sheet-close:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; } /* Body-Sektion: scrollt eigenstaendig, vertikal kompakte Abstaende. Inhalt wird in B65-2.b/c gefuellt. */ .kim-lehrer-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: var(--abstand-m); } .kim-lehrer-sheet-platzhalter { color: var(--farbe-h4); font-size: var(--fs-klein); } .kim-lehrer-sheet-leer { color: var(--farbe-h4); font-size: var(--fs-klein); margin: var(--abstand-xs) 0 0 0; } /* B122-2 (S122): Gesamt-Niveau-Zeile im Sheet-Kopf. Eine flache Zeile ueber den Stammdaten-Kacheln — Pille (wiederverwendete .kim-mastery-pill- Klassen, damit Lehrer- und Schueler-Ansicht dieselbe Farbsprache sprechen) plus Zusatz mit Ø Punkte und Themenzahl. */ .kim-lehrer-sheet-gesamt { display: flex; align-items: center; gap: var(--abstand-s); margin-bottom: var(--abstand-s); } .kim-lehrer-sheet-gesamt-zusatz { font-size: var(--fs-klein); color: var(--farbe-h4); } /* kv-Grid im Sheet-Body (Stammdaten-Kacheln). Zwei Spalten, kompakt. */ .kim-lehrer-sheet-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--abstand-s); margin-bottom: var(--abstand-m); } .kim-lehrer-sheet-kv { padding: var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-seitenbg); } .kim-lehrer-sheet-kv-label { font-size: var(--fs-klein); color: var(--farbe-h4); margin-bottom: var(--abstand-xs); } .kim-lehrer-sheet-kv-wert { font-size: var(--fs-text); color: var(--farbe-text); } /* Sektion (h4 + Inhalt). Wird fuer Kompetenz / Sessions / Notizen wiederverwendet. Section-Head ist eine Flex-Zeile mit h4 links und optionalem Meta-Label rechts (z. B. „err. %" als Spalten-Hinweis). */ .kim-lehrer-sheet-section { margin-top: var(--abstand-m); } .kim-lehrer-sheet-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-s); margin: 0 0 var(--abstand-s) 0; } .kim-lehrer-sheet-section-head > h4 { margin: 0; font-size: var(--fs-h4); color: var(--farbe-h4); } .kim-lehrer-sheet-section-meta { font-size: var(--fs-klein); color: var(--farbe-h4); } /* Kompetenz-Sektion: Fach-Bloecke als native

-Akkordeons. Initial alle zu (kein open-Attribut beim Render); Re-Open des Sheets baut die Sektion neu → wieder alle zu. */ .kim-lehrer-sheet-fach-block { margin-bottom: var(--abstand-xs); border-bottom: 1px solid var(--farbe-rahmen); } .kim-lehrer-sheet-fach-block:last-child { border-bottom: none; } .kim-lehrer-sheet-fach-block > summary { /* Native Browser-Marker (Triangle) ausblenden, eigenen Pfeil setzen */ list-style: none; cursor: pointer; padding: var(--abstand-xs) 0; font-size: var(--fs-klein); color: var(--farbe-h1-h3); font-weight: 600; } .kim-lehrer-sheet-fach-block > summary::-webkit-details-marker { display: none; } .kim-lehrer-sheet-fach-block > summary::before { content: "\25B8"; /* ▸ */ display: inline-block; width: 1em; color: var(--farbe-h4); transition: transform 0.15s ease; } .kim-lehrer-sheet-fach-block[open] > summary::before { content: "\25BE"; /* ▾ */ } .kim-lehrer-sheet-fach-block > summary:hover, .kim-lehrer-sheet-fach-block > summary:focus-visible { color: var(--farbe-akzent); outline: none; } .kim-lehrer-sheet-fach-block > summary:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; border-radius: var(--radius-s); } .kim-lehrer-sheet-thema-zeile { display: flex; align-items: center; gap: var(--abstand-s); padding: var(--abstand-xs) 0; font-size: var(--fs-klein); } .kim-lehrer-sheet-thema-name { flex: 1 1 auto; color: var(--farbe-text); /* lange Thema-Namen muessen umbrechen statt den Balken zu verdraengen */ min-width: 0; overflow-wrap: anywhere; } .kim-lehrer-sheet-balken-aussen { flex: 0 0 110px; height: 8px; background-color: var(--farbe-button-sekundaer); border-radius: 4px; overflow: hidden; } .kim-lehrer-sheet-balken-innen { height: 100%; border-radius: 4px; } .kim-lehrer-sheet-balken-innen.gruen { background-color: var(--farbe-status-gruen); } .kim-lehrer-sheet-balken-innen.gelb { background-color: var(--farbe-status-gelb); } .kim-lehrer-sheet-balken-innen.rot { background-color: var(--farbe-status-rot); } .kim-lehrer-sheet-balken-zahl { flex: 0 0 auto; width: 2.5em; text-align: right; color: var(--farbe-h4); font-variant-numeric: tabular-nums; } /* Sessions-Sektion (B65-2.c): Akkordeon innerhalb der Sektion; wenn aufgeklappt zeigt es eine kompakte Tabelle mit den letzten 50 Sessions. Default geschlossen, damit der Sheet-Scroll bei vielen Sessions nicht ausufert. */ .kim-lehrer-sheet-sessions-akkordeon { margin-top: var(--abstand-xs); } .kim-lehrer-sheet-sessions-akkordeon > summary { list-style: none; cursor: pointer; padding: var(--abstand-xs) 0; font-size: var(--fs-klein); color: var(--farbe-link); } .kim-lehrer-sheet-sessions-akkordeon > summary::-webkit-details-marker { display: none; } .kim-lehrer-sheet-sessions-akkordeon > summary::before { content: "\25B8"; /* ▸ */ display: inline-block; width: 1em; color: var(--farbe-h4); } .kim-lehrer-sheet-sessions-akkordeon[open] > summary::before { content: "\25BE"; /* ▾ */ } .kim-lehrer-sheet-sessions-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-klein); margin-top: var(--abstand-xs); } .kim-lehrer-sheet-sessions-tabelle th, .kim-lehrer-sheet-sessions-tabelle td { padding: var(--abstand-xs) var(--abstand-s) var(--abstand-xs) 0; border-bottom: 1px solid var(--farbe-rahmen); vertical-align: top; text-align: left; } .kim-lehrer-sheet-sessions-tabelle th { color: var(--farbe-h4); font-weight: 600; } .kim-lehrer-sheet-sessions-tabelle tr:last-child td { border-bottom: none; } .kim-lehrer-sheet-sessions-tabelle td { color: var(--farbe-text); } /* Status-Badge fuer Sessions: drei Zustaende mit Status-Farben. */ .kim-lehrer-sheet-status-badge { display: inline-block; padding: 0 var(--abstand-xs); border-radius: var(--radius-s); font-size: var(--fs-klein); line-height: 1.5; } .kim-lehrer-sheet-status-badge.aktiv { background-color: var(--farbe-status-gelb); color: var(--farbe-text); } .kim-lehrer-sheet-status-badge.beendet { background-color: var(--farbe-status-gruen); color: var(--farbe-text); } .kim-lehrer-sheet-status-badge.timeout { background-color: var(--farbe-status-rot); color: var(--farbe-text); } /* Notizen-Sektion (B65-2.c): Karten-Liste, read-only. Editor folgt in Bauteil 2.3. */ .kim-lehrer-sheet-notiz-liste { display: flex; flex-direction: column; gap: var(--abstand-s); } .kim-lehrer-sheet-notiz-karte { padding: var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-seitenbg); } .kim-lehrer-sheet-notiz-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-s); margin-bottom: var(--abstand-xs); } .kim-lehrer-sheet-notiz-badge { display: inline-block; padding: 0 var(--abstand-xs); background-color: var(--farbe-button-sekundaer); color: var(--farbe-text); border-radius: var(--radius-s); font-size: var(--fs-klein); line-height: 1.5; } .kim-lehrer-sheet-notiz-datum { font-size: var(--fs-klein); color: var(--farbe-h4); font-variant-numeric: tabular-nums; } .kim-lehrer-sheet-notiz-inhalt { color: var(--farbe-text); font-size: var(--fs-text); /* Zeilenumbrueche aus dem Notiz-Text bewahren */ white-space: pre-wrap; overflow-wrap: anywhere; } .kim-lehrer-sheet-notiz-fuss { margin-top: var(--abstand-xs); font-size: var(--fs-klein); color: var(--farbe-h4); } /* Notizen-Editor (B66-1.a): Anlege-Aktion + Inline-Form. Kompakt gebaut nach Konv. „platzsparende Gestaltung in der Vertikalen". */ .kim-lehrer-sheet-notiz-aktionen { display: flex; justify-content: flex-end; margin-bottom: var(--abstand-s); } .kim-lehrer-sheet-notiz-form { margin-bottom: var(--abstand-s); padding: var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-seitenbg); display: flex; flex-direction: column; gap: var(--abstand-xs); } .kim-lehrer-sheet-notiz-form[hidden] { display: none; } .kim-lehrer-sheet-notiz-form .kim-feld { margin: 0; } .kim-lehrer-sheet-notiz-form textarea { width: 100%; min-height: 5em; resize: vertical; font-family: inherit; font-size: var(--fs-text); } .kim-lehrer-sheet-notiz-form select { font-family: inherit; font-size: var(--fs-text); } .kim-lehrer-sheet-notiz-form .kim-feld-checkbox { display: flex; flex-direction: column; gap: 0; } .kim-lehrer-sheet-notiz-form .kim-feld-checkbox label { display: inline-flex; align-items: center; gap: var(--abstand-xs); font-weight: normal; } .kim-lehrer-sheet-notiz-sichtbar-hinweis { margin: 0 0 0 1.6em; font-size: var(--fs-klein); color: var(--farbe-h4); } .kim-lehrer-sheet-notiz-form-aktionen { display: flex; justify-content: flex-end; gap: var(--abstand-s); margin-top: var(--abstand-xs); } /* Notizen-Editor Bearbeiten (B66-1.b): Karten-internes Toggle. Rechts im Karten-Kopf gruppiert Datum + Bearbeiten-Knopf. */ .kim-lehrer-sheet-notiz-head-rechts { display: inline-flex; align-items: baseline; gap: var(--abstand-xs); } .kim-lehrer-sheet-notiz-karte-edit-btn, .kim-lehrer-sheet-notiz-karte-loesch-btn { font-size: var(--fs-klein); padding: 0 var(--abstand-xs); line-height: 1.5; } /* Notiz-Loesch-Dialog (B66-1.c): Kontext-Anzeige + Inhalts-Auszug. */ .kim-modal-notiz-loesch-kontext { font-size: var(--fs-klein); color: var(--farbe-h4); margin: var(--abstand-xs) 0 0 0; } .kim-modal-notiz-loesch-inhalt { margin: var(--abstand-xs) 0; padding: var(--abstand-xs); background-color: var(--farbe-seitenbg); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); font-size: var(--fs-text); white-space: pre-wrap; overflow-wrap: anywhere; } /* LMS-Aufträge-Sektion (B66-2.a): Karten-Liste + Status-Badges. Strukturell parallel zur Notiz-Karten-Familie; eigene Klassen, damit die zwei Sektionen unabhängig weiterentwickelbar bleiben. */ .kim-lehrer-sheet-lms-liste { display: flex; flex-direction: column; gap: var(--abstand-s); } .kim-lehrer-sheet-lms-karte { padding: var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-seitenbg); } .kim-lehrer-sheet-lms-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--abstand-s); margin-bottom: var(--abstand-xs); } .kim-lehrer-sheet-lms-titel { font-weight: 600; color: var(--farbe-text); overflow-wrap: anywhere; } .kim-lehrer-sheet-lms-status-badge { display: inline-block; padding: 0 var(--abstand-xs); border-radius: var(--radius-s); font-size: var(--fs-klein); line-height: 1.5; flex-shrink: 0; } .kim-lehrer-sheet-lms-status-badge.offen { background-color: var(--farbe-status-gelb); color: var(--farbe-text); } .kim-lehrer-sheet-lms-status-badge.erledigt { background-color: var(--farbe-status-gruen); color: var(--farbe-text); } .kim-lehrer-sheet-lms-meta { display: flex; flex-wrap: wrap; gap: var(--abstand-xs) var(--abstand-s); font-size: var(--fs-klein); color: var(--farbe-h4); font-variant-numeric: tabular-nums; } .kim-lehrer-sheet-lms-meta-feld { white-space: nowrap; } /* Anlege-Aktion + Inline-Form für neuen LMS-Auftrag (B66-2.a). Pattern wie Notiz-Anlege-Form; Felder Titel (Pflicht) + Fälligkeit (optional). */ .kim-lehrer-sheet-lms-aktionen { display: flex; justify-content: flex-end; margin-bottom: var(--abstand-s); } .kim-lehrer-sheet-lms-form { margin-bottom: var(--abstand-s); padding: var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-seitenbg); } .kim-lehrer-sheet-lms-form[hidden] { display: none; } .kim-lehrer-sheet-lms-form .kim-feld { margin-bottom: var(--abstand-s); } .kim-lehrer-sheet-lms-form input[type="text"], .kim-lehrer-sheet-lms-form input[type="date"] { width: 100%; box-sizing: border-box; } .kim-lehrer-sheet-lms-form-aktionen { display: flex; justify-content: flex-end; gap: var(--abstand-s); margin-top: var(--abstand-xs); } /* ============================================================ Lehrer-Sheet · Session-Detail-Sub-View (Phase 4 · B70-1.c) ============================================================ Drill-Down-Ansicht innerhalb des Schueler-Sheets. Eintritt per Klick auf eine Sessions-Tabellen-Zeile (Sektion „KIM- Sessions"). Sub-View ersetzt den Body-Inhalt voll; Zurueck- Knopf rendert die Uebersicht neu (kein Caching). Drei farb-codierte Sub-Bloecke: - Lerncoach: Chat-Bubbles + Auswertungs-DL - Training: Cluster-Akkordeons + Aufgaben-Karten + Ergebnis-Grid - aktive Session: Banner statt Auswertung/Ergebnis Cluster-State-Farben aus Konv. §3.6 Status-Tokens (--farbe-status-gruen/gelb/rot). Vierte Farbe „offen" nutzt den dezenten --farbe-button-sekundaer. Keine Hintergrundverlaeufe (User-Praeferenz). Platzsparend in der Vertikalen, alle Werte ueber Tokens. ============================================================ */ /* Klickbare Sessions-Tabellen-Zeile (Drill-Down-Trigger). */ .kim-lehrer-sheet-sessions-zeile-klickbar { cursor: pointer; } .kim-lehrer-sheet-sessions-zeile-klickbar:hover { background-color: var(--farbe-button-sekundaer); } .kim-lehrer-sheet-sessions-zeile-klickbar:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; } /* --- Zurueck-Leiste oberhalb der Sub-View --------------------- */ .kim-lehrer-sheet-session-detail-leiste { display: flex; justify-content: flex-start; margin-bottom: var(--abstand-s); } .kim-lehrer-sheet-session-detail-zurueck-btn { font-size: var(--fs-klein); } /* --- Gemeinsamer Sub-View-Kopf (Thema + Meta-Kacheln) -------- */ .kim-lehrer-sheet-session-detail-kopf h4 { margin: 0 0 var(--abstand-xs) 0; color: var(--farbe-h4); font-size: var(--fs-h4); } /* Aktive-Session-Banner zwischen Kopf und modus-spez. Block. */ .kim-lehrer-sheet-session-detail-banner { padding: var(--abstand-xs) var(--abstand-s); margin: 0 0 var(--abstand-s) 0; border-left: 3px solid var(--farbe-gold); background-color: var(--farbe-status-gelb); color: var(--farbe-text); font-size: var(--fs-klein); } /* Config-Meta-Zeile (Schwierigkeit / Nachrichten / Fokus). */ .kim-lehrer-sheet-session-detail-meta { margin: 0; color: var(--farbe-h4); font-size: var(--fs-klein); } /* --- Lerncoach-Verlauf (Chat-Bubbles) ------------------------ */ .kim-lehrer-sheet-session-detail-verlauf { display: flex; flex-direction: column; gap: var(--abstand-xs); } .kim-lehrer-sheet-session-detail-bubble { display: flex; flex-direction: column; padding: var(--abstand-xs) var(--abstand-s); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-box-bg); } .kim-lehrer-sheet-session-detail-bubble--kim { border-left: 3px solid var(--farbe-akzent); } .kim-lehrer-sheet-session-detail-bubble--schueler { border-left: 3px solid var(--farbe-button-abgabe); background-color: var(--farbe-seitenbg); } .kim-lehrer-sheet-session-detail-bubble--system { border-left: 3px solid var(--farbe-h4); background-color: var(--farbe-button-sekundaer); } .kim-lehrer-sheet-session-detail-bubble-meta { color: var(--farbe-h4); font-size: var(--fs-klein); margin-bottom: var(--abstand-xs); } .kim-lehrer-sheet-session-detail-bubble-text { color: var(--farbe-text); font-size: var(--fs-text); line-height: var(--zeile-text); white-space: pre-wrap; word-wrap: break-word; } /* --- Auswertung (Definitionsliste, zwei Spalten) ------------- */ .kim-lehrer-sheet-session-detail-auswertung { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--abstand-xs) var(--abstand-s); margin: 0; } .kim-lehrer-sheet-session-detail-auswertung dt { color: var(--farbe-h4); font-size: var(--fs-klein); font-weight: 600; } .kim-lehrer-sheet-session-detail-auswertung dd { margin: 0; color: var(--farbe-text); font-size: var(--fs-klein); white-space: pre-wrap; word-wrap: break-word; } /* --- Training-Cluster (Akkordeon mit Aggregat-Badge) --------- */ .kim-lehrer-sheet-session-detail-cluster { margin-bottom: var(--abstand-xs); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); background-color: var(--farbe-box-bg); } .kim-lehrer-sheet-session-detail-cluster-summary { display: flex; align-items: center; gap: var(--abstand-s); padding: var(--abstand-xs) var(--abstand-s); cursor: pointer; list-style: none; user-select: none; } .kim-lehrer-sheet-session-detail-cluster-summary::-webkit-details-marker { display: none; } .kim-lehrer-sheet-session-detail-cluster-titel { color: var(--farbe-text); font-size: var(--fs-text); font-weight: 600; } /* Aggregat-Badge — fuenf Zustaende (S117/U7: + teilweise). */ .kim-lehrer-sheet-session-detail-cluster-badge { display: inline-block; padding: 0 var(--abstand-xs); border-radius: var(--radius-s); font-size: var(--fs-klein); line-height: 1.5; color: var(--farbe-text); min-width: 5rem; text-align: center; } .kim-lehrer-sheet-session-detail-cluster-badge--gruen { background-color: var(--farbe-status-gruen); } .kim-lehrer-sheet-session-detail-cluster-badge--gelb { background-color: var(--farbe-status-gelb); } .kim-lehrer-sheet-session-detail-cluster-badge--rot { background-color: var(--farbe-status-rot); } /* Teilweise gemeistert (S117/U7, Plan S115 §3.4): gelb mit gestricheltem Rahmen — selbe Halb-Erfolg-Sprache wie die Schueler-Pille [data-status="teilweise-gemeistert"], nur Bestands-Tokens. */ .kim-lehrer-sheet-session-detail-cluster-badge--teilweise { background-color: var(--farbe-status-gelb); border: 1px dashed var(--farbe-h4); } .kim-lehrer-sheet-session-detail-cluster-badge--offen { background-color: var(--farbe-button-sekundaer); } /* --- Aufgaben-Karte innerhalb eines Cluster-Akkordeons ------- */ .kim-lehrer-sheet-session-detail-aufgabe { padding: var(--abstand-s); border-top: 1px solid var(--farbe-rahmen); background-color: var(--farbe-box-bg); } .kim-lehrer-sheet-session-detail-aufgabe-head { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-s); margin-bottom: var(--abstand-xs); } .kim-lehrer-sheet-session-detail-aufgabe-titel { color: var(--farbe-h4); font-size: var(--fs-klein); font-weight: 600; } .kim-lehrer-sheet-session-detail-aufgabe-badge { display: inline-block; padding: 0 var(--abstand-xs); border-radius: var(--radius-s); font-size: var(--fs-klein); line-height: 1.5; color: var(--farbe-text); min-width: 4rem; text-align: center; } .kim-lehrer-sheet-session-detail-aufgabe-badge--gruen { background-color: var(--farbe-status-gruen); } /* Teilweise richtig (S117/U7): gelber Aufgaben-Badge. */ .kim-lehrer-sheet-session-detail-aufgabe-badge--gelb { background-color: var(--farbe-status-gelb); } .kim-lehrer-sheet-session-detail-aufgabe-badge--rot { background-color: var(--farbe-status-rot); } .kim-lehrer-sheet-session-detail-aufgabe-badge--offen { background-color: var(--farbe-button-sekundaer); } /* Aufgaben-Felder (Frage, Optionen, Antworten) als DL. */ .kim-lehrer-sheet-session-detail-aufgabe-felder { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: var(--abstand-xs) var(--abstand-s); margin: 0; } .kim-lehrer-sheet-session-detail-aufgabe-felder dt { color: var(--farbe-h4); font-size: var(--fs-klein); font-weight: 600; } .kim-lehrer-sheet-session-detail-aufgabe-felder dd { margin: 0; color: var(--farbe-text); font-size: var(--fs-klein); white-space: pre-wrap; word-wrap: break-word; } /* =================================================================== Lehrer-Dashboard: Cluster-Audit (Phase 4 · Bauteil 2.6, Session 75) =================================================================== Tab-Leiste zwischen Schueler-Liste und Cluster-Audit innerhalb der Klassen-Sektion #kim-lehrer-pwreset. Plus Zeitraum-Umschalter und drei Aggregat-Tabellen mit Status-Tokens (gruen/gelb/rot/offen). Konv. §1: keine Verlaeufe, keine Hex-Werte ausserhalb :root, keine Emojis. [hidden]-Override-Pflicht fuer flex-Container. */ .kim-lehrer-klasse-tabs { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); margin: var(--abstand-m) 0 var(--abstand-s) 0; border-bottom: 1px solid var(--farbe-rahmen); } .kim-lehrer-klasse-tabs[hidden] { display: none; } .kim-lehrer-klasse-tab { appearance: none; background-color: transparent; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-s) var(--radius-s) 0 0; color: var(--farbe-link); cursor: pointer; font-family: inherit; font-size: var(--fs-text); padding: var(--abstand-s) var(--abstand-m); margin-bottom: -1px; } .kim-lehrer-klasse-tab:hover, .kim-lehrer-klasse-tab:focus-visible { background-color: var(--farbe-button-sekundaer); outline: none; } .kim-lehrer-klasse-tab--aktiv { background-color: var(--farbe-box-bg); border-color: var(--farbe-rahmen); color: var(--farbe-h1-h3); font-weight: 600; } .kim-lehrer-cluster-audit { display: block; margin-top: var(--abstand-s); } .kim-lehrer-cluster-audit[hidden] { display: none; } .kim-lehrer-cluster-audit-zeitraum { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); margin-bottom: var(--abstand-s); } .kim-lehrer-cluster-audit-zeitraum[hidden] { display: none; } .kim-lehrer-cluster-audit-zeitraum-btn { appearance: none; background-color: var(--farbe-button-sekundaer); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); color: var(--farbe-text); cursor: pointer; font-family: inherit; font-size: var(--fs-klein); padding: var(--abstand-xs) var(--abstand-s); } .kim-lehrer-cluster-audit-zeitraum-btn:hover, .kim-lehrer-cluster-audit-zeitraum-btn:focus-visible { background-color: var(--farbe-box-bg); outline: 1px solid var(--farbe-link); } .kim-lehrer-cluster-audit-zeitraum-btn--aktiv { background-color: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-box-bg); font-weight: 600; } .kim-lehrer-cluster-audit-zeitraum-btn--aktiv:hover, .kim-lehrer-cluster-audit-zeitraum-btn--aktiv:focus-visible { background-color: var(--farbe-button-hover); border-color: var(--farbe-button-hover); color: var(--farbe-box-bg); } /* Themen-Filter (S75-N2) */ .kim-lehrer-cluster-audit-thema { align-items: center; display: flex; flex-wrap: wrap; gap: var(--abstand-xs); margin-bottom: var(--abstand-s); } .kim-lehrer-cluster-audit-thema label { color: var(--farbe-text); font-size: var(--fs-klein); } .kim-lehrer-cluster-audit-thema-select { appearance: auto; background-color: var(--farbe-button-sekundaer); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-s); color: var(--farbe-text); cursor: pointer; font-family: inherit; font-size: var(--fs-klein); max-width: 100%; padding: var(--abstand-xs) var(--abstand-s); } .kim-lehrer-cluster-audit-thema-select:focus-visible { outline: 1px solid var(--farbe-link); } .kim-lehrer-cluster-audit-block { margin-top: var(--abstand-m); /* Schmale Viewports: horizontaler Scroll fuer breite Tabellen. */ overflow-x: auto; } .kim-lehrer-cluster-audit-block h4 { color: var(--farbe-h4); font-size: var(--fs-h4); margin: 0 0 var(--abstand-xs) 0; } .kim-lehrer-cluster-audit-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-klein); } .kim-lehrer-cluster-audit-tabelle th, .kim-lehrer-cluster-audit-tabelle td { border: 1px solid var(--farbe-rahmen); padding: var(--abstand-xs) var(--abstand-s); text-align: left; vertical-align: middle; } .kim-lehrer-cluster-audit-tabelle th { background-color: var(--farbe-button-sekundaer); color: var(--farbe-h4); font-weight: 600; } /* Status-Zellen mit Token-Hintergrund. Vier-Werte-Spiegel zur Backend-Status-Logik (gruen/gelb/rot/offen). */ .kim-lehrer-cluster-audit-status { text-align: center; font-variant-numeric: tabular-nums; } .kim-lehrer-cluster-audit-status--gruen { background-color: var(--farbe-status-gruen); } .kim-lehrer-cluster-audit-status--gelb { background-color: var(--farbe-status-gelb); } .kim-lehrer-cluster-audit-status--rot { background-color: var(--farbe-status-rot); } .kim-lehrer-cluster-audit-status--offen { background-color: var(--farbe-button-sekundaer); } /* ============================================================ Klassen-/Schuelerverwaltung — lehrer/klassen.html (Session 102) ============================================================ Eigenstaendige Verwaltungsseite (Muster lehrer/betriebe.html). Reine additive Frontend-Schicht; Backend unveraendert. Token- basiert, keine Verlaeufe, keine Symbole, vertikal platzsparend. Die Liste nutzt .kim-lehrer-tabelle weiter (inkl. der Mobile- Scroll-Regel im konsolidierten @media-Block). Aktions-Knoepfe je Zeile, Code-Zelle mit Restlaufzeit-Countdown, Status-Pillen, Roster-Dialog (Schueler je Klasse). Wiederverwendet werden .kim-betriebe-aktionen / .kim-betriebe-anzahl / .kim-betriebe- warnung / .kim-betriebe-name-hervor / .kim-status-pille. ============================================================ */ /* Sektions-Box analog .kim-lehrer-betriebe (eigener Name fuer semantische Klarheit; gleiche Token-Werte). */ .kim-lehrer-klassen { margin: var(--abstand-l) 0 var(--abstand-m); padding: var(--abstand-m); background-color: var(--farbe-box-bg); border: 1px solid var(--farbe-rahmen); border-radius: var(--radius-m); } .kim-lehrer-klassen h3 { margin: 0 0 var(--abstand-s) 0; color: var(--farbe-h1-h3); font-size: var(--fs-h3); } /* Kopfzeile der Sektion: Titel links, Anlegen-Knopf rechts. */ .kim-klassen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--abstand-s); margin-bottom: var(--abstand-s); } .kim-klassen-kopf h3 { margin: 0; } /* Status-Pille fuer archivierte Klassen (neutral-grau, kein Rot — archiviert ist kein Fehlerzustand). Aktiv nutzt --aktiv (gruen). */ .kim-status-pille--archiv { background-color: var(--farbe-button-sekundaer); color: var(--farbe-h4); } /* Klassencode: dicktengleiche Schrift, gut ablesbar. */ .kim-klassen-code { font-family: "Courier New", Courier, monospace; font-weight: 700; letter-spacing: 0.04em; } /* Code-Zelle stapelt Code, Restlaufzeit und Code-Knopf kompakt. */ .kim-klassen-codezelle { display: flex; flex-direction: column; gap: var(--abstand-xs); align-items: flex-start; } .kim-klassen-restlaufzeit { font-size: var(--fs-klein); color: var(--farbe-h4); font-variant-numeric: tabular-nums; } .kim-klassen-restlaufzeit--abgelaufen { color: var(--farbe-text); font-weight: 700; } /* Die beiden Code-Knoepfe (Oeffnen/Schliessen + Vollbild) nebeneinander, bei wenig Platz umbrechend. */ .kim-klassen-code-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-xs); } /* --- Klassencode-Vollbild-Anzeige (Vorlesen bei der Registrierung) --- Natives