und nur diese Zeile nimmt sie * weg. Wer sie streicht, hat die Stempel über dem Übeblatt. */ body.kp-present #palette, body.kp-present #volta-plus, body.kp-present #ctx-menu { display: none !important; } body.kp-present #score-area { pointer-events: none; } body.kp-present .main-col { margin-left: 0 !important; } #lp-strip { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 89; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: #fff; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; color: #26241f; } #lp-strip b { font-size: 16px; font-weight: 900; } #lp-strip .lp-dots { display: flex; gap: 5px; } #lp-strip .lp-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e9e8e4; } #lp-strip .lp-dots i.cur { background: #e0a020; } #lp-strip .lp-dots i.done { background: #1f9e6a; } #lp-strip .lp-flex { flex: 1; } #lp-strip button { border: none; background: none; font: inherit; font-size: 17px; color: #827e76; cursor: pointer; padding: 6px 11px; border-radius: 9px; } #lp-strip button:hover { color: #26241f; background: rgba(0, 0, 0, .05); } #lp-card { position: fixed; inset: 52px 0 0 0; z-index: 88; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .95); padding: 22px; overflow-y: auto; } #lp-card[hidden] { display: none; } #lp-card.lp-top { align-items: flex-start; background: transparent; pointer-events: none; } #lp-card.lp-top .lp-box { pointer-events: auto; box-shadow: 0 14px 34px -10px rgba(28, 27, 24, .28); } .lp-box { max-width: 760px; width: 100%; background: #fff; border: 1.5px solid #e9e8e4; border-radius: 18px; padding: 30px 34px; box-shadow: 0 18px 44px -14px rgba(28, 27, 24, .18); font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; font-size: 17px; line-height: 1.75; color: #26241f; } .lp-box p { margin: 0 0 14px; } .lp-box.lp-slim { max-width: 620px; padding: 20px 24px; font-size: 15px; } .lp-big { display: block; width: 100%; margin-top: 14px; padding: 16px; border: none; border-radius: 14px; background: #1f9e6a; color: #fff; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(31, 158, 106, .5); transition: transform .16s cubic-bezier(.34, 1.4, .5, 1); } .lp-big:hover { transform: translateY(-2px); } .lp-mini { margin-top: 10px; border: 1.5px solid #e9e8e4; background: #fff; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 800; color: #26241f; cursor: pointer; } .lp-mini:hover { border-color: #26241f; } .lp-fin { font-size: 19px; text-align: center; } #lp-next { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 90; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; } #lp-next[hidden] { display: none; } .lp-nextbox { display: flex; flex-direction: column; gap: 10px; align-items: center; background: #fff; border: 2px solid #1f9e6a; border-radius: 16px; padding: 14px 22px; box-shadow: 0 16px 40px -12px rgba(28, 27, 24, .3); color: #26241f; } .lp-nextbox b { font-size: 17px; } .lp-row { display: flex; gap: 10px; align-items: center; } .lp-row .lp-big { width: auto; margin-top: 0; padding: 12px 26px; } .lp-row .lp-mini { margin-top: 0; } /* Warte-Modus (js/klavierpraxis.js): die Übe-Pille unten mittig */ .se-warte.on { background: color-mix(in srgb, #1f9e6a 12%, #fff); box-shadow: inset 0 0 0 1.5px #1f9e6a; color: #1f9e6a; } .se-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); z-index: 92; background: var(--t-ink); color: #fff; padding: 11px 18px; border-radius: 13px; font-size: 14px; font-weight: 800; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--bounce); display: flex; align-items: center; gap: 9px; font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; } .se-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); } .se-toast svg { width: 17px; height: 17px; } @media (max-width: 760px) { body.se-on .main-col { margin-left: 0; } .se-col { display: none; } /* ⚠️⚠️ Die Fußzeile war hier VERGESSEN: `body.se-on .statusbar` rückt * sie um die Breite der Seitenspalte ein (`--se-col`, Vorgabe 280+16) — * und die Spalte gibt es hier gar nicht. Auf 390 px blieben 94 px für * alles; die beiden Auswahlfelder fielen auf 12 px (unbedienbar) und * die Seite lief auf 421 px. ⚠️ Die Regel MUSS hierher, nicht in den * 700er Block weiter oben: dort verliert sie bei gleicher Spezifität * lautlos gegen die spätere Grundregel — genau die Falle, die schon * die 16-px-Felder der Nachbereitung gekostet hat (v0.361). */ body.se-on .statusbar { padding-left: 14px; } } /* ---------- Ein HANDY, in beiden Lagen ---------- * ⚠️⚠️ **Zwei Entscheidungen von Lars standen längst im Code und feuerten * im Querformat nicht** — beide prüfen die BREITE, und ein Handy quer ist * 844 px breit: „kein Notensatz auf Smartphone-Größe" (M4, 2026-07-16, * `max-width: 700px`) und die Optionsspalte (`max-width: 760px`). Deshalb * bekam das Blatt auf Lars' Gerät nur 33 % des Schirms — die Spalte allein * nahm 280 px, also 30 % der Breite (gemessen 03.08.2026). * Die Bedingung fragt deshalb nach dem GERÄT, nicht nach einer Kante: * grober Zeiger UND (schmal ODER flach). Ein Tablet quer hat über 520 px * Höhe und ist nicht gemeint, ein Handy quer schon. * ⚠️ Der Block muss NACH den Grundregeln stehen, die er überschreibt — * bei gleicher Spezifität gewinnt die spätere. */ @media (pointer: coarse) and (max-width: 760px), (pointer: coarse) and (max-height: 520px) { /* Bearbeiten fällt weg, Wiedergabe bleibt: `se-onlyedit` trägt die Editier-Gruppen der Leiste ohnehin schon, der Stift steht daneben. Play, Tempo, Metronom, Vollbild, Bibliothek und Speichern bleiben — „Editor nur zum Abspielen" (Lars, 03.08.2026). */ #palette, #dur-bar, #se-pencil, .se-onlyedit { display: none !important; } /* Die Optionsspalte ist auf dem Handy kein Seitenstreifen, sondern ein Drittel der Breite. Sie hat ihren Weg über das ☰-Menü. */ .se-col, .se-resizer { display: none !important; } body.se-on .main-col { margin-left: 0 !important; } body.se-on .statusbar { padding-left: 14px; } /* ⚠️ **Die Fußzeile SCHWEBT, statt zu verschwinden** (Lars: „erstmal die * Fußzeile"). Sie ganz zu entfernen ginge nicht ohne Verlust: `#status` * ist die EINE Statuszeile der App — acht Dateien schreiben hinein, und * ohne sie wären Fehlermeldungen beim Öffnen, Scannen und Speichern * unsichtbar. Und `#vs-page`/`#vs-orient` gehören NICHT bloß zum Druck: * sie ändern das Bild am Schirm (`refitAfterPageChange`), im * Export-Dialog gibt es sie gar nicht. Aus dem Fluss genommen kostet die * Zeile 0 px Höhe, verliert nichts und deckt nur den untersten Blattrand * — den man wegrollen kann, weil `#score-scroll` unten Luft bekommt. */ /* ⚠️ Im Hochformat brach die Zeile zweizeilig um (gemessen 68 px) und verdeckte dabei den Werkzeug-Griff: der Lehrkraft-Fußzeile bleiben dort 318 px, und die Ansichts-Wahl trägt VIER Elemente (277 px), weil `schuelereditor.js` den Bildschirm-Zoom hineinzieht. Für `#status` blieb nichts übrig — also genau das, wofür die Zeile da ist. Rangfolge auf dem Handy: Meldungen > Zoom > Seiten/Fortlaufend > Papiergeometrie. Die letzten beiden fallen; sie ändern zwar auch das Bild am Schirm, aber wo nicht mehr gesetzt wird, wird auch nicht mehr paginiert. Die Versionsnummer steht im Marken-Menü — `#app-version` bleibt als ELEMENT, weil `versionText()` sie dort ausliest. */ /* ⚠️ Und dieselbe Falle ein drittes Mal: v0.356 nahm „Problem melden" und „Über · Impressum" auf dem Handy aus der Fußzeile (sie stehen im Marken-Menü) — an der BREITE festgemacht, also im Querformat wieder da. Hier gehören sie mit hinein. */ .statusbar #feedback-link, .statusbar #about-link, .statusbar #app-version { display: none; } /* ⚠️ Und das WORT „Ansicht" vor dem Zoom-Feld fällt mit (v0.421): das Feld sagt „Seite einpassen" bzw. „100 %", der Name daneben sagt nichts dazu — auf 318 px ist das der teuerste stumme Text der Zeile (Lars, 05.08.2026). Das `` bleibt und behält seinen Klickweg aufs Feld; nur seine Beschriftung geht. */ .statusbar .view-switch > label.inline > span[data-i18n="view"] { display: none; } .statusbar { gap: 9px; } .statusbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 57; background: color-mix(in srgb, var(--panel, #fff) 90%, transparent); backdrop-filter: blur(7px); padding-bottom: calc(5px + var(--sab)); } body.lz-on .statusbar { left: var(--lzr); } /* ⚠️ Ohne diese Luft läge die letzte Notenzeile dauerhaft unter der Leiste; mit ihr lässt sie sich darunter hervorrollen. Sie kostet keinen Platz — nur Rollweg. */ #score-scroll { padding-bottom: 40px; } /* Der schwebende Werkzeug-Griff weicht der schwebenden Zeile aus. */ body.lz-on.se-on #lz-toolwrap { bottom: calc(52px + var(--sab)); } /* ---- Die Reiter stapeln sich (Lars, 03.08.2026) ---- * ⚠️ Die Reiterzeile kostet eine ganze ZEILE (40 px, 10 % der Höhe im * Querformat) für etwas, das auf 390 px ohnehin zum Rollfeld wird. * Der Zähler tritt an ihre Stelle — links, wo die Reiter standen; das * Marken-Menü bleibt rechts. Beide sind fest, deshalb bekommt die * Werkzeugzeile links und rechts Luft, damit nichts darunter liegt. */ /* ⚠️ **Die senkrechte Leiste fällt** (Lars, 03.08.2026): 72 px sind auf * 390 px Breite 18,5 %, und im Querformat passten acht Räume ohnehin * nicht übereinander. `--lzr` wird damit zum reinen sicheren Rand — * alles Feste, das daran hängt (Raum, Reiter, Werkzeugzeile, Fußzeile), * rückt von selbst nach links. */ #lz-rail { display: none !important; } :root { --lzr: var(--sal); } body.lz-on { padding-left: var(--sal); } #lz-roomwrap { display: block; position: fixed; z-index: 58; left: calc(14px + var(--sal)); bottom: calc(14px + var(--sab)); } body.lz-on.se-on #lz-roomwrap { bottom: calc(52px + var(--sab)); } body.kp-present #lz-roomwrap { display: none; } /* Querformat: nach RECHTS aufziehen — dort ist der Platz, oben nicht. */ @media (orientation: landscape) { .lz-rooms-pop { flex-direction: row; left: calc(100% + 8px); bottom: 0; } } /* ---- Bibliothek: die Orte-Leiste wird eine SCHUBLADE ---- * ⚠️ Sie nimmt im Hochformat 206 von 390 px — 53 % der Breite für eine * Liste, die man einmal je Sitzung braucht (gemessen 03.08.2026, Lars). * Dasselbe Prinzip wie bei den Räumen: gerufen statt angedockt. Nur die * FORM ist eine andere — hier stehen benannte Ordner mit Zählern, die * kein Zeichen ersetzt, also eine Schublade statt einer Zeichenreihe. */ .bib-railbtn { display: inline-flex; } /* ⚠️ **Die Tabelle wird eine LISTE** — das steht seit v0.510 NICHT mehr * hier, sondern bei den `@container`-Regeln der Tabelle (`.bib-tab`, * Suchwort „Der Titel darf nicht verhungern"). Grund: die Bedingung * hier fragt nach dem GERÄT, und der Titel verhungert nach der * BREITE — das iPad im Hochformat (768 px, grober Zeiger) fiel durch * beide Bedingungen und zeigte eine Stückliste ohne Stücknamen. * Was die Tabelle betrifft, gehört an den Platz, den sie hat; was das * Handy betrifft, bleibt hier. */ /* ⚠️ „Auswählen" stand bei x=666 in einem 390er Fenster — also außerhalb * des Bildes, und wirkte deshalb funktionslos. In der Tabelle sind die * Häkchen ohnehin immer da; der Knopf ist dort ein zweiter Weg zu * nichts. */ #bib-pick { display: none; } /* ⚠️ Rechts Platz für das schwebende Marken-Menü, sonst läge das Ende der ersten Zeile darunter. Das ist das EINZIGE am Umbruch, was wirklich vom Gerät abhängt — der Umbruch selbst hängt am Platz und steht deshalb seit v0.510 in seiner eigenen Breitenregel (Suchwort „Die Werkzeugzeile bricht um"). */ .bib-toolbar { padding: 8px 10px; padding-right: 52px; } /* Der Abstand zwischen Kopfzeile und erster Zeile war für die Maus gerechnet — auf dem Handy ist Höhe der knappe Platz. */ .bib-gridwrap { padding: 6px 10px 10px; } .bib-th { padding-top: 6px; padding-bottom: 6px; } /* ⚠️ Zum dritten Mal dieselbe Regel: `button { min-height: 40px }` machte aus dem Umbenennen-Stift ein 40-px-Kind und trieb die Zeile auf 48 px — der Haken stand dadurch über dem Titel statt daneben. */ .bib-pencil { min-height: 0; height: 24px; width: 24px; } tr.bib-row > td { padding: 3px 10px; } /* ⚠️⚠️ **Die Tafel war auf dem Handy GANZ fort** (`@media (max-width: * 1100px) { display: none }`) — und mit ihr seit v0.384 der einzige Weg, * ein Stück in einen Ordner zu verschieben. Sie kommt zurück, aber als * BLATT VON UNTEN: neben der Liste ist auf 390 px kein Platz, und ihr * Zweck (die Zeilen nicht unter dem Finger wegschieben) gilt dort * genauso. */ #bib-tafel { display: block; position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 62%; z-index: 7; border-left: none; border-top: 1px solid var(--b-line); border-radius: 15px 15px 0 0; /* ⚠️ Unten so viel Luft, dass die letzte Knopfreihe über dem schwebenden Raum-Griff endet (14 + 48) — sonst liegt er darauf. */ padding: 14px 16px calc(66px + var(--sab)); box-shadow: 0 -12px 32px -14px rgba(28, 27, 24, .45); } #bib-tafel[hidden] { display: none; } /* ⚠️ Querformat: die Tafel steht RECHTS, nicht unten — dort ist die Höhe knapp und die Breite da, dieselbe Abwägung wie beim Raum-Menü (Lars, 03.08.2026). */ @media (orientation: landscape) { #bib-tafel { left: auto; top: 0; bottom: 0; width: min(300px, 42vw); max-height: none; border-top: none; border-left: 1px solid var(--b-line); border-radius: 0; padding: 14px 16px calc(14px + var(--sab)); box-shadow: -12px 0 32px -16px rgba(28, 27, 24, .45); } } /* ---- Hochformat: die drei Hauptaktionen als Zeichenreihe unten ---- * ⚠️ Sie sitzen ZWISCHEN den beiden schwebenden Griffen (Raum links, * Werkzeuge rechts) und sind mittig — dieselbe Zeile, dieselbe Höhe. * Aus „Favoriten" wird ein Stern, aus „Löschen" ein Papierkorb; der * Name bleibt als `title`. ⚠️ Groß genug: 46 px Ziel, 22 px Zeichen. */ /* ---- Öffnen und Stern in die ECKE der Tafel, oben rechts ---- * ⚠️ Ohne Rahmen und ohne Beschriftung, nur die Zeichen (Lars, * 03.08.2026) — sie sind Aufsätze auf der Überschrift, keine * Knopfreihe. Gilt in beiden Lagen; das Löschen geht seinen eigenen * Weg, weil es das einzige ist, das man nicht zurücknehmen kann. */ #bib-tafel { position: absolute; } #bib-tafel .bib-thaupt { position: absolute; top: 10px; right: 12px; margin: 0; gap: 2px; z-index: 2; } /* ⚠️ `min-height: 0` — die Fingerregel machte im Hochformat 34 × 40 daraus, zum vierten Mal in dieser Runde. */ #bib-tafel .bib-thaupt .bib-tb { width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; border: none; background: none; } #bib-tafel .bib-thaupt .bib-tb svg { width: 22px; height: 22px; } #bib-tafel .bib-thaupt .bib-tb span { display: none; } #bib-tafel .bib-thaupt .bib-tb.haupt { color: var(--accent); } /* Damit die Überschrift nicht unter die beiden läuft. */ #bib-tafel h3 { padding-right: 76px; } /* ---- Der Papierkorb: ein QUADRAT wie Raum- und Werkzeug-Griff ---- * ⚠️ Gleiche Größe, gleiche Höhe, in derselben Reihe — er ist das * dritte schwebende Ding am unteren Rand, nicht eine Knopfreihe für * sich. */ #bib-tafel .bib-tdel { position: fixed; z-index: 59; margin: 0; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--sab)); } #bib-tafel .bib-tdel .bib-tb { width: 48px; height: 48px; min-height: 0; padding: 0; justify-content: center; border-radius: 15px; border: 1.5px solid color-mix(in srgb, #c6415f 40%, #e9e8e4); background: #fff; color: #c6415f; box-shadow: 0 8px 22px -12px rgba(28, 27, 24, .5); } #bib-tafel .bib-tdel .bib-tb svg { width: 22px; height: 22px; } #bib-tafel .bib-tdel .bib-tb span { display: none; } @media (orientation: portrait) { #bib-tafel { padding-bottom: calc(72px + var(--sab)); } } /* ⚠️ **Katalog-Favoriten sind KARTEN und blieben es** — die Liste der * Lehrkraft (`pieceTable`) betrifft nur die eigenen Stücke, gemerkte * Katalogstücke kommen daneben als `katCard` (Lars, 03.08.2026: „sind * immer noch riesig"). Auf dem Handy legen sie sich flach: der * Vorschaublock wird zum Sternfeld links, der Rest steht daneben. */ #bib-grid .bib-kat { display: flex; align-items: center; gap: 10px; height: auto; padding: 6px 10px; border-radius: 10px; border: none; border-bottom: 1px solid var(--b-line); box-shadow: none; } #bib-grid .bib-kat:hover { transform: none; box-shadow: none; } #bib-grid .bib-kat .bib-prev { height: auto; width: 34px; flex: none; background: none; border: none; } #bib-grid .bib-kat .bib-prev::before { display: none; } #bib-grid .bib-kat .bib-star { position: static; width: 30px; height: 30px; } #bib-grid .bib-kat .bib-meta { flex: 1; min-width: 0; padding: 0; } #bib-grid .bib-kat .bib-ptitle { font-size: 14px; } /* Komponisten und Tags eingeklappt: zwei lange Chip-Reihen nahmen mehr als die halbe Höhe. */ #bib-kfmehr:not([open]) { padding-bottom: 2px; } .bib-kfmehr summary { cursor: pointer; font-size: 12.5px; color: var(--b-muted); padding: 5px 2px; list-style: none; } .bib-kfmehr summary::-webkit-details-marker { display: none; } .bib-kfmehr summary::before { content: "▸ "; } .bib-kfmehr[open] summary::before { content: "▾ "; } .bib-body { position: relative; } .bib-rail { position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; width: min(240px, 78vw); transform: translateX(-101%); transition: transform .2s ease; box-shadow: 6px 0 24px -12px rgba(28,27,24,.5); } body.bib-rail-on .bib-rail { transform: none; } /* Vorhang: er macht sichtbar, dass die Liste ÜBER dem Bestand liegt — und fängt den Tipp daneben ab, ohne dass die Liste ihn braucht. */ body.bib-rail-on .bib-content::before { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(20,26,40,.28); } /* ⚠️ **Die Raum-Kopfzeile fällt** (Lars, 03.08.2026): 40 px für einen * Namen, den der Griff unten links ohnehin führt — im Noteneditor gibt * es sie längst nicht. ⚠️ ABER sie trägt das Marken-Menü (Sprache, * Hilfe, Impressum, Abmelden); das darf nicht mitfallen. Deshalb bleibt * der Kasten, verliert Grund und Platz und schrumpft auf das Menü — * schwebend oben rechts, genau dort, wo `#se-globalmenu` im Editor * sitzt. Ein Ort für dieselbe Sache. */ .lz-kopf { position: absolute; top: var(--sat); right: 0; left: auto; width: auto; height: 40px; z-index: 62; background: none; border: none; padding: 0 8px; } .lz-rdot, .lz-kopf .lz-rname, .lz-kopf .lz-flex { display: none; } #tab-bar { display: none !important; } /* ⚠️ Zähler und Liste gehören NUR dorthin, wo es Reiter gibt: in den Noteneditor (`se-on`). In den anderen Räumen der Lehrkraft stand ein „0" über dem Inhalt und die Liste blieb beim Raumwechsel stehen. */ body.lz-on:not(.se-on) #tab-mini, body.lz-on:not(.se-on) #tab-pop { display: none !important; } #tab-mini { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 61; top: calc(3px + var(--sat)); left: calc(8px + var(--sal)); /* QUADRAT, wie die Knöpfe daneben (Lars, 03.08.2026) — nicht ein Rechteck, das mit der Ziffernzahl wächst. ⚠️ `min-height` muss mit: die Fingerregel `button, select { min-height: 40px }` (max-width 700) gilt sonst auch hier und macht im Hochformat 36 × 40 daraus — dieselbe Falle wie bei den Zahlenfeld-Pfeilchen. */ width: 36px; height: 36px; min-height: 0; padding: 0; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1.5px solid var(--line, #e9e8e4); border-radius: 11px; background: var(--panel, #fff); color: inherit; } body.lz-on #tab-mini { left: calc(var(--lzr) + 8px); } #tab-pop { display: flex; top: calc(44px + var(--sat)); left: calc(8px + var(--sal)); } body.lz-on #tab-pop { left: calc(var(--lzr) + 8px); } /* ⚠️⚠️ **Die Zeile ENDET vor den festen Elementen, sie polstert nicht * bloß.** Mit `padding` blieb die Rollfläche unter Zähler und Marke, * und die Knöpfe wanderten beim Rollen sichtbar darunter hindurch * (Lars, 03.08.2026). `left`/`right` machen den Rollkasten physisch * schmaler — dort KANN nichts mehr durch. Die Maße: Zähler 8 + 36 + 6, * Marke 14 + 40 + 4. */ .se-bar { top: var(--sat) !important; left: calc(var(--lzr) + 50px) !important; right: calc(var(--sar) + 58px) !important; } body.lz-on.se-on { padding-top: calc(var(--se-barh, 46px) + var(--sat)); } /* ⚠️⚠️ **Die Schüler-Shell behält ihre EIGENE Reiterzeile** (`.ton-tabs`, * 40 px) — die gestapelten Reiter von v0.378 lösen `#tab-bar` ab, nicht * sie. Die Regel darüber schob die Werkzeugzeile auf `top: 0`, also * genau unter diese Zeile: im Schüler-Editor war vom Abspielknopf * nichts mehr zu sehen (Lars, 03.08.2026; gemessen `.ton-tabs` t=0 h=40 * UND `.se-bar` t=0 h=46). Sie beginnt hier unter der Zeile, und weil * die Shell die Reiter selbst führt, braucht die Leiste weder links * noch rechts eine Aussparung — die volle Breite gehört ihr. * ⚠️ Ohne `var(--sat)`: die Schüler-Shell rechnet nirgends mit sicheren * Rändern, `.ton-tabs` steht auf 0. Eine Leiste, die als einzige den * Rand mitzählt, risse eine Lücke unter die Reiterzeile. */ body.ton-has .se-bar { top: 40px !important; left: var(--sal) !important; right: var(--sar) !important; } /* Zähler und Liste sind das Gegenstück zu `#tab-bar` — und das ist in der Schüler-Shell ausgeblendet (`body.ton-has #tab-bar`). Sie lagen bisher nur zufällig hinter `#ton-shell` und wären bei jeder Änderung an der Stapelung aufgetaucht. */ body.ton-has #tab-mini, body.ton-has #tab-pop { display: none !important; } /* ---- Die Werkzeugzeile, enger (Lars, 03.08.2026) ---- * ⚠️ **Der Play-Knopf allein trieb die Höhe**: 56 × 42 px, während * Stop 40 × 36 und das Metronom 30 × 30 misst — die Leiste ist so hoch * wie ihr höchstes Kind, also 50 statt 42. Seit v0.500 ist er auch am * Rechner 36 × 36; hier bleibt nur das kleinere Zeichen. */ .se-play svg { width: 18px; height: 18px; } /* Ränder: 16 px links und 4 px oben waren für die Maus gedacht. Den Platz für Zähler und Marke schaffen `left`/`right` oben, nicht das Polster — sonst rollte der Inhalt darunter hindurch. */ /* ⚠️ Und sie darf NICHT umbrechen: im Hochformat wurden aus einer Zeile drei (gemessen 102 px), und der Einzug des Blattes kann einer wechselnden Höhe nicht folgen — das Blatt lag dann unter der Leiste. Seitwärts rollen wie die Raum-Leiste: lieber rollen als stapeln. */ .se-bar { padding: 3px 8px; gap: 8px; min-height: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .se-bar::-webkit-scrollbar { display: none; } .se-bar .se-grp, .se-bar .se-actions { flex: none; } /* ⚠️ Der Einzug folgt hier wie überall der GEMESSENEN Leiste (`--se-barh`; quer 42, hoch 46 — das Rollfeld misst ein Haar mehr); die Reiterzeile ist fort. Bis v0.512 stand die 46 fest im Text. */ /* ⚠️ Die Pfeilchen am Tempofeld sind auf dem Handy nicht zu treffen (`KS.spinnerize` baut sie 10 px hoch). Das Feld bleibt ein Zahlenfeld — die Zifferntastatur kommt vom `type="number"`, nicht von den Pfeilen. */ .se-num .num-spin, #se-tempo::-webkit-inner-spin-button, #se-tempo::-webkit-outer-spin-button { display: none !important; } #se-tempo { -moz-appearance: textfield; appearance: textfield; } } /* ⚠️ Die Regel, die Papierformat und Lage im Hochformat ausblendete, ist * seit v0.376 GEGENSTANDSLOS: aus zwei Auswahlfeldern (138 px) wurde ein * Knopf mit Menü (40 px), und damit passt die ganze Ansichts-Wahl auch in * die 318 px, die der Lehrkraft im Hochformat bleiben. */ /* ---- Raumprofil im Lehrerzimmer (Modul-Kontrakt §4.6/§4.7) ---- */ .lzr-rsub { margin: 2px 0 10px; font-size: 12.5px; color: var(--t-muted); } .lzr-rgrp { margin: 8px 0; } .lzr-rgrp > b { display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 5px; } .lzr-rchips { display: flex; flex-wrap: wrap; gap: 6px; } .lzr-rchip { border: 1px solid var(--t-line); background: transparent; color: inherit; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; } .lzr-rchip:hover { border-color: var(--accent); } .lzr-rchip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); } /* ---- Erfahrungsdaten ausleiten (Rückkanal §7) ---- Die Knöpfe sind bewusst RUHIG (Umriss, keine Akzentfläche): das Ausleiten ist die seltenste Handlung des Raums und soll nicht wie sein Hauptzweck aussehen. `.lzr-rsub` darüber trägt den Satz, der sagt, was hinausgeht — er ist der eigentliche Inhalt des Abschnitts und steht deshalb VOR den Knöpfen, nicht als Fußnote darunter. */ .lzr-dbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .lzr-dbtn { border: 1px solid var(--t-line); background: transparent; color: inherit; border-radius: 8px; padding: 7px 12px; font-size: 12.5px; cursor: pointer; } .lzr-dbtn:hover { border-color: var(--accent); color: var(--accent); } /* ---- Modul-Raum (js/modulraum.js) ---- Kartenwand wie der Paket-Editor, aber ohne Wertung: keine Ampeln, keine Sterne (Kontrakt §8). Ungeprüftes ist blass, nicht versteckt. */ .mr-root { height: 100%; overflow: auto; } .mr-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 26px 60px; } /* ⚠️ Die Kopfzeile eines Raums UMBRICHT (seit v0.512) — dieselbe Bauform wie `.lzr-vhead`, die es seit jeher richtig macht: der Titelblock nimmt den Platz und gibt bei 240 px auf, die Handlungen rutschen in eine zweite Zeile. Ohne sie stand „＋ Neues Modul" auf 390 px bei l=321 r=390 — bündig mit der Fensterkante, also abgeschnitten, und die WICHTIGSTE Handlung des Raums war nicht auslösbar. Wer eine neue Raum-Kopfzeile baut, baut sie so. */ .mr-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .mr-head > div:first-child { flex: 1; min-width: 240px; } .mr-h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; } .mr-sub { margin: 4px 0 0; color: var(--t-muted); font-size: 13.5px; } .mr-zahl { margin-left: auto; color: var(--t-muted); font-size: 13px; white-space: nowrap; } .mr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; } .mr-search { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--t-line); border-radius: 999px; padding: 5px 12px; flex: 1 1 240px; } .mr-search input { border: 0; background: none; outline: none; color: inherit; font: inherit; width: 100%; } .mr-tools select { border: 1px solid var(--t-line); border-radius: 999px; padding: 5px 10px; background: transparent; color: inherit; font: inherit; } .mr-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t-muted); } .mr-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); } .mr-card { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; border: 1px solid var(--t-line); border-radius: 12px; padding: 12px 14px; background: transparent; color: inherit; font: inherit; } .mr-card:hover { border-color: #7a5fbf; } .mr-card.blass { opacity: .62; } .mr-card.blass:hover { opacity: 1; } .mr-ctop { display: flex; align-items: baseline; gap: 8px; } .mr-titel { font-weight: 650; font-size: 14.5px; } .mr-min { margin-left: auto; color: var(--t-muted); font-size: 12.5px; } .mr-kurz { font-size: 12.8px; color: var(--t-muted); line-height: 1.4; } .mr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .mr-tag { font-size: 11px; border: 1px solid var(--t-line); border-radius: 999px; padding: 1px 8px; } .mr-tag.art { border-color: #7a5fbf; color: #7a5fbf; } .mr-tag.mut { color: var(--t-muted); } .mr-ungeprueft { font-size: 11px; font-style: italic; color: var(--t-muted); } .mr-sec2 { margin-top: 26px; } .mr-sechead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; padding-top: 12px; border-top: 1px solid var(--t-line); } .mr-sechead > b { font-size: 14px; } .mr-sechead > span { font-size: 12.5px; color: var(--t-muted); } .mr-leer { color: var(--t-muted); font-size: 13.5px; } /* Einzelansicht */ .mr-back { border: 0; background: none; color: var(--t-muted); font: inherit; cursor: pointer; padding: 0 0 10px; } .mr-back:hover { color: var(--accent); } .mr-hinweis { border: 1px dashed var(--t-line); border-radius: 10px; padding: 9px 13px; margin: 10px 0; font-size: 13px; color: var(--t-muted); } .mr-meta { display: grid; gap: 3px; margin: 12px 0; } .mr-z { display: flex; gap: 10px; font-size: 13.2px; align-items: baseline; } .mr-z > b { flex: 0 0 148px; font-weight: 600; color: var(--t-muted); font-size: 12.2px; } .mr-sec { margin: 22px 0; } .mr-sec > h2 { font-size: 14.5px; margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; } .mr-summe { font-weight: 400; font-size: 12.5px; color: var(--t-muted); } .mr-flies { font-size: 13.4px; line-height: 1.55; margin: 0; } .mr-lz { display: flex; gap: 9px; margin: 6px 0; font-size: 13.2px; line-height: 1.5; } .mr-grp { flex: 0 0 24px; height: 20px; border-radius: 6px; background: #7a5fbf; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .mr-komp { display: block; font-size: 11.5px; color: var(--t-muted); font-style: normal; margin-top: 2px; } .mr-schritt { border-left: 2px solid var(--t-line); padding: 7px 0 7px 12px; margin: 8px 0; } .mr-schritt.res { opacity: .65; } .mr-ref { border-left-color: #7a5fbf; font-size: 13.2px; } .mr-ref > span { display: block; color: var(--t-muted); font-size: 12.4px; } .mr-shead { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .mr-zeit { font-weight: 700; font-size: 12.5px; color: #7a5fbf; } .mr-phase { font-size: 12.8px; font-weight: 600; } .mr-soz, .mr-trenn { font-size: 11px; color: var(--t-muted); border: 1px solid var(--t-line); border-radius: 999px; padding: 0 7px; } .mr-sp { font-size: 13px; line-height: 1.5; margin: 2px 0; } .mr-sp > b { font-size: 11.5px; color: var(--t-muted); margin-right: 6px; font-weight: 600; } /* Fehlläufe (12.8): gedämpft — die Sparte ist zum Überspringen da, solange die Stunde läuft, und zum Finden, wenn sie stockt. */ .mr-fehll { color: var(--t-muted); } .mr-fehll .mr-fl { display: block; padding-left: 14px; } .mr-fehll .mr-fl em { font-style: normal; font-weight: 600; } .mr-fehll .mr-fl em::after { content: ' —'; font-weight: 400; } .mr-vorschlag { margin-top: 8px; } /* ---- Modulverweise im Verlaufsplan (js/paketeditor.js) ---- Eine Karte, die das Modul NENNT statt es zu kopieren; die Schritte stehen aufklappbar darunter und sind dort nicht editierbar — geändert wird am Modul, abgewichen über `abweichung`. */ .pk-addrow { display: flex; gap: 8px; flex-wrap: wrap; } .pk-addstep.mod { border-color: #7a5fbf; color: #7a5fbf; } .pk-modref { border: 1px solid var(--t-line); border-left: 3px solid #7a5fbf; border-radius: 10px; margin: 8px 0; overflow: hidden; } .pk-modref.fehlt { border-left-color: #c62828; } .pk-mhead { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; } .pk-mhead:hover { background: color-mix(in srgb, #7a5fbf 6%, transparent); } .pk-mico { color: #7a5fbf; font-size: 15px; } .pk-mmain { min-width: 0; flex: 1 1 auto; } .pk-mtitel { display: block; font-weight: 640; font-size: 13.6px; } .pk-mung { font-style: italic; font-weight: 400; font-size: 11.5px; color: var(--t-muted); } .pk-msub { display: block; font-size: 12.2px; color: var(--t-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pk-mzeit { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t-muted); } .pk-mzeit input { width: 54px; } .pk-mchev { color: var(--t-muted); transition: transform .15s; } .pk-modref.open .pk-mchev { transform: rotate(90deg); } .pk-mneu { font-size: 12.2px; padding: 5px 12px; color: var(--t-muted); border-top: 1px dashed var(--t-line); } .pk-mlink { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; } .pk-mbody { display: none; padding: 2px 12px 10px 34px; } .pk-modref.open .pk-mbody { display: block; } .pk-mstep { display: flex; gap: 9px; font-size: 12.6px; padding: 3px 0; align-items: baseline; } .pk-mzt { flex: 0 0 30px; color: #7a5fbf; font-weight: 700; } .pk-mph { flex: 0 0 108px; font-weight: 600; } .pk-mimp { color: var(--t-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Auswahl-Dialog */ .pk-mwahl { max-width: 880px; width: 92vw; } .pk-mwrest { font-size: 12.5px; color: var(--t-muted); } .pk-mwtools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0; } .pk-mwtools input[type=text] { flex: 1 1 200px; border: 1px solid var(--t-line); border-radius: 999px; padding: 5px 12px; background: transparent; color: inherit; font: inherit; } .pk-mwtools label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.8px; color: var(--t-muted); } .pk-mwhint { font-size: 12.2px; color: var(--t-muted); font-style: italic; } .pk-mwgrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); max-height: 46vh; overflow: auto; } .pk-mwcard { display: block; text-align: left; border: 1px solid var(--t-line); border-radius: 10px; padding: 9px 12px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .pk-mwcard:hover { border-color: #7a5fbf; } .pk-mwcard.blass { opacity: .6; } .pk-mwcard.blass:hover { opacity: 1; } .pk-mwmin { float: right; color: var(--t-muted); font-size: 12px; } .pk-mwkurz { display: block; font-size: 12.2px; color: var(--t-muted); margin-top: 3px; } .pk-mwsec { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--t-line); font-size: 13px; } .pk-mwlade { color: var(--t-muted); font-size: 13px; } /* Klassenprofil in der Modulwahl: die Zeile sagt, wonach geordnet wurde, die Marke an der Karte, warum DIESES Modul dort steht (D4). Die Marke trägt die Farbe der Richtung — üben ist keine Warnung, sondern ein Auftrag, deshalb dieselbe ruhige Tinte wie „trägt". */ .pk-mwprnote { margin: 8px 0 2px; font-size: 12.4px; color: var(--t-muted); line-height: 1.5; } .pk-mwprnote b { color: inherit; font-weight: 600; } .pk-mwpr { display: block; margin-top: 6px; font-size: 11.8px; font-weight: 600; color: var(--t-muted); } /* Die Gegenstimme steht als zweite Marke darunter, leiser: sie erklärt, warum das Etikett darüber nicht die ganze Wahrheit ist (D8). */ .pk-mwpr + .pk-mwpr { margin-top: 2px; font-weight: 500; opacity: .8; } .pk-mwpr.p-tragen, .pk-mwpr.p-mitnehmen { color: #2f7d5c; } .pk-mwpr.p-ueben { color: #7a5fbf; } .pk-mwpr.p-seltener { color: var(--t-muted); font-weight: 500; } .pk-mwpr.voll { font-weight: 500; font-style: italic; } /* ---- Medien am Schritt (js/medien.js) ---- */ .pk-medien { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; } .pk-medchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; border: 1px solid var(--t-line); border-radius: 999px; padding: 2px 4px 2px 9px; } .pk-medx { border: 0; background: none; color: var(--t-muted); cursor: pointer; font-size: 11px; padding: 0 3px; } .pk-medadd { border: 1px dashed var(--t-line); background: none; color: var(--t-muted); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; } .pk-medadd:hover { border-color: var(--accent); color: var(--accent); } .pk-medlink { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; } .pk-medlink input { flex: 1 1 200px; border: 1px solid var(--t-line); border-radius: 8px; padding: 6px 10px; background: transparent; color: inherit; font: inherit; } .ur-medien { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .ur-medbtn { border: 1px solid var(--t-line); border-radius: 999px; padding: 5px 13px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; } .ur-medbtn:hover { border-color: var(--accent); color: var(--accent); } /* Öffnen und Verteilen sind ZWEI Handlungen, aber EIN Gegenstand: die beiden Knöpfe sitzen als Paar in einer Pille, getrennt nur durch die Fuge. Zwei freistehende Pillen ließen offen, welcher QR zu welchem Medium gehört, sobald ein Schritt drei davon trägt. */ .ur-medpaar { display: inline-flex; } .ur-medpaar .ur-medbtn { border-radius: 999px 0 0 999px; border-right: none; } .ur-qrbtn { border: 1px solid var(--t-line); border-radius: 0 999px 999px 0; padding: 5px 10px 5px 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; } .ur-qrbtn:hover { border-color: var(--accent); color: var(--accent); } .ur-qrbtn[disabled] { opacity: .55; cursor: default; } /* ⚠️ Der Nachbar muss MITfärben, sonst leuchtet eine halbe Pille. */ .ur-medpaar:hover .ur-medbtn, .ur-medpaar:hover .ur-qrbtn { border-color: var(--accent); } /* ---- Rückkanal: die eine Frage nach der Stunde (Kontrakt §7) ---- */ .ur-mfrage { margin-bottom: 14px; } .ur-mfz { display: flex; align-items: center; gap: 10px; margin: 5px 0; font-size: 13.2px; } .ur-mfz > span:first-child { flex: 1 1 auto; } .ur-skala4 { display: inline-flex; gap: 3px; } .ur-sdot { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--t-line); background: transparent; color: var(--t-muted); font: inherit; font-size: 12px; cursor: pointer; } .ur-sdot.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); } /* Formularfelder brauchen eine sichtbare Kante: der Modul-Editor ist die formularlastigste Ansicht der App, und --t-line allein verschwindet dort fast. */ .me-root { --me-kante: color-mix(in srgb, currentColor 22%, transparent); } .me-sleft input, .me-sbody textarea, .me-sfoot input[type=text], .me-grid input, .me-grid select, .me-lz input[type=text], .me-ana, .me-ovcard > input { border-color: var(--me-kante) !important; } /* ---- Modul-Editor (js/moduleditor.js) ---- Bewusst die Formensprache des Paketeditors: ein Modul-Baustein IST ein Schritt dort, also soll die Karte nicht zweimal gelernt werden. */ .me-root { height: 100%; overflow: auto; } .me-wrap { max-width: 980px; margin: 0 auto; padding: 20px 26px 80px; } .me-flex { flex: 1 1 auto; } .me-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .me-back { border: 0; background: none; color: var(--t-muted); font: inherit; cursor: pointer; padding: 0; } .me-back:hover { color: var(--accent); } .me-btn { border: 1px solid var(--t-line); border-radius: 999px; padding: 5px 14px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; } .me-btn.prim { background: #7a5fbf; border-color: #7a5fbf; color: #fff; } .me-hinweis { border: 1px dashed var(--t-line); border-radius: 10px; padding: 9px 13px; font-size: 12.8px; color: var(--t-muted); margin-bottom: 12px; } .me-titel { width: 100%; border: 0; border-bottom: 2px solid var(--t-line); background: none; color: inherit; font: 700 24px/1.25 inherit; padding: 4px 0; margin-bottom: 6px; } .me-kurz { width: 100%; border: 0; border-bottom: 1px solid var(--t-line); background: none; color: var(--t-muted); font: inherit; font-size: 14px; padding: 4px 0; margin-bottom: 18px; } .me-titel:focus, .me-kurz:focus { outline: none; border-bottom-color: #7a5fbf; } .me-sec { margin: 22px 0; } .me-sec > h2 { font-size: 14.5px; margin: 0 0 9px; display: flex; align-items: baseline; gap: 8px; } .me-summe { font-weight: 400; font-size: 12.5px; color: var(--t-muted); } .me-note { font-size: 12.5px; color: var(--t-muted); margin: 0 0 8px; } .me-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; } .me-grid label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--t-muted); } .me-grid input, .me-grid select { border: 1px solid var(--t-line); border-radius: 8px; padding: 4px 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; } .me-grid input[type=number] { width: 62px; } .me-krow { display: flex; gap: 10px; align-items: flex-start; margin: 7px 0; } .me-lab { flex: 0 0 128px; font-size: 12px; color: var(--t-muted); padding-top: 4px; } .me-chip { border: 1px solid var(--t-line); background: transparent; color: inherit; border-radius: 999px; padding: 3px 11px; font-size: 12.3px; cursor: pointer; margin: 0 3px 3px 0; } .me-chip.on { background: #7a5fbf; border-color: #7a5fbf; color: #fff; } .me-kchips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .me-kchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.2px; border: 1px solid var(--t-line); border-radius: 999px; padding: 2px 4px 2px 10px; } .me-kchip button { border: 0; background: none; color: var(--t-muted); cursor: pointer; padding: 0 3px; } .me-kadd { border: 1px dashed var(--t-line); background: none; color: var(--t-muted); border-radius: 999px; padding: 2px 10px; cursor: pointer; } .me-kadd:hover { border-color: #7a5fbf; color: #7a5fbf; } .me-lz { display: flex; gap: 8px; align-items: center; margin: 6px 0; } .me-lz input[type=text] { flex: 1 1 auto; border: 1px solid var(--t-line); border-radius: 8px; padding: 6px 10px; background: transparent; color: inherit; font: inherit; font-size: 13.2px; } .me-grp { display: inline-flex; gap: 2px; } .me-gb { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--t-line); background: transparent; color: var(--t-muted); font: inherit; font-size: 11.5px; cursor: pointer; } .me-gb.on { background: #7a5fbf; border-color: #7a5fbf; color: #fff; } .me-add { border: 1px dashed var(--t-line); background: none; color: var(--t-muted); border-radius: 10px; padding: 7px 0; width: 100%; cursor: pointer; font: inherit; font-size: 13px; } .me-add:hover { border-color: #7a5fbf; color: #7a5fbf; } .me-step { border: 1px solid var(--t-line); border-left: 3px solid #7a5fbf; border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: flex; gap: 14px; flex-wrap: wrap; } .me-ref { align-items: center; gap: 8px; } .me-refi { color: #7a5fbf; } .me-sleft { display: flex; flex-direction: column; gap: 7px; flex: 0 0 168px; } .me-sleft label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--t-muted); } .me-sleft input { border: 1px solid var(--t-line); border-radius: 7px; padding: 4px 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; } .me-soz { display: flex; gap: 2px; } .me-sozb { border: 1px solid var(--t-line); background: transparent; color: var(--t-muted); border-radius: 6px; padding: 2px 5px; font-size: 11px; cursor: pointer; } .me-sozb.on { background: #7a5fbf; border-color: #7a5fbf; color: #fff; } .me-sbody { flex: 1 1 380px; min-width: 0; } .me-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .me-lane { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--t-muted); margin-bottom: 3px; } .me-lane.g { color: #1f9e6a; } .me-sbody textarea { width: 100%; min-height: 62px; border: 1px solid var(--t-line); border-radius: 8px; padding: 6px 9px; background: transparent; color: inherit; font: inherit; font-size: 13px; resize: vertical; } .me-sfoot { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 8px; } .me-sfoot input[type=text] { flex: 1 1 140px; border: 1px solid var(--t-line); border-radius: 7px; padding: 4px 8px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; } .me-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--t-muted); } .me-x { border: 0; background: none; color: var(--t-muted); cursor: pointer; font-size: 13px; } .me-x:hover { color: #c62828; } .me-ana { width: 100%; border: 1px solid var(--t-line); border-radius: 10px; padding: 9px 12px; background: transparent; color: inherit; font: inherit; font-size: 13.3px; line-height: 1.5; resize: vertical; } /* Der Prüflauf: unten, meldend, nie rot als Ampel oben */ .me-pruef { border: 1px solid var(--t-line); border-radius: 10px; padding: 10px 14px; margin-top: 22px; font-size: 13px; color: var(--t-muted); } .me-pruef.ok { color: #1f9e6a; } .me-pruef.hart { border-color: color-mix(in srgb, #c62828 40%, var(--t-line)); } .me-pruef ul { margin: 6px 0 0 18px; padding: 0; } .me-pruef li { margin: 3px 0; } /* Kompetenz-Wähler */ .me-ov { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 60; padding: 20px; } /* `display: grid` schlägt sonst das hidden-Attribut — die Fläche läge dauerhaft über der Seite */ .me-ov[hidden] { display: none; } .me-ovcard { background: var(--chrome, #fff); color: var(--chrome-ink, inherit); border-radius: 14px; padding: 16px 18px; width: min(680px, 94vw); max-height: 80vh; display: flex; flex-direction: column; gap: 10px; } .me-ovhead { display: flex; align-items: center; gap: 10px; } .me-ovcard > input { border: 1px solid var(--t-line); border-radius: 999px; padding: 6px 14px; background: transparent; color: inherit; font: inherit; } .me-klist { overflow: auto; display: grid; gap: 5px; } .me-kitem { text-align: left; border: 1px solid var(--t-line); border-radius: 9px; padding: 7px 11px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .me-kitem:hover { border-color: #7a5fbf; } .me-kitem > b { display: block; font-size: 13.2px; } .me-kitem > span { display: block; font-size: 11.2px; color: var(--t-muted); } .me-kitem > i { display: block; font-size: 12.2px; color: var(--t-muted); font-style: normal; margin-top: 2px; } /* Modul-Raum: Neu-Knopf und Kopfzeile der Einzelansicht */ .mr-neu { margin-left: 10px; border: 1px solid #7a5fbf; color: #7a5fbf; background: transparent; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; } .mr-lesehead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .mr-flex { flex: 1 1 auto; } .mr-btn { border: 1px solid var(--t-line); border-radius: 999px; padding: 4px 13px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; } .mr-btn:hover { border-color: #7a5fbf; color: #7a5fbf; } .mr-mark { font-size: 12px; font-style: normal; color: #7a5fbf; font-weight: 400; } /* ---- Vorschlagsassistenz (js/modulraum.js) ---- Zwei bis drei Wege NEBENEINANDER, keine Empfehlung, kein Score. */ .vz-form { border: 1px solid var(--t-line); border-radius: 12px; padding: 14px 16px; margin: 14px 0 20px; } .vz-zeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; } .vz-lab { font-size: 12px; color: var(--t-muted); } .vz-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 1 1 300px; } .vz-zeile input[type=number] { width: 68px; border: 1px solid var(--t-line); border-radius: 8px; padding: 4px 8px; background: transparent; color: inherit; font: inherit; } .vz-chips select { border: 1px dashed var(--t-line); border-radius: 999px; padding: 3px 10px; background: transparent; color: var(--t-muted); font: inherit; font-size: 12.5px; } .vz-note { font-size: 12.2px; color: var(--t-muted); margin: 6px 0 0; } .vz-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); /* ein einzelner Weg soll nicht über die ganze Breite laufen */ max-width: 1100px; } .vz-grid:has(> .vz-karte:only-child) { grid-template-columns: minmax(290px, 520px); } .vz-eng { font-size: 12.5px; color: var(--t-muted); margin: 10px 0 0; max-width: 520px; } /* Fehlender Zwischenstand (knuepftAn, E). Kein Fehlerrot: es ist eine AUSKUNFT, keine Fehlfunktion — und `ohne` sagt, wie die Stunde trotzdem geht. Deshalb der ruhige Rahmen und der Quereinstieg abgesetzt darunter. */ .vz-anschluss { margin: 14px 0 0; max-width: 620px; border: 1px solid var(--t-line); border-left: 3px solid var(--t-muted); border-radius: 10px; padding: 10px 13px; background: color-mix(in srgb, var(--t-muted) 5%, transparent); } .vz-anschluss > b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .vz-anschluss-z { font-size: 12.5px; margin: 7px 0 0; line-height: 1.45; } .vz-anschluss-was { color: var(--t-muted); font-style: italic; } .vz-anschluss-ohne { display: block; margin-top: 4px; } .vz-karte { border: 1px solid var(--t-line); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; } .vz-kopf { display: flex; align-items: baseline; gap: 8px; } .vz-min { margin-left: auto; font-size: 12.5px; color: var(--t-muted); } .vz-balken { height: 5px; border-radius: 3px; background: var(--t-line); overflow: hidden; } .vz-balken > i { display: block; height: 100%; background: #7a5fbf; } /* Stundenverlauf: vier Abschnitte, Breite = Zeitanteil. Ein leerer * Abschnitt bleibt SICHTBAR leer (gestrichelt) — er ist die Auskunft. */ .vz-verlauf { display: flex; gap: 3px; margin: 8px 0 2px; } /* ⚠️ `min-width: max-content`: die Breite folgt dem ZEITANTEIL, aber * nie unter die Beschriftung — mit `min-width: 0` stand am schmalen * Rand „Ankomm…" und „Absc…", und ein Abschnitt, den man nicht lesen * kann, sagt nichts (im Bild gefunden, wie schon bei den Treffern in K3). */ .vz-vphase { min-width: max-content; display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, #7a5fbf 11%, transparent); border: 1px solid color-mix(in srgb, #7a5fbf 22%, transparent); } .vz-vphase b { font-size: 10.5px; font-weight: 700; color: #4a3d6b; white-space: nowrap; } .vz-vphase small { font-size: 10px; color: #827e76; } .vz-vphase.leer { background: none; border-style: dashed; border-color: var(--t-line); } .vz-vphase.leer b { color: #a29c92; } .vz-luecke { margin-top: 4px; font-size: 11.5px; color: #9a6b1f; } .vz-liste { list-style: none; margin: 0; padding: 0; } .vz-liste li { display: flex; gap: 8px; align-items: baseline; font-size: 13px; padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--t-line) 55%, transparent); } .vz-liste li.blass { opacity: .62; } /* Umbau (12.11): eine Zwischenzeile OHNE Trennlinie und eingerückt wie die Modulzeit — sie ist kein Modul, sondern was zwischen zweien passiert. Gedämpft, weil sie eine Nebenkosten-Auskunft ist. */ .vz-umbauzeile { border-bottom: none !important; font-size: 12px; color: var(--t-muted); gap: 5px !important; padding: 4px 0 1px !important; align-items: center !important; } .vz-umbauzeile svg { opacity: .75; } .vz-umbau { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, #7a5fbf 14%, transparent); color: #7a5fbf; font-size: 11.5px; } .vz-zeit { flex: 0 0 30px; color: #7a5fbf; font-weight: 700; font-size: 12px; } .vz-mtitel { flex: 1 1 auto; } .vz-art { font-size: 11px; color: var(--t-muted); } .vz-fuss { font-size: 12px; color: var(--t-muted); display: grid; gap: 3px; } .vz-offen { color: color-mix(in srgb, #c62828 65%, var(--t-muted)); } .vz-ung { font-style: italic; } .vz-take { margin-top: auto; } .mr-btn.prim { background: #7a5fbf; border-color: #7a5fbf; color: #fff; } /* ---- Lektionen: Raum (js/kursraum.js) + Editor (js/lektionseditor.js) ---- Farbe kommt aus der Raumrolle (--lza), nicht aus einer festen Zahl — der Raum färbt sich, die Bausteine folgen. Fassung 3 des Design-Leitbilds: kein Papier, Linien statt gefüllter Zeichen. */ .kr-root { height: 100%; overflow: auto; } .kr-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 26px 60px; } /* umbricht wie `.mr-head` — „＋ Neuer Kurs" lag auf 390 px bei l=308 r=424, also 34 px außerhalb des Fensters */ .kr-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; } .kr-head > div:first-child { flex: 1; min-width: 240px; } .kr-h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; } .kr-sub { margin: 4px 0 0; color: var(--t-muted); font-size: 13.5px; } .kr-weg, .le-weg { margin-left: auto; align-self: center; font-size: 12px; white-space: nowrap; border: 1px solid var(--t-line); border-radius: 999px; padding: 3px 11px; color: var(--t-muted); } .kr-weg-repo, .le-weg-repo { border-color: var(--lza, #1898a8); color: var(--lza, #1898a8); } .kr-weg-keiner, .le-weg-keiner { font-style: italic; } .kr-neu { border: 1px solid var(--lza, #1898a8); color: var(--lza, #1898a8); background: transparent; border-radius: 999px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; align-self: center; white-space: nowrap; } .kr-neu:disabled { opacity: .45; cursor: default; } .kr-hinweis { border: 1px dashed var(--t-line); border-radius: 10px; padding: 9px 13px; font-size: 13px; color: var(--t-muted); margin: 0 0 18px; } .kr-grp { margin-bottom: 26px; } .kr-ghead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--t-line); padding-bottom: 5px; } .kr-ghead > b { font-size: 14px; } .kr-ghead > span { font-size: 12.5px; color: var(--t-muted); } .kr-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); } .kr-card { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; border: 1px solid var(--t-line); border-radius: 12px; padding: 12px 14px; background: var(--chrome); color: inherit; font: inherit; } .kr-card:hover { border-color: var(--lza, #1898a8); } .kr-ctop { display: flex; align-items: baseline; gap: 8px; } .kr-titel { font-weight: 650; font-size: 14.5px; } /* ⚠️ **Das Kürzel schrumpft NICHT** (v0.512): als gewöhnliches Flex-Kind gab es nach, sobald der Titel zwei Zeilen brauchte — aus `m5` wurde `m..` („Vom Dreiklang zum vierstimmigen Satz", Lars). Ein Kürzel aus zwei Zeichen mit Auslassungspunkten abzukürzen spart nichts und nimmt die einzige Auskunft; nachgeben soll der TITEL, und der bricht ohnehin um. `max-width` bleibt als Schutz gegen ein ungewöhnlich langes Kürzel stehen. */ .kr-id { flex: none; margin-left: auto; color: var(--t-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; } .kr-kurz { font-size: 12.8px; color: var(--t-muted); line-height: 1.4; } .kr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .kr-tag { font-size: 11px; border: 1px solid var(--t-line); border-radius: 999px; padding: 1px 8px; } .kr-tag.mut { color: var(--t-muted); } .kr-tag.eigen { border-color: var(--lza, #1898a8); color: var(--lza, #1898a8); } .kr-leer, .le-leer { color: var(--t-muted); font-size: 13.5px; margin: 4px 0; } .le-root { height: 100%; overflow: auto; } .le-wrap { max-width: 1000px; margin: 0 auto; padding: 20px 26px 90px; } .le-flex { flex: 1 1 auto; } .le-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .le-back { border: 0; background: none; color: var(--t-muted); font: inherit; cursor: pointer; padding: 0; } .le-back:hover { color: var(--lza, #1898a8); } .le-btn { border: 1px solid var(--t-line); border-radius: 999px; padding: 5px 14px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; } .le-btn.prim { background: var(--lza, #1898a8); border-color: var(--lza, #1898a8); color: #fff; } .le-btn:disabled { opacity: .45; cursor: default; } .le-titel { width: 100%; border: 0; border-bottom: 2px solid var(--t-line); background: none; color: inherit; font: inherit; font-size: 23px; font-weight: 700; padding: 4px 0; } .le-kurz2 { width: 100%; border: 0; border-bottom: 1px solid var(--t-line); background: none; color: var(--t-muted); font: inherit; font-size: 14px; padding: 4px 0; margin-top: 4px; } .le-titel:focus, .le-kurz2:focus { outline: none; border-bottom-color: var(--lza, #1898a8); } .le-sec { margin: 24px 0; } .le-sec > h2 { font-size: 14.5px; margin: 0 0 9px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--t-line); padding-bottom: 5px; } .le-zahl { font-weight: 400; font-size: 12.5px; color: var(--t-muted); } .le-note { font-size: 12.5px; color: var(--t-muted); margin: 0 0 8px; } .le-warn { font-size: 12.5px; color: #b4452a; margin: 6px 0 0; } .le-grid { display: flex; flex-wrap: wrap; gap: 14px; } .le-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--t-muted); margin: 8px 0; } .le-f > span { font-size: 11.5px; } .le-f input, .le-f textarea, .le-f select, .le-crow input, .le-crow select, .le-lrow input, .le-qrow input, .le-akt input, .le-preset select { border: 1px solid var(--t-line); border-radius: 8px; padding: 5px 9px; background: var(--chrome); color: var(--t-ink); font: inherit; font-size: 13.2px; } .le-f textarea { resize: vertical; line-height: 1.5; } .le-f input:focus, .le-f textarea:focus { outline: 2px solid var(--lza, #1898a8); outline-offset: -1px; } .le-f input:disabled { opacity: .6; } .le-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .le-vin { position: relative; display: flex; align-items: center; gap: 6px; } .le-vin input { flex: 1 1 auto; min-width: 0; } .le-tot { color: #b4452a; display: inline-flex; flex: none; } .le-mini { border: 1px solid var(--t-line); border-radius: 999px; padding: 2px 10px; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; } .le-mini:hover { border-color: var(--lza, #1898a8); color: var(--lza, #1898a8); } .le-x { border: 0; background: none; color: var(--t-muted); font: inherit; font-size: 13px; cursor: pointer; padding: 2px 5px; line-height: 1; } .le-x:hover { color: #b4452a; } .le-add { display: block; width: 100%; margin: 10px 0 0; border: 1px dashed var(--t-line); border-radius: 10px; padding: 7px; background: transparent; color: var(--t-muted); font: inherit; font-size: 13px; cursor: pointer; } .le-add:hover { border-color: var(--lza, #1898a8); color: var(--lza, #1898a8); } .le-lrow, .le-qrow { display: flex; gap: 6px; align-items: center; margin: 5px 0; } .le-lrow input { flex: 1 1 auto; } .le-qrow input { flex: 1 1 0; min-width: 0; } .le-lek { border: 1px solid var(--t-line); border-radius: 12px; margin: 8px 0; background: var(--chrome); overflow: hidden; } .le-lek.auf { border-color: var(--lza, #1898a8); } .le-lhead { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; } .le-lhead > b { font-size: 14px; font-weight: 650; } .le-lnum, .le-snum { flex: none; width: 21px; height: 21px; border-radius: 999px; border: 1px solid var(--t-line); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; color: var(--t-muted); } .le-lek.auf .le-lnum { border-color: var(--lza, #1898a8); color: var(--lza, #1898a8); } .le-lmeta, .le-lid { font-size: 11.5px; color: var(--t-muted); } .le-lid { font-variant-numeric: tabular-nums; } .le-lbody { padding: 4px 14px 14px; border-top: 1px solid var(--t-line); } .le-step { border: 1px solid var(--t-line); border-radius: 10px; margin: 9px 0; } .le-shead { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--t-line); } .le-shead select { border: 1px solid var(--t-line); border-radius: 999px; padding: 3px 9px; background: transparent; color: inherit; font: inherit; font-size: 12.5px; } .le-sbody { padding: 2px 12px 12px; } .le-preset, .le-check { border-top: 1px dashed var(--t-line); margin-top: 10px; padding-top: 9px; } .le-preset { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .le-plab { font-size: 11.5px; color: var(--t-muted); } .le-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--t-muted); } .le-crow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; } .le-crow input { flex: 1 1 140px; min-width: 0; } .le-crow input.le-kurz { flex: 0 0 74px; } .le-aus > span { display: flex; flex-wrap: wrap; gap: 4px; } .le-chip { border: 1px solid var(--t-line); border-radius: 999px; padding: 1px 9px; background: transparent; color: var(--t-muted); font: inherit; font-size: 11px; cursor: pointer; } .le-chip.on { border-color: var(--lza, #1898a8); color: var(--lza, #1898a8); } .le-akk { margin-top: 10px; } .le-akkhead { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .le-akt { width: 100%; border-collapse: collapse; margin-top: 6px; } .le-akt th { font-size: 11px; color: var(--t-muted); font-weight: 600; text-align: left; padding: 0 4px 3px; } .le-akt td { padding: 2px 4px; } .le-akt input { width: 100%; box-sizing: border-box; } /* Takt, Zz, Stufe, Funktion tragen kurze Werte („1", „I", „T") — ohne feste Breiten reißt die Tafel auseinander und die Töne stehen verloren */ .le-akt td:nth-child(-n+2) { width: 62px; } .le-akt td:nth-child(3), .le-akt td:nth-child(4) { width: 96px; } .le-akt td:last-child { width: 30px; } .le-vlist { display: grid; gap: 4px; } .le-vrow { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border: 1px solid var(--t-line); border-radius: 9px; font-size: 13px; } .le-vrow.tot { border-color: #b4452a; } .le-vname { font-variant-numeric: tabular-nums; } .le-vherk { margin-left: auto; font-size: 11.5px; color: var(--t-muted); } /* ---- Bibliotheks-Raum (js/bibliotheksraum.js) ---- Der Raum baut nichts nach: bibliothek.js und katalog.js hängen ihre FERTIGEN Fenster hier ein (setHost). Diese Regeln nehmen ihnen nur den Overlay-Charakter — Vorhang, Rand und Schlagschatten. */ .br-root { height: 100%; overflow: hidden; } .br-wrap { height: 100%; display: flex; flex-direction: column; } .br-flaeche { flex: 1 1 auto; min-height: 0; position: relative; overflow: auto; } .br-leer { color: var(--t-muted); font-size: 13.5px; padding: 26px; } /* eingehängte Bibliothek: aus dem Vorhang in die Fläche */ #bib-pop.bib-inline { position: static; inset: auto; z-index: auto; padding: 0; background: none; backdrop-filter: none; display: block; height: 100%; } #bib-pop.bib-inline .bib-card { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; animation: none; } /* ⚠️ Die Kopfzeile gehört dem POPUP und fällt im Raum GANZ weg (v0.326): dort sagt die Raumleiste, wo man ist, geschlossen wird ein Raum nicht, und das Suchfeld ist in die Werkzeugzeile gewandert. Dadurch beginnt die Liste der Orte bündig unter der Raum-Kopfzeile — genau das, was vorher eine leere Leiste verhinderte (Lars). */ #bib-pop.bib-inline .bib-head { display: none; } /* Meldezeilen mit Zeichen (v0.282): Whiteboard, Cowork, Video-Sync. Rot bleibt Rot — die einzige Farbrolle, die das Leitbild als Ausnahme führt, weil ein Fehler als Fehler erkennbar sein muss. */ #wb-status.fehler, #cw-status.fehler, #vs-status.fehler { color: #b4452a; } #wb-status .ic, #cw-status .ic, #vs-status .ic { vertical-align: -.2em; } .lx-leerband { font-style: normal; font-size: 10.5px; opacity: .6; margin-left: 5px; } /* ---- Lehrer-Editor: drei Reiter in der Spalte (v0.283) ---- Palette · Stimmen · Einstellungen. Vorher war die Spalte eine einzige lange Rolle; man kam beim Stempeln nie ohne Scrollen an die Stimmen. Orientierung ist MuseScore. */ .se-tabs { display: flex; gap: 2px; margin: 0 0 12px; border-bottom: 1.5px solid var(--t-line); } .se-tab { flex: 1 1 0; min-width: 0; padding: 9px 4px 10px; margin-bottom: -1.5px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--t-muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .14s ease, border-color .14s ease; } .se-tab:hover { color: var(--blau); } .se-tab.on { color: var(--blau); border-bottom-color: var(--blau); } .se-pane[hidden] { display: none; } /* Beim Suchen sind alle Flächen offen — die Reiterleiste sagt es */ .se-col.se-suche .se-tabs { opacity: .45; } /* Eine Gruppe, die allein in ihrem Reiter steht, trägt ihren Namen schon oben — der Kopf schrumpft auf seine Bedienelemente. */ .se-sec.se-solo > summary { padding: 6px 10px 4px; } .se-sec.se-solo > summary .sdot { display: none; } /* Die Palette in der Spalte: eine Wand aus Zielen, nicht eine Reihe */ .se-palslot { display: block; } #palette.se-palcol { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; transform: none; padding: 2px 0 0; margin: 0; border: 0; box-shadow: none; background: none; } #palette.se-palcol .pal-h { display: block; grid-column: 1 / -1; margin: 8px 0 0; font-size: 11px; font-weight: 800; color: var(--t-muted); letter-spacing: .02em; } #palette.se-palcol .pal-h:first-of-type { margin-top: 0; } #palette.se-palcol button { width: auto; height: 42px; border: 1.5px solid var(--t-line); border-radius: 10px; background: #fff; font-size: 17px; color: var(--t-ink); display: flex; align-items: center; justify-content: center; } #palette.se-palcol button:hover { border-color: var(--blau); color: var(--blau); } #palette.se-palcol button.on { border-color: var(--blau); background: color-mix(in srgb, var(--blau) 12%, #fff); } /* Der Griff bleibt: an ihm zieht man die Palette heraus */ body.se-on #palette.se-palcol .pal-grip { grid-column: 1 / -1; width: auto; height: 5px; align-self: auto; margin: 0 0 6px; border-radius: 3px; } .pal-h { display: none; } .se-palnote { font-size: 12px; color: var(--t-muted); line-height: 1.5; margin: 0 0 10px; } .se-palnote button { border: 1.5px solid var(--blau); border-radius: 999px; padding: 3px 11px; background: none; color: var(--blau); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; } .se-palhint { font-size: 11.5px; color: var(--t-muted); line-height: 1.5; margin: 14px 0 0; } .se-mmrow > small { margin-left: auto; font-size: 10.5px; color: var(--t-muted); font-weight: 700; } /* Einfärbungs-Widget im Lehrer-Editor (js/editor-optionen.js) */ .eo-hlrow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; } .eo-hlrow > span:nth-child(2) { flex: 1 1 auto; } .eo-hladd { display: flex; gap: 5px; align-items: center; margin-top: 8px; } .eo-hladd select { flex: 1 1 0; min-width: 0; border: 1.5px solid var(--t-line); border-radius: 8px; padding: 4px 6px; background: #fff; font: inherit; font-size: 12.5px; } .eo-hladd button { flex: none; border: 1.5px solid var(--t-line); border-radius: 8px; width: 30px; height: 30px; background: #fff; font: inherit; cursor: pointer; } .eo-hladd button:hover { border-color: var(--blau); color: var(--blau); } .eo-wz { display: flex; align-items: center; justify-content: center; gap: 7px; } .eo-scope { display: flex; gap: 8px; } .eo-scope > label { flex: 1 1 0; min-width: 0; } /* Suchfeld der Editor-Spalte (v0.289) — vorher stand es in der Optionsspalte und wurde adoptiert; die gibt es nicht mehr. */ .se-suchfeld { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; border: 1.5px solid var(--t-line); border-radius: 11px; padding: 6px 10px; background: #fff; } .se-suchfeld > .ic { color: var(--t-muted); flex: none; } .se-suchfeld input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 13px; color: var(--t-ink); } .se-suchfeld button { border: 0; background: none; color: var(--t-muted); cursor: pointer; display: inline-flex; padding: 2px; } .se-suchfeld button:hover { color: var(--blau); } .se-mmchips .chip { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 2px; } /* ---------- Rhythmus (js/rhythmus.js) ---------- */ .rh-svg { display: block; margin: 8px auto 4px; max-width: 100%; } .rh-takt { stroke: var(--ink, #1a1a2b); stroke-width: 1.6; opacity: .55; } .rh-gl { fill: var(--ink, #1a1a2b); stroke: none; } .rh-kopf { fill: var(--ink, #1a1a2b); } .rh-kopf.hohl { fill: none; stroke: var(--ink, #1a1a2b); stroke-width: 1.6; } .rh-hals, .rh-balken { stroke: var(--ink, #1a1a2b); stroke-width: 1.7; } .rh-balken { stroke-width: 4.5; stroke-linecap: butt; } .rh-fahne { fill: none; stroke: var(--ink, #1a1a2b); stroke-width: 1.7; } .rh-punkt { fill: var(--ink, #1a1a2b); } .rh-box { fill: rgba(31, 158, 106, .16); stroke: rgba(31, 158, 106, .5); stroke-width: 1.2; } .rh-silbe { font: 700 13px/1 inherit; fill: var(--ink, #1a1a2b); } /* Treffer/Fehler wandern auf die Gruppe, nicht auf einzelne Formen */ .rh-wert.hit .rh-gl, .rh-wert.hit .rh-kopf, .rh-wert.hit .rh-box { fill: #2e9e44; } .rh-wert.hit .rh-box { stroke: #2e9e44; } .rh-wert.miss .rh-gl, .rh-wert.miss .rh-kopf, .rh-wert.miss .rh-box { fill: #d05252; } .rh-wert.miss .rh-box { stroke: #d05252; } .ex-rhybild { margin: 4px 0 2px; } .ex-rhycount { text-align: center; font-size: 30px; font-weight: 800; min-height: 34px; color: var(--accent, #1f9e6a); } .ex-tap-neben { opacity: .6; font-size: 14px; padding: 8px 12px; } /* Tondiktat, Stufe 1: den Rhythmus legen */ /* ⚠️ EIN Takt als Fläche, nicht eine Reihe fester Kästchen: die Werte sind so breit, wie sie lang sind, und der Rest bleibt offen. Deshalb kein `flex-wrap` — der Takt ist eine Zeile. */ .ex-lege { display: flex; gap: 4px; margin: 10px auto 6px; max-width: 560px; } .ex-offen { flex: 1; border-style: dashed; opacity: .55; min-width: 0; } .ex-slot { min-width: 0; padding: 11px 4px; border-radius: 9px; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; border: 1.5px dashed rgba(0, 0, 0, .22); background: none; color: var(--muted, #7a7a7a); cursor: default; } .ex-slot.voll { border-style: solid; border-color: rgba(31, 158, 106, .55); background: rgba(31, 158, 106, .14); color: var(--ink, #1a1a2b); cursor: pointer; } /* Der Block, der beim Vorführen der Lösung gerade klingt. Kein Aufblitzen, sondern ein Halten: er leuchtet, solange sein Wert dauert — die Dauer steht ja in seiner Breite, und beides zusammen ist die Auskunft (Tondiktat, hörbare Korrektur seit v0.515). */ .ex-slot.voll.ex-klingt { border-color: rgba(31, 158, 106, .95); background: rgba(31, 158, 106, .42); box-shadow: 0 0 0 3px rgba(31, 158, 106, .18); } .ex-vorrat { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; } .ex-chip { min-width: 60px; padding: 12px 12px; border-radius: 9px; font-weight: 700; font-size: 16px; border: 1px solid var(--line, #ddd); background: #f4f6fa; cursor: pointer; } .ex-chip:hover { background: #e6ecf5; } /* Fehlersuche: die Taktfläche liegt AUF dem Streifen und wandert mit */ /* Der Gleiter bleibt im FLUSS (nur relativ), sonst fällt die Box auf null Höhe und der Streifen verschwindet — er ist der einzige Inhalt. Relativ genügt: die Taktflächen brauchen ihn nur als Bezugsrahmen. */ .ex-stripslide { position: relative; will-change: transform; } .ex-mtag { position: absolute; top: 2px; height: 16px; padding: 0; font: 700 10px/16px inherit; text-align: center; color: var(--muted, #7a7a7a); border: 1px solid rgba(0, 0, 0, .12); border-bottom: none; border-radius: 5px 5px 0 0; background: rgba(255, 255, 255, .72); cursor: pointer; } .ex-mtag:hover { background: #fff; color: var(--ink, #1a1a2b); } .ex-mtag.now { border-color: var(--accent, #1f9e6a); color: var(--accent, #1f9e6a); } .ex-mtag.picked { background: var(--accent, #1f9e6a); border-color: var(--accent, #1f9e6a); color: #fff; } .ex-mtag.was-wrong { background: #d05252; border-color: #d05252; color: #fff; } .ex-mtag.was-wrong.ok { background: #2e9e44; border-color: #2e9e44; } /* Melodienquiz: ausbessern statt raten */ .ex-fixrow { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; } .ex-fix { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 10px; border: 1.5px solid transparent; touch-action: none; } .ex-fix.fok { border-color: var(--accent, #1f9e6a); background: rgba(31, 158, 106, .08); } .ex-fix.geaendert { background: rgba(224, 160, 32, .16); border-color: rgba(224, 160, 32, .55); } .ex-fixarr { border: none; background: none; cursor: pointer; padding: 2px 10px; font-size: 12px; color: var(--muted, #7a7a7a); line-height: 1; } .ex-fixarr:hover { color: var(--ink, #1a1a2b); } .ex-fixz { display: flex; flex-direction: column; align-items: center; cursor: pointer; } .ex-fixz b { font-size: 13px; font-weight: 800; } .ex-fixz .hsign { display: block; } /* Noteneingabe-Fläche (js/noteneingabe.js) */ .ne-flaeche { max-width: 560px; margin: 8px auto; cursor: crosshair; } .ne-flaeche svg { display: block; } .ex-ueb { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px; border-radius: 9px; background: rgba(0,0,0,.05); } .ex-ueb b { font-size: 17px; font-weight: 800; } .ex-ueb i { font-size: 11.5px; font-style: normal; color: var(--muted, #7a7a7a); } /* Der Rahmen schneidet die Seite auf das System zu, OHNE das Koordinatensystem des SVG anzutasten — nur so trifft die Trefferrechnung weiterhin. */ .ne-rahmen { position: relative; overflow: hidden; width: 100%; } /* Das „＋" hinter dem letzten Takt hängt an `fullBands` und meint im Editor „noch eine Taktreihe" — in einer Übungsfläche gibt es nichts anzuhängen, also weg damit. */ .ne-flaeche [data-addbars] { display: none; } /* ---------- Zeichen + Beschriftung als EINE Einheit (KS.icon.mit) ---------- Der Abstand ist knapp unter einem halben Geviert: weit genug, dass nichts klebt, eng genug, dass beides als ein Ding gelesen wird. Das Zeichen sitzt auf Versalhöhe und erbt die Farbe des Textes. */ .ks-ib { display: inline-flex; align-items: center; gap: 0.42em; vertical-align: -0.1em; } .ks-ib .ic { flex: none; width: 1.15em; height: 1.15em; } .ks-ib-t { min-width: 0; } /* ================================================================ Arbeitsmaterial (js/material.js) — die Blätter zu einem Modul. Alles hier ist auf PAPIER hin gebaut: Das Fenster ist die Vorschau des Ausdrucks, nicht eine eigene Ansicht. Deshalb weißer Grund und schwarze Tinte auch im dunklen Thema — ein Blatt, das am Bildschirm hell wirkt und aus dem Drucker dunkel kommt, ist zweimal falsch. ================================================================ */ #mt-pop { position: fixed; inset: 0; z-index: 2600; display: none; background: rgba(0, 0, 0, .55); padding: 24px 16px; overflow: auto; } #mt-pop.open { display: block; } #mt-pop .mt-box { max-width: 820px; margin: 0 auto; background: var(--card, #fff); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); overflow: hidden; } #mt-pop .mt-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line, #d8d8d8); background: var(--card, #fff); position: sticky; top: 0; z-index: 2; } #mt-pop .mt-titel { flex: 1; min-width: 0; font-weight: 600; color: var(--fg); } #mt-pop .mt-art { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent, #16688f); color: #fff; vertical-align: 1px; } #mt-pop .mt-fuer { font-size: 12px; font-weight: 500; color: var(--muted, #6b6b6b); border: 1px solid var(--line, #d8d8d8); border-radius: 999px; padding: 1px 7px; } #mt-pop .mt-akt { display: flex; gap: 6px; flex: none; } #mt-pop .mt-btn { border: 1px solid var(--line, #d8d8d8); background: var(--card, #fff); color: var(--fg); border-radius: 7px; padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; } #mt-pop .mt-btn:hover { background: var(--hover, #eee); } #mt-pop .mt-x { padding: 5px 9px; } /* Das Blatt selbst — A4-Proportion, feste Tinte. * ⚠️⚠️ NICHT auf `#mt-pop` einschränken (seit v0.456). Die FOLIE * (`tafelbildSvg`, Vorschlag F) trägt dieselbe Klasse, liegt aber in * einem `foreignObject` außerhalb des Fensters — mit der alten * Einschränkung bekam sie nur Browser-Vorgaben: h2 21 px statt 15,5, * Absatzabstand 14 statt 8 (gemessen). „Eine Quelle, zwei Ausgänge" * stimmte damit nur für den INHALT, während der Satz auseinanderlief — * genau die Drift, gegen die F gebaut wurde. Wer hier eine Regel * ergänzt, ergänzt sie für BEIDE Ausgänge; das ist der Zweck. */ .mt-blatt { background: #fff; color: #111; padding: 26px 30px 34px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 14.5px; line-height: 1.55; } /* ⚠️ Der Blattfuß gehört zum AUSDRUCK und muss deshalb mitgedruckt * werden — er steht innerhalb von `.mt-blatt`, das `body.mt-drucken` * als einziges stehen lässt. `break-inside: avoid`, damit er nicht auf * zwei Seiten zerfällt. */ .mt-fuss { margin-top: 22px; padding-top: 8px; border-top: 1px solid #ccc; font-size: 10.5px; line-height: 1.45; color: #555; break-inside: avoid; } .mt-fuss b { display: block; font-size: 10.5px; margin-bottom: 2px; color: #333; } .mt-blatt .mt-h1 { font-size: 20px; margin: 0 0 16px; font-weight: 700; } .mt-blatt h2 { font-size: 15.5px; margin: 22px 0 8px; font-weight: 700; } .mt-blatt h3 { font-size: 14.5px; margin: 16px 0 6px; font-weight: 600; } .mt-blatt p { margin: 8px 0; } .mt-blatt ul, .mt-blatt ol { margin: 8px 0 8px 22px; } .mt-blatt li { margin: 3px 0; } .mt-blatt hr { border: 0; border-top: 1px solid #ccc; margin: 18px 0; } /* ZITAT (Materialkontrakt §3.2, seit v0.456): eine Äußerung im Wortlaut. Abgesetzt und kursiv — es soll als fremde Stimme lesbar sein, nicht als Hervorhebung des Blattes. */ .mt-blatt blockquote { margin: 12px 0; padding: 2px 0 2px 14px; border-left: 3px solid #bbb; font-style: italic; color: #333; } #mt-pop .mt-diff { margin-top: 20px; padding: 10px 12px; border-left: 3px solid #999; background: #f5f5f5; font-size: 13.5px; } /* Felder — Platz zum Schreiben (Kontrakt §5). Die Linien sind GEZEICHNET, nicht Unterstriche: nur so stimmt der Abstand beim Drucken, und ein Fünfliniensystem sieht aus wie eines. */ .mt-feld { margin: 14px 0 22px; } .mt-feldlbl { font-size: 12.5px; color: #555; margin-bottom: 3px; } .mt-zeile { position: relative; margin: 0 0 8px; } .mt-zeile .mt-linie { display: block; border-bottom: 1px solid #333; } /* ⚠️ Ein Fünfliniensystem ist EIN System mit vier gleichen Zwischen- räumen, nicht fünf gestapelte Ränder. `space-between` über eine feste Höhe verteilt die fünf Linien exakt — und der Abstand ZWISCHEN zwei Systemen muss größer sein als der zwischen zwei Linien, sonst liest sich ein Blatt mit vier Systemen wie ein Liniengewirr. */ .mt-zeile-notenzeile { display: flex; flex-direction: column; justify-content: space-between; height: 48px; margin-bottom: 38px; } .mt-zeile-notenzeile .mt-linie { height: 0; border-bottom-color: #222; } .mt-zeile-dolinie .mt-linie, .mt-zeile-rhythmuszeile .mt-linie { height: 34px; } /* Die do-Marke der dolinie (Werkbank-Befund 12.4): links VOR der Linie, Grundlinie knapp über der Linie — wie der do-Schriftzug des Notenbilds, nur in Druckschwarz. Die Linie beginnt erst nach der Marke (padding), damit „do" frei steht wie ein Schlüssel. */ .mt-zeile-dolinie { padding-left: 26px; } .mt-zeile-dolinie .mt-do { position: absolute; left: 2px; bottom: -1px; font-size: 13px; font-weight: 700; line-height: 1; color: #222; } .mt-zeile-silbenzeile .mt-linie { height: 26px; border-bottom-style: dashed; } .mt-zeile-textzeile .mt-linie { height: 26px; } .mt-kasten { border: 1px solid #333; border-radius: 3px; height: 62px; margin-bottom: 10px; } /* Karten — ein Schnittbogen. Die Schnittlinien sind gestrichelt und liegen AUF der Kante, damit man an ihnen schneidet und nicht daneben. */ .mt-karten { display: grid; grid-template-columns: repeat(var(--mt-sp, 3), 1fr); gap: 0; margin: 14px 0 18px; } .mt-karten.mt-schnitt { border: 1px dashed #666; } .mt-karte { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 86px; padding: 8px 6px; text-align: center; } .mt-karten.mt-schnitt .mt-karte { border: 1px dashed #666; margin: -0.5px; } /* `ausrichtung: "links"` (Werkbank-Befund 12.7): Fallkarten mit Absätzen lesen sich zentriert schlecht — der Block bleibt gemeinsam eingemittet, nur der TEXT wird linksbündig. */ .mt-karten.mt-links .mt-karte { align-items: flex-start; text-align: left; } .mt-ktext { font-size: 13px; line-height: 1.3; } .mt-kwert { display: block; line-height: 0; } .mt-zeichen .mt-gl { fill: #111; stroke: none; } /* Diagramme — dieselbe Hülle wie im Wiki, damit ein Blatt und ein Artikel dasselbe Bild gleich zeigen. */ .mt-diag { margin: 14px 0; padding: 0; } .mt-diag .mt-diag-bild:not(:empty) { margin: 0 0 4px; } .mt-diag .wkd { display: inline-block; vertical-align: top; } .mt-diag > figcaption { font-size: 12.5px; color: #555; } /* Drucken: nur das Blatt, ohne Fensterrahmen. */ body.mt-drucken > *:not(#mt-pop) { display: none !important; } @media print { body.mt-drucken #mt-pop { position: static; display: block; background: #fff; padding: 0; overflow: visible; } body.mt-drucken #mt-pop .mt-box { max-width: none; margin: 0; box-shadow: none; border-radius: 0; } body.mt-drucken #mt-pop .mt-head { display: none; } body.mt-drucken #mt-pop .mt-blatt { padding: 0; } .mt-karte { break-inside: avoid; } .mt-feld, .mt-diag { break-inside: avoid; } } /* Blätter am Modul (Modulraum) und am Schritt (Unterrichtsraum) */ .mr-blaetter { display: flex; flex-direction: column; gap: 6px; } .mr-blatt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--fg); border-radius: 8px; padding: 8px 11px; cursor: pointer; font: inherit; } .mr-blatt:hover { background: var(--hover); border-color: var(--accent); } .mr-blatt .ic { flex: none; color: var(--accent); } .mr-bt { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; } .mr-bm { flex: none; font-size: 12px; color: var(--muted); } .ur-medien.ur-mat { margin-top: 6px; } .ur-medbtn.ur-fehlt { opacity: .55; text-decoration: line-through; cursor: not-allowed; } /* ---------- Paketeditor: Klassengruppen (K1b, v0.331) ---------- Ein Paket ist eine DURCHFÜHRUNG, also werden es viele. Die Übersicht gruppiert deshalb nach Klasse statt zu filtern — vier Klassen mit je fünf Paketen sind vier Gruppen, nicht zwanzig Karten; und der Stand je Gruppe macht den Rückstand sichtbar, wenn eine Klasse gerafft werden muss. */ .pk-grp { margin: 0 0 26px; } .pk-grphead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; } .pk-grphead h2 { margin: 0; font-size: 16px; font-weight: 700; color: #26241f; } .pk-grpn { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #f2f0ec; color: #6b665e; font-size: 12px; font-weight: 700; } /* ⚠️ Der Stand steht NEBEN seiner Überschrift, nicht am Fensterrand: mit `margin-left: auto` riss ein kurzer Text („noch nicht gehalten") quer über die ganze Breite von seiner Klasse weg. */ .pk-grpstand { font-size: 12.5px; color: #6b665e; } .pk-grpstand.mut { color: #a29c92; font-style: italic; } .pk-grpstand i { font-style: normal; color: #c9c4bb; margin: 0 2px; } /* ⚠️ Kastanie fest wie `.pk-newcard`, NICHT `var(--accent)`: der Paketeditor ist nicht akzentgesteuert (`--accent` ist dort das globale Blau), und zwei Knöpfe für dieselbe Handlung dürfen nicht verschiedene Farben haben. */ .pk-grpneu { margin-left: auto; width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.4px dashed color-mix(in srgb, #c65089 42%, #e0ddd8); border-radius: 9px; background: none; color: #c65089; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; transition: background .14s ease, border-color .14s ease; } .pk-grpneu:hover { background: color-mix(in srgb, #c65089 9%, #fff); border-style: solid; } /* Übernehmen für eine Parallelklasse + Herkunft der Kopie */ .pk-vorlagerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid #f0eeea; } .pk-herkunft { font-size: 12.5px; color: #6b665e; } .pk-klwrap { position: relative; margin-left: auto; } .pk-klpop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 13px; background: #fff; border: 1px solid #e6e4df; box-shadow: 0 14px 34px -14px rgba(28,27,24,.45); } .pk-klpop[hidden] { display: none; } .pk-klpop button { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 0; border-radius: 9px; background: none; color: #3d3a34; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; } .pk-klpop button:hover { background: color-mix(in srgb, #c65089 10%, #fff); color: #c65089; } .pk-klleer { margin: 4px 8px; font-size: 12.5px; color: #a29c92; } /* ---------- Paketeditor: Besetzung eines Modulverweises (K2, v0.332) ---- Das Modul nennt seinen `stueckbedarf`, die Besetzung nennt das Stück fuer DIESE Klasse. Die Plaetze stehen im aufgeklappten Block, ihr Stand als Chip in der Kopfzeile — ein offener Platz muss auch bei zugeklapptem Block sichtbar offen sein. */ .pk-beschip { flex: none; padding: 3px 9px; border-radius: 9px; background: #f3f1ed; color: #a29c92; font-size: 12px; font-weight: 650; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px dashed #ddd9d2; } .pk-beschip.voll { background: color-mix(in srgb, #1f9e6a 11%, #fff); color: #147951; border: 1px solid color-mix(in srgb, #1f9e6a 26%, #fff); } .pk-besetzung { margin: 0 0 10px; padding: 11px 13px; border-radius: 12px; background: color-mix(in srgb, #c65089 4%, #fbfaf8); border: 1px solid #eceae5; } .pk-beshead { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #6b665e; } .pk-besbedarf { margin: 4px 0 9px; font-size: 12.5px; line-height: 1.5; color: #827e76; } .pk-bplatz { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .pk-bnum { flex: none; width: 15px; text-align: center; font-size: 11.5px; font-weight: 700; color: #a29c92; } .pk-blabel { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #26241f; } .pk-blabel i { font-style: normal; font-size: 11.5px; color: #a29c92; } .pk-bplatz.alt .pk-blabel { color: #a29c92; text-decoration: line-through; } /* K6: von der App gesetzt. Die Marke ist LEISE — der Platz ist voll und soll es aussehen; sie sagt nur, dass hier niemand entschieden hat. */ .pk-bauto { margin-left: 2px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #3b6ea5) 12%, transparent); color: color-mix(in srgb, var(--accent, #3b6ea5) 78%, #26241f); font-size: 11px !important; } .pk-bwahl { padding: 5px 11px; border: 1.3px dashed color-mix(in srgb, #c65089 38%, #ddd9d2); border-radius: 9px; background: none; color: #c65089; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; } .pk-bwahl:hover { background: color-mix(in srgb, #c65089 8%, #fff); border-style: solid; } .pk-mwbedarf { margin: 0 0 4px; padding: 9px 12px; border-radius: 10px; background: #f7f6f3; font-size: 13px; line-height: 1.55; color: #6b665e; } /* ⚠️ Der Waehler hat seit K2 bis zu DREI Listen (Klassenmaterial, eigene Stuecke, Beispiele). Jede trug 46vh, der Dialog deckelt bei 88vh und hatte selbst keinen Ueberlauf — drei Listen haetten sich gegenseitig aus der Karte geschoben. */ .pk-mwahl { overflow-y: auto; } .pk-mwahl .pk-mwgrid { max-height: 34vh; } /* K3: das Angebot im Stueckwaehler — Modulvorschlag, dann die Treffer an Bedarf UND Klassenstufe, dann die freien Listen. */ .pk-mwvor { margin: 2px 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.55; color: #4a463f; } .pk-mwvor li { margin: 3px 0; } .pk-mwvor b { font-weight: 650; } .pk-mwnosuch { margin: 4px 0 6px; font-size: 12.8px; line-height: 1.55; color: #827e76; font-style: italic; } .pk-mwsec i { font-style: normal; font-weight: 400; color: #a29c92; } .pk-mwcard span { display: block; margin-top: 2px; font-size: 11.8px; font-weight: 400; color: #827e76; } /* Die Trefferliste schrumpft nicht mit — siehe Kommentar in paketeditor.js */ .pk-mwahl .pk-mwtreffer { flex: none; max-height: none; overflow: visible; } /* K5: Vergleich mit der Parallelklasse — Kompetenz-Differenz und Planunterschiede. Uebernommen wird je Zeile, nie von selbst. */ .pk-vgl { max-width: 980px; width: 94vw; overflow-y: auto; } .pk-vglsub { margin: 3px 0 8px; font-size: 13px; line-height: 1.55; color: #6b665e; } .pk-vgllist { margin: 0 0 6px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #4a463f; } .pk-vgllist li { margin: 3px 0; } .pk-vgllist span { display: block; font-size: 11.8px; color: #a29c92; } .pk-vgltab { display: flex; flex-direction: column; gap: 4px; } .pk-vglrow { display: grid; grid-template-columns: minmax(150px, 1.5fr) 1fr 18px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #fbfaf8; border: 1px solid #eceae5; font-size: 13px; } .pk-vglwo { display: flex; flex-direction: column; min-width: 0; } .pk-vglwo b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-vglwo i { font-style: normal; font-size: 11.5px; color: #a29c92; } .pk-vglmein { color: #a29c92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-vglfremd { color: #26241f; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pk-vglpfeil { text-align: center; color: #c9c4bb; } .pk-klpop button i { font-style: normal; color: #a29c92; font-weight: 400; } /* ⚠️ Der Griff der Raum-Leiste wurde von jedem Editor-Menue verdeckt — und ein hoeherer z-index am MENUE half nicht: `#lz-rail` ist `position: fixed` mit `z-index: 56` und bildet damit einen STAPELKONTEXT; alles darin bleibt auf 56, auch mit 9999. Angehoben wird deshalb die LEISTE, und nur solange ihr Menue offen ist. */ /* ⚠️ Seit v0.370 GEGENSTANDSLOS: der Griff hängt am Body und steckt nicht mehr im Stapelkontext der Leiste (`#lz-rail`, fixed, z-index 56), der jedes `z-index` darin auf 56 deckelte. Die Zeile bleibt als Merkposten stehen, weil der Befund selbst weiter gilt. */ /* body.lz-tools-on #lz-rail { z-index: 98; } */ /* ⚠️ Und der eigene Tooltip muss weichen: nach dem Klick bleibt der Zeiger auf dem Griff, und „Werkzeuge fuer die Stunde" legte sich genau ueber den dritten Eintrag des Menues. */ body.lz-tools-on #lz-toolbtn .lz-tip { display: none; } /* ⚠️⚠️ **Bei offenem Marken-Menü tritt der Werkzeug-Knopf zurück.** `.lz-drop` trägt zwar `z-index: 58` wie `#lz-toolwrap` — aber sie liegt IN `#lz-page` (fixed, z-index 55), und das ist ein STAPELKONTEXT: die 58 gelten nur darin, nach außen zählt die 55. Der Knopf am Body gewinnt deshalb immer und lag im Querformat mitten im Menü neben „Abmelden". Ihn wegzunehmen ist der ehrlichere Weg als Stapelkontext-Chirurgie: wer das Marken-Menü öffnet, greift gerade nicht nach den Werkzeugen. (Dieselbe Falle wie 2026 bei `#lz-rail`, siehe die auskommentierte Zeile darüber.) */ body.lz-menu-on #lz-toolwrap { display: none; } /* ---------- Katalog-Ort: Filterzeile (v0.337) ---------- Aus dem „Stoebern"-Popup uebernommen: Typ, Stufe, „nur meine", Komponisten- und Etiketten-Chips, dazu die beiden Kuratorenwerkzeuge. Sie steht NUR im Katalog-Ort und ist sonst leer. */ .bib-katfilter { padding: 0 18px 10px; display: flex; flex-direction: column; gap: 7px; } .bib-katfilter[hidden] { display: none; } .bib-kfrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .bib-kfrow select { border: 1px solid var(--b-line); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: 13px; background: #fff; color: inherit; } .bib-kfchk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--b-muted); } .bib-kfchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bib-kfhead { font-size: 12px; font-weight: 700; color: var(--b-muted); margin-right: 2px; } .bib-kfchip { border: 1px solid var(--b-line); border-radius: 999px; padding: 3px 10px; background: #fff; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; } .bib-kfchip:hover { border-color: var(--blau); color: var(--blau); } .bib-kfchip.on { background: var(--blau); border-color: var(--blau); color: #fff; } .bib-kfchip.mut { color: var(--b-muted); border-style: dashed; } /* ---- Kuratorenwerkzeuge (docs/kuratorrolle-konzept.md) ---- ⚠️ Sie sehen ANDERS aus als die übrigen Werkzeuge des Modulraums: was hier geschieht, gilt für alle. Ein Block, der sich nicht unterscheidet, lädt zum Versehen ein. */ .mr-kurator { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0; padding: 10px 14px; border: 1px solid #c9a227; border-radius: 10px; background: color-mix(in srgb, #c9a227 8%, var(--paper)); font-size: 13px; } .mr-kurator > b { display: inline-flex; align-items: center; gap: 6px; color: #8a6d0b; } .mr-kubtns { display: flex; flex-wrap: wrap; gap: 6px; } .mr-kurator .mr-btn { font-size: 12.5px; padding: 3px 10px; } .mr-kuweg { opacity: .75; } .mr-kunote { color: var(--t-muted); font-size: 12.2px; } .mr-hinweis.mr-zurueck { border-color: #b4451f; color: #8c3517; } /* Die Beschaffungsliste (K2): sie beschreibt den BESTAND, nicht die Arbeit der Lehrkraft — deshalb ruhig und ohne Alarmfarbe. */ .mr-luecken { margin: 10px 0 18px; padding: 12px 14px; border: 1px solid var(--t-line); border-radius: 10px; font-size: 13px; } .mr-luecken > b { display: inline-flex; align-items: center; gap: 6px; } .mr-luecken p { margin: 4px 0 8px; color: var(--t-muted); font-size: 12.4px; } .mr-luecken ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .mr-lksperrt { display: inline-block; min-width: 26px; font-weight: 700; color: #8a6d0b; } /* Der Kurator-Knopf im Lektionseditor: dieselbe Tinte wie der Block am Modul — was hier geschieht, gilt für alle. */ .le-btn.le-kurator { border-color: #c9a227; color: #8a6d0b; } .le-btn.le-kurator:hover { background: color-mix(in srgb, #c9a227 12%, var(--paper)); } /* Einreichen (K6) — an einem Modul, das nur der Lehrkraft gehört. Ruhig: es ist ein Angebot, keine Aufforderung. */ .mr-einreich { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; padding: 9px 14px; border: 1px dashed var(--t-line); border-radius: 10px; font-size: 12.6px; color: var(--t-muted); } /* Die Sichtungsliste steht ganz oben: sie ist Arbeit, die auf jemanden wartet, kein Bestandsteil. */ .mr-sichtung { margin: 10px 0 16px; padding: 12px 14px; border: 1px solid #c9a227; border-radius: 10px; background: color-mix(in srgb, #c9a227 8%, var(--paper)); } .mr-sichtung > b { display: inline-flex; align-items: center; gap: 6px; color: #8a6d0b; } .mr-srow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; } .mr-stitel { font-weight: 600; } .mr-sart, .mr-sns { color: var(--t-muted); font-size: 12.2px; } .mr-srow .mr-btn { font-size: 12.5px; padding: 3px 10px; } /* Freigabe im Katalog (K3): zwei Knöpfe in der Zeile, weil es dort keine Tafel gibt — der Katalog gehört niemandem, es wird nichts markiert. */ .bib-tdrev { white-space: nowrap; text-align: right; } .bib-tdrev .bib-tb { font-size: 12px; padding: 2px 8px; margin-left: 4px; } /* Wartet etwas, sagt es das Häkchen — sonst findet die Warteschlange niemand, der nicht weiß, dass es sie gibt. */ .bib-kfchk.bib-kfwartet { color: #8a6d0b; font-weight: 600; } .bib-kfchk.bib-kfwartet b { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #c9a227; color: #fff; font-size: 11.5px; text-align: center; } /* ⚠️ Die Breite ist GEMESSEN, nicht geschätzt, und sie musste zweimal wachsen: „Freigeben"+„Zurückgeben" brauchen 197 px, mit „Korrigieren" sind es 291 — und `table-layout: fixed` schneidet nicht ab, der letzte Knopf ragte 87 px in die Nachbarzelle. */ .bib-tab col.c-rev { width: 300px; } /* Korrekturformular im Katalog (K3): eine eigene Zeile IN der Tabelle, damit die Nachbarn sichtbar bleiben, mit denen man gerade vergleicht. ⚠️⚠️ Das Bibliotheksfenster hat einen EIGENEN Variablensatz (`--b-line`, `--b-muted`, gesetzt an `#bib-pop`) — `--t-line`, `--t-muted` und `--paper` sind hier NICHT definiert. Wer sie hier benutzt, schreibt eine ungültige Deklaration, und die fällt stillschweigend auf den Anfangswert zurück: gemessen wurde aus `border: 1px solid var(--t-line)` ein `border: none`, die Eingabefelder hatten keinen Rahmen. */ .bib-kedrow > td { padding: 0 !important; background: color-mix(in srgb, #c9a227 6%, #fff); } .bib-kedit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 14px; } .bib-kedit label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--b-muted); } .bib-kedit input, .bib-kedit select { border: 1px solid var(--b-line); border-radius: 7px; padding: 4px 8px; background: #fff; color: inherit; font: inherit; font-size: 13px; } .bib-kedit input { min-width: 200px; } /* ⚠️ KEIN dehnender Zwischenraum: bei 1180 px Breite riss er 600 px zwischen Felder und Knöpfe, und die Zeile zerfiel in zwei Hälften. */ .bib-kedflex { flex: 0 0 8px; } .bib-keddel { color: #b4451f; border-color: #e0b3a3; } .bib-mk.mk-dopp { background: #f3e4c0; color: #8a6d0b; } .bib-tdrev .bib-kedbtn { margin-left: 4px; } /* ---------- Fingerziele: die 22-px-Untergrenze (v0.511) ---------- * ⚠️⚠️ **Die Fingerregel des Hauses erreichte das TABLET nie.** * `button, select { min-height: 40px }` steht unter `max-width: 700px` * — das ist das Handy. Das Unterrichtsgerät ist ein iPad mit 768 px * und fiel durch; gemessen am 20.08.2026 blieben dort die * Auswahlkästchen der Bibliothek bei 13 × 13, das Schließkreuz am * Reiter bei 14 × 14, die Zeilen des Export-Dialogs bei 16 px Höhe. * Dieselbe Falle wie bei der Bibliothekstabelle in v0.510, nur * andersherum: nach dem PLATZ fragt man für das Layout, nach dem * ZEIGER für die Fingergröße. Hier zählt der Zeiger. * * ⚠️ Das ZIEL ist nicht das Bild. Ein Kästchen darf 16 px groß * aussehen, wenn die anfassbare Fläche 26 px misst — dafür sind die * Umschläge und die negativen Ränder da. Und wo sich ein Ziel * nicht groß genug machen LÄSST (die ▲▼ am Zahlenfeld, eingesperrt in * eine 27 px hohe Kapsel), fällt es am groben Zeiger weg, statt als * größeres Nichtziel stehenzubleiben. * * ⚠️ `min-height: 0` ist an jedem kleinen Knopf Pflicht — sonst * gewinnt auf dem Handy die 40er-Grundregel und macht aus 22 × 22 ein * 22 × 40 (dieselbe Falle wie bei `.num-spin` und `#tab-mini`). */ /* Schließkreuz am Reiter des Noteneditors: 14 × 14 gemessen. Die negativen Ränder halten die Reiterhöhe, wie es `.ton-x` seit jeher vormacht — der Reiter wächst nicht, das Ziel schon. */ .tab button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-height: 0; padding: 0; margin: -3px -5px -3px 0; } @media (pointer: coarse) { .tab button { width: 30px; height: 30px; margin: -7px -9px -7px -2px; } } /* Export-Dialog: die Zeilen waren 16–19 px hoch, der Umschlag ist das Ziel (Beschriftung mittreffen ist gewollt — das Kästchen allein bleibt 13 px, der Umschlag trägt es). */ #export-dialog .exp-row label { min-height: 26px; } @media (pointer: coarse) { #export-dialog .exp-row label { min-height: 34px; } } /* Bibliothek: das Auswahlkästchen einer Zeile sitzt in einem Umschlag, der die ganze Zellenbreite trägt (`.bib-hk`, gebaut in bibliothek.js). Sichtbar bleibt ein 15er Kästchen. */ .bib-hk { display: flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; margin: -4px -6px; cursor: pointer; } .bib-hk input { width: 15px; height: 15px; margin: 0; } @media (pointer: coarse) { .bib-hk { min-width: 34px; min-height: 34px; margin: -6px -8px; } .bib-hk input { width: 18px; height: 18px; } } /* ---------- `.mini2` am Finger: 21 px sind kein Ziel (v0.521) ---------- * ⚠️⚠️ **Zum vierten Mal dieselbe Falle wie in v0.511.** Die * Fingerregel des Hauses — `button, select { min-height: 40px }` — * steht unter `max-width: 700px`, also am HANDY IM HOCHFORMAT. Überall * sonst blieb die Haus-Kleinschaltfläche bei ihren 19–21 px: * gemessen am 21.08.2026 mit grobem Zeiger bei 768 × 1024 (iPad), * 1024 × 768 und 844 × 390 (Handy quer) — `#lg-check` 138 × 20, * `#lx-back` 83 × 20, `#kurs-lx` 153 × 20, `#wz-next` 63 × 20, * `#cw-stop` 78 × 19, `#ex-replay` 126 × 21. * * ⚠️ Der Entscheid vom 20.08.2026 lautete „ja, aber ERST MESSEN: je * Stelle prüfen, ob ihre Zeile umbrechen kann". Nachgemessen an 25 * Schaltflächen in acht Zeilentypen (`.ex-foot`, `.vs-row`, `.lg-kann`, * `.kk-ab`, `.ex-quizrow`, `.wb-nav`, `#lx-body`, `

`) — KEINE davon * bricht um (alle `flex` ohne `flex-wrap`). Das ist folgenlos, weil die * Regel NUR SENKRECHT wirkt: die Polsterung bleibt unangetastet, und * gemessen änderte sich keine einzige Breite (83 → 83, 123 → 123, * 138 → 138, 153 → 153). Die Zeilen werden 14 px höher, der * Seitenüberlauf blieb überall 0. * * ⚠️ `(min-width: 701px)` ist das GEGENSTÜCK zur Handyregel, kein * zweites Maß: unter 701 px gelten schon 40 px, und ein `.mini2` * (Klasse) schlüge dort ein `button` (Element) und würde sie auf 34 * VERKLEINERN. Das Handy im QUERFORMAT ist 844 px breit und fällt * deshalb hierher — richtig so, dort war es ebenfalls 20 px. * * ⚠️ `#wb-pop header button.mini2` (v0.514) bleibt bestehen: dort sind * es die Haupthandlungen der Lehrkraft, und die brauchen zusätzlich * ihre 40 px BREITE plus die Polsterung. / @media (pointer: coarse) and (min-width: 701px) { button.mini2 { min-height: 34px; min-width: 40px; } } / Die ▲▼ am Zahlenfeld sind 14 × 10 — und hier hilft weder Umschlag noch Vergrößern. ⚠️⚠️ Sie MÜSSEN in die Kapsel passen, und die ist 27 px hoch (`#se-tempo`, nachgemessen): zwei fingergroße Pfeile wären 44 px und stünden über und unter dem Feld — genau der Befund von Lars vom 02.08.2026, den `min-height: 0` schon einmal beheben musste. Zweimal 13 px wiederum ist kein Fingerziel, sondern nur ein größeres Nichtziel. Der Entscheid vom 03.08.2026 gilt deshalb für den FINGER, nicht bloß für das Handy: sie fallen weg. Die Zifferntastatur kommt vom `type="number"`, nicht von ihnen, und getippt wird die Zahl ohnehin. Am feinen Zeiger bleiben sie — dort sind 14 × 10 ein taugliches Mausziel und der schnellste Weg für ±1. / @media (pointer: coarse) { .num-spin { display: none; } } / Fußzeile des Noteneditors: „Problem melden" und „Über · Impressum" sind 14 px hohe Textzeilen, die Ansichts-Wahl 18–20 px. Am groben Zeiger bekommen sie 26 px — die Zeile wächst dadurch von 30 auf 36 px. ⚠️ NUR am groben Zeiger: die Breiten der Fußzeile sind auf 318 px im Hochformat gerechnet (s. infra.md), und mit der Maus ist eine Textzeile ein taugliches Ziel. Ihre Höhe ist ein Zugeständnis an den Finger, kein besseres Bild. / @media (pointer: coarse) { .statusbar a, .statusbar button, .statusbar select { min-height: 26px; display: inline-flex; align-items: center; } } / ---------- Die Nachfragen des Hauses (js/dialoge.js, v0.512) ---------- Erben die Grundregeln von `dialog` und geben nur dem Feld und der Warnfarbe eine Fassung. ⚠️ Die Schrift kommt NICHT von selbst mit: ein `` hängt am Body, nicht am Raum — in den Lehrer-Räumen steht sonst die Kinderschrift der Schüleroberfläche. / .ks-frage { font-family: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--t-ink); background: var(--t-panel); border-color: var(--t-line); border-radius: 16px; } .ks-frage h3 { font-size: 15.5px; font-weight: 700; } .ks-frage .hint { color: var(--t-muted); font-size: 13px; margin: 0 0 4px; line-height: 1.45; } .ks-frage-feld { width: 100%; box-sizing: border-box; border: 1px solid var(--t-line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 14.5px; background: #fff; color: inherit; } .ks-frage-feld:focus { outline: none; border-color: var(--blau, #1668b3); } .ks-frage menu button { min-height: 34px; padding: 6px 14px; border-radius: 10px; } / Mehrfachwahl (KS.wahl): die Wege stehen untereinander und tragen je einen ganzen Satz — nebeneinander wären es Spalten Kleingedrucktes. / .ks-wahl { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; } .ks-wahl-weg { display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; padding: 10px 13px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-panel); color: inherit; cursor: pointer; } .ks-wahl-weg b { font-size: 14px; font-weight: 600; } .ks-wahl-weg small { color: var(--t-muted); font-size: 12.5px; line-height: 1.4; } .ks-wahl-weg:hover { border-color: var(--blau, #1668b3); } .ks-wahl-weg:focus-visible { outline: 2px solid var(--blau, #1668b3); outline-offset: 1px; } .ks-wahl-warn { border-color: #a33; } .ks-wahl-warn b { color: #a33; } .ks-wahl-warn:hover { border-color: #a33; background: #fff5f5; } / ⚠️ Die haftende Knopfzeile (Grundregel `dialog menu`) bringt eine Trennkante und die Themenfarbe mit. Die Nachfrage des Hauses ist immer kurz — sie rollt nie, also trennt die Kante dort nichts; und ihre Fläche ist die weiße `--t-panel`, nicht die des Themas. / .ks-frage menu { background: var(--t-panel, #fff); border-top: 0; } .ks-frage-warn { background: #a33; border-color: #a33; color: #fff; } / ---------- Texteditor (v0.545, js/textedit.js) ---------- Die Fläche IST der Artikel: sie erbt die Leseklasse der Umgebung (`.lx-text` im Lexikon, `.wr-artikel` im Lehrer-Wikiraum) und bekommt hier nur den Rahmen, den ein Eingabefeld braucht. Wer sie umfärbt, nimmt ihr genau das, wofür sie gebaut ist. / .te-wrap { display: flex; flex-direction: column; gap: 6px; } .te-bar { display: flex; flex-wrap: wrap; gap: 3px; padding: 3px; border-radius: 10px; background: var(--t-bar, #f3f2ef); position: sticky; top: 0; z-index: 2; } .te-w { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; / ⚠️ `padding: 0` gehört zum Zeichen im Knopf: die allgemeine Knopfregel gibt 5px/11px, davon blieben hier 8 px Inhalt und das Zeichen würde heruntergerechnet. / padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--t-barink, #6e6a62); cursor: pointer; } .te-w:hover { background: var(--panel, #fff); color: var(--ink); } .te-w.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .te-flaeche { min-height: 220px; max-height: 52vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r, 14px); background: var(--panel, #fff); color: var(--ink); } .te-flaeche:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-glow); } / Der Platzhalter steht nur, solange NICHTS im Text steht — gemessen am serialisierten Text, nicht an `:empty`: contentEditable hält immer mindestens einen leeren Absatz, und der ist nie `:empty`. / .te-flaeche.te-leer::before { content: attr(data-platzhalter); color: var(--t-muted); pointer-events: none; display: block; } .te-flaeche .wk-h { margin: 14px 0 4px; font-size: 15px; } .te-flaeche .lx-link, .te-flaeche .wr-link, .te-flaeche .wtb-link { cursor: text; } / Diagramme sind unteilbare Blöcke: verschieben oder herausnehmen, sonst nichts (Entscheid Lars, 25.08.2026). Ihre Leiste erscheint beim Überfahren — dauerhaft sichtbar zerschnitte sie den Lesefluss. / .te-flaeche figure.wk-diag { position: relative; outline: 1px dashed var(--line); border-radius: 8px; } .te-flaeche figure.wk-diag:hover { outline-color: var(--accent-line); } / Die Leiste reitet auf der OBEREN Rahmenkante statt in der Ecke der Zeichnung: Diagramme tragen ihre Marken oft genau oben rechts („hier Luft holen"), und eine Leiste darüber verdeckte sie. Der Platz über der Kante ist frei — `.wk-diag` bringt 12 px Außenabstand mit, die Fläche 10 px Polster, zusammen mehr als die halbe Leistenhöhe. / .te-figbar { position: absolute; top: 0; right: 10px; transform: translateY(-55%); display: flex; gap: 2px; opacity: 0; padding: 2px; border-radius: 8px; background: var(--chrome, #fff); border: 1px solid var(--line); box-shadow: var(--t-elev); transition: opacity .12s; } .te-flaeche figure.wk-diag:hover .te-figbar, .te-figbar:focus-within { opacity: 1; } .te-figbar button { width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: none; color: var(--t-barink, #6e6a62); cursor: pointer; } .te-figbar button:hover { background: var(--t-bar); color: var(--ink); } / Die Bildunterschrift als editierbare Insel in der unteilbaren Figur (nur mit `diag`, s. textedit.js). Sie sieht aus wie die gedruckte Unterschrift und zeigt erst am Cursor, dass sie beschreibbar ist. / .te-flaeche .te-bu { display: inline-block; min-width: 80px; border-radius: 4px; } .te-flaeche .te-bu:hover { background: var(--accent-soft); cursor: text; } .te-flaeche .te-bu:focus { outline: 1px solid var(--accent-line); background: var(--accent-soft); } .te-flaeche .te-bu:empty::before { content: attr(data-ph); color: var(--t-muted); font-style: italic; } / Sichtung: Diagramm-Änderungen eines Vorschlags, alt neben neu. Die Zeichnungen kommen in Naturgröße und schrumpfen in der Zelle — das Popup ist 560 px, zwei Spalten teilen sich den Platz. / .lx-sicht-diag { margin: 6px 0; } .lx-dgzeile { margin: 4px 0 2px; } .lx-dgpaar { display: flex; gap: 8px; flex-wrap: wrap; } .lx-dgpaar > div { flex: 1 1 220px; min-width: 0; } .lx-dgpaar > div > span { display: block; margin-bottom: 2px; } .lx-dgpaar svg { max-width: 100%; height: auto; } / Marken-Modus am Notenbild (nur mit `diag`): die Köpfe werden anklickbar, die Leiste unter der Figur hält die vorhandenen Marken als Chips — Klick-Treffsicherheit auf gezeichneten Marken wäre Glückssache, die Liste ist ehrlich. / .te-flaeche figure.te-markmode { outline: 1px solid var(--accent-line); } .te-flaeche figure.te-markmode [data-uid] { cursor: pointer; } .te-flaeche figure.te-markmode [data-uid]:hover { opacity: .5; } .te-figbar button.on { background: var(--accent-soft); color: var(--accent); } .te-markleiste { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 6px 6px; padding-top: 4px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--t-muted); } .te-markhint { margin-right: 2px; } .te-markwarte { color: var(--accent); font-weight: 600; } .te-markchip { padding: 2px 8px; border: 1px solid var(--t-line); border-radius: 999px; background: var(--t-paper, #fff); color: var(--t-ink); font-size: 12px; cursor: pointer; } .te-markchip:hover { border-color: var(--accent-line); background: var(--accent-soft); } / Die Verweis-Wahl: getippt wird der TITEL, gespeichert die Kennung — eine Artikelkennung weiß keine Lehrkraft auswendig. */ .te-vw input[type="search"] { width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid var(--t-line); border-radius: 10px; font: inherit; font-size: 14px; background: var(--t-paper, #fff); color: var(--t-ink); } .te-vw input[type="search"]:focus { outline: none; border-color: var(--blau, #1668b3); } .te-vwliste { max-height: 46vh; overflow-y: auto; margin: 6px 0 2px; } .te-vwtreffer { display: block; width: 100%; text-align: left; padding: 7px 10px; margin: 0 0 3px; border: 1px solid var(--t-line); border-radius: 10px; background: var(--t-paper, #fff); color: var(--t-ink); cursor: pointer; } .te-vwtreffer:hover { border-color: var(--blau, #1668b3); } .te-vwtreffer b { display: block; font-size: 14px; } .te-vwtreffer small { color: var(--t-muted); font-size: 12px; }