/* ============================================================ style.css – projekteigene Regeln für "lernzeiten". Zuletzt geladen, nach den Moduldateien. KEIN Farbwert in dieser Datei. Alle Farben kommen als Variable aus ci-tokens.css. Der Projektblock [data-projekt="lernzeiten"] gehört ins MODUL-Repo, nicht hierher (siehe docs/AKZENTFARBE.md). Warum eigene lz-Komponenten statt der Modulkomponenten: ci-komponenten.css lag beim Erstellen von Paket 0 nicht vendored vor. Belegt sind aus den bestehenden Projekten .ci-seite, .ci-karte und das komplette Gerüst; die Namen der Knopf-, Feld- und Meldungsklassen sind es NICHT. Sie werden deshalb hier projekteigen gebaut – aus denselben Tokens, also optisch stimmig. Paket 1 ersetzt sie durch die Modulkomponenten, sobald die Namen belegt sind. Ein geratener Modulklassenname wäre schlimmer: Er sieht richtig aus und hat einfach keine Regel. Achtung: Wer hier eine Regel mit display schreibt, muss [hidden] selbst berücksichtigen – diese Datei wird nach ci-shell.css geladen und würde das Attribut sonst überschreiben. ============================================================ */ /* ---- Gerüst: die Kopfleiste richtet sich am FENSTER aus ----- VORLÄUFIG UND ÖRTLICH (E180). Einzelfall, gemessen am 26.09.2026. ANLASS: Der Inhalt dieser Anwendung ist je Ansicht verschieden breit – Wochenplan und Bericht brauchen die ganze Fläche, die Hilfe eine Lesebreite von 60rem, die Anmeldung 38rem. Das Modul schaltet beides mit EINEM Schalter an der Hülle (.ci-huelle--breit, A1/A2, E143): Inhalt und Kopfleiste zugleich. Das war genau richtig gegen den Fehler, den es behob – zwei Variantenklassen wären zwei Stellen, die zusammenpassen müssen. Hier zeigt dieselbe Eigenschaft ihre Rückseite: Das LOGO WANDERT beim Seitenwechsel, weil die Leiste der Inhaltsbreite folgt. DAS GERÜST IST DER RAHMEN UM DEN INHALT, NICHT EIN TEIL VON IHM. Also richtet sich die Kopfleiste am Fenster aus; das Logo sitzt immer links am Rand, mit festem Abstand. Der genannte Preis – bei schmalem Inhalt steht das Logo weit links von der Textspalte – ist keiner: So sieht fast jede Anwendung aus. Was stört, ist das Gegenteil, dass es wandert. NICHT GEWÄHLT, mit Grund: * „Die Kopfleiste trägt immer die breiteste Breite." Dann fluchtet sie bei der Wochenansicht und steht bei der Hilfe links daneben – dasselbe Problem, nur seltener sichtbar. * „.ci-huelle--breit wirkt nur auf den Inhalt." Das wäre A2 zurück: Bei der Wochenansicht wäre die Leiste SCHMALER als der Inhalt. EINE EIGENSCHAFT GENÜGT, und das ist gemessen (26.09.2026, Chrome): Das Modul zentriert mit `max-width: var(--ci-inhalt-breite)` UND `margin: 0 auto`. Bei `max-width: none` füllt der Blockkasten die Breite, und die auto-Ränder lösen zu 0 auf – berechnet `0px`, nicht die halbe Differenz. Die Gegenprobe mit 400px ergab 200px, die Messung kann also etwas messen. Ein zusätzliches `margin-inline: 0` wäre ein zweiter Wert ohne Wirkung (E48). UND KEINE EIGENE POLSTERUNG. Sie kommt aus dem Modul – `0 1.5rem`, auf schmalen Anzeigen `0 1rem` (@media 48rem). Ein eigener Wert wäre eine zweite Wahrheit über denselben Abstand (E78, E79) und nähme der Medienabfrage ihre Wirkung. Die Spezifität ist (0,2,0) wie die beiden Modulregeln; style.css wird laut index.html NACH ci-shell.css geladen, also genügt sie. DER VERMERK: Einzelfall, kein Modulbefund. koordination hat am 26.09.2026 gemessen – lernzeiten ist das einzige Projekt mit mehr als einer Inhaltsbreite; vier weitere führen die Kopfleiste, alle mit einer. Gemeldet als A11. SIE FÄLLT WEG, SOBALD EIN ZWEITES PROJEKT DASSELBE BRAUCHT UND DAS MODUL ES TRÄGT. Nicht „sobald das Modul liefert" – das ist die Lehre aus E158, wo genau dieser Vermerk falsch wurde: Das Modul hatte geliefert, und die örtliche Zeile war trotzdem noch nötig. FRIST: Nach ein paar Wochen Betrieb geht die ERFAHRUNG damit ans Modul, nicht die Lösung. Ob ein festes Gerüst über einem je Seite verschieden breiten Inhalt im Alltag trägt, ist die Auskunft, die koordination braucht – und die hat heute niemand. ------------------------------------------------------------ */ .ci-huelle--kopf .ci-leiste-innen { max-width: none; } /* ---- Sprungmarke ------------------------------------------- */ .lz-sprung { position: absolute; left: -9999px; z-index: 200; background: var(--ci-flaeche); color: var(--ci-akzent); padding: .6rem 1rem; border-radius: var(--ci-radius); } .lz-sprung:focus { left: .75rem; top: .75rem; } .lz-laedt { color: var(--ci-text-blass); } /* ---- Abschnitte -------------------------------------------- */ .lz-abschnitt { margin-block-end: var(--ci-abstand-l); } .lz-zeile { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-m); align-items: flex-end; } .lz-zeile[hidden] { display: none; } /* ---- Felder ------------------------------------------------ */ .lz-feld { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 12rem; max-width: var(--ci-feld-breite); } .lz-feld[hidden] { display: none; } .lz-feld label { font-size: var(--ci-groesse-klein); color: var(--ci-text-blass); margin-block-end: .25rem; } .lz-feld input { padding: .45rem .6rem; border: 1px solid var(--ci-linie-stark); border-radius: var(--ci-radius); background: var(--ci-flaeche); color: var(--ci-text); font: inherit; } /* ---- Knöpfe ------------------------------------------------ VORLAEUFIG (E126). lz-knopf ist entstanden, als ci-komponenten.css noch nicht vendored vorlag und die Knopfklassen unbelegt waren (docs/MODULE-UND-LAYOUT.md). Seit v1.7.0 sind sie belegt, und der Umstieg auf .ci-knopf ist entschieden - als eigenes Paket, nicht nebenbei. NACHGEZOGEN (E143): ci-css v1.8.0 hat BEIDE gemeldeten Luecken geschlossen - A3 als allgemeine [hidden]-Regel am Attribut, A4 als Mindestmass an .ci-knopf bei grobem Zeigegeraet. DIE ZWEI OERTLICHEN ZEILEN BLEIBEN TROTZDEM, bis der Umstieg auf .ci-knopf erfolgt ist. Sie haengen an dieser projekteigenen Klasse, und die Modulregel zu A4 greift dort nicht. Die Gruende stehen an den Zeilen selbst - wer hier "erledigt" liest, entfernt sie. Bis dahin bleibt diese Familie. Sie NICHT zu erweitern ist Teil der Entscheidung: Jede weitere oertliche Variante vergroessert den Abstand zum Modul. */ .lz-knopf { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border: 1px solid transparent; border-radius: var(--ci-radius); background: var(--ci-akzent); color: var(--ci-flaeche); font: inherit; font-weight: 600; cursor: pointer; } /* AUCH DIESE ZEILE BLEIBT - aber aus einem anderen Grund als bisher (E143, gemessen an der vendorten Datei): Das Modul fuehrt seit v1.8.0 eine allgemeine Regel "[hidden], [hidden][hidden][hidden] { display: none; }". Sie haengt am ATTRIBUT, nicht an .ci-knopf - sie greift also auch hier, und mit (0,3,0) schlaegt sie .lz-knopf (0,1,0). Die Zeile ist damit nicht mehr die einzige Sicherung, sondern die zweite. Sie bleibt trotzdem: "Jede display-Regel beruecksichtigt [hidden]" ist eine Regel der Reihe, und eine Pruefung haelt sie an JEDER projekteigenen Klasse fest. Wer sie hier herausnimmt, macht eine Ausnahme, die niemand entschieden hat. */ .lz-knopf[hidden] { display: none; } .lz-knopf:hover { background: var(--ci-akzent-hover); } .lz-knopf:disabled { opacity: .55; cursor: default; } .lz-knopf--zweit { background: var(--ci-flaeche); border-color: var(--ci-linie-stark); color: var(--ci-text); } .lz-knopf--zweit:hover { background: var(--ci-flaeche-2); } .lz-knopf--gefahr { background: var(--ci-fehler); } .lz-knopf--gefahr:hover { background: var(--ci-fehler-text); } .lz-knopfzeile { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-s); margin-block-start: var(--ci-abstand-m); } .lz-knopfzeile[hidden] { display: none; } /* ---- Auswahlgruppen ---------------------------------------- */ .lz-gruppen { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-m); margin-block-end: var(--ci-abstand-m); } .lz-gruppen[hidden] { display: none; } /* ---- Meldungen und Hinweise -------------------------------- */ .lz-meldung { padding: .6rem .9rem; border-radius: var(--ci-radius); margin-block-end: var(--ci-abstand-m); } .lz-meldung--info { background: var(--ci-akzent-flaeche); color: var(--ci-akzent-text); } .lz-meldung--ok { background: var(--ci-erfolg-flaeche); color: var(--ci-erfolg-text); } .lz-meldung--fehler { background: var(--ci-fehler-flaeche); color: var(--ci-fehler-text); } .lz-hinweis { color: var(--ci-text-blass); font-size: var(--ci-groesse-klein); } .lz-warnung { padding: var(--ci-abstand-m); border: 1px solid var(--ci-warnung); border-radius: var(--ci-radius); background: var(--ci-warnung-flaeche); color: var(--ci-warnung-text); } /* ---- Der Streifen der Probe-Instanz (E349) ---------------- */ /* Oben auf jeder Seite, auch auf dem Ausdruck: Ein Blatt aus der Probe soll nicht aussehen wie eines aus dem Betrieb. Kein display - [hidden] behaelt das letzte Wort (REIHENREGELN 7). */ .lz-probe-streifen { position: sticky; top: 0; z-index: 10; padding: var(--ci-abstand-s) var(--ci-abstand-m); border-bottom: 2px solid var(--ci-warnung); background: var(--ci-warnung-flaeche); color: var(--ci-warnung-text); font-weight: bold; text-align: center; } /* ---- Befunde ----------------------------------------------- */ .lz-befund { border-left: 4px solid var(--ci-linie-stark); } .lz-befund--gruen { border-left-color: var(--ci-erfolg); } .lz-befund--gelb { border-left-color: var(--ci-warnung); } .lz-befund--rot { border-left-color: var(--ci-fehler); } .lz-roh { white-space: pre-wrap; word-break: break-word; font-family: var(--ci-schrift-mono); font-size: var(--ci-groesse-klein); background: var(--ci-flaeche-2); padding: var(--ci-abstand-m); border-radius: var(--ci-radius); margin: 0; } /* Die Hilfe als Fragen (E165) ------------------------------------ */ /* * ECHTE
, keine nachgebaute Mechanik. Das Dreieck und das * Auf- und Zuklappen bringt der Browser mit; hier steht nur, wie es * aussieht. * * Die Frage ist die Flaeche zum Antippen und haelt deshalb das * Mindestmass fuer den Daumen ein - wie jeder Knopf (E126). */ .lz-hilfe-kurz { font-size: var(--ci-groesse-gross); margin-block-end: var(--ci-abstand-l); } /* JE FRAGE EINE FLAECHE (E168): Die Absetzung macht `ci-karte` aus * dem Modul - Rand, Ecken, Polsterung, Abstand nach unten. Hier stand * `border-block-start` mit eigener Polsterung; das war eine Haarlinie * zwischen zwei Absaetzen und keine Flaeche. * Uebrig bleibt nichts zu setzen: Die Karte bringt alles mit. */ .lz-hilfe-frage > summary { cursor: pointer; font-weight: 600; min-height: var(--ci-beruehrung-min); display: flex; align-items: center; gap: var(--ci-abstand-s); } /* [hidden] hat das letzte Wort - auch hier (Projektregel). */ .lz-hilfe-frage > summary[hidden] { display: none; } /* Der Text ruecht unter der Frage ein, damit die Liste der Fragen * beim Ueberfliegen eine Kante behaelt. */ .lz-hilfe-frage > p, .lz-hilfe-frage > pre { margin-inline-start: var(--ci-abstand-m); } /* Anmeldung (Paket 2, Zug 1) ------------------------------------- */ /* Kein Farbwert hier – alles aus ci-tokens.css. Dieses Projekt nimmt die Ausnahme der Reihe fuer Kategorienpaletten nicht in Anspruch. */ .lz-wer { font-weight: 600; margin-right: var(--ci-abstand-s, .5rem); } /* [hidden] hat das letzte Wort: Dieses Projekt-CSS wird nach ci-shell.css geladen und ueberschriebe das Attribut sonst. */ .lz-knopf--schmal[hidden], .lz-wer[hidden] { display: none !important; } .lz-knopf--schmal { padding: .25rem .75rem; font-size: .9em; } /* Schuelersicht (Paket 2, Zug 1) ---------------------------------- */ /* Kein Farbwert – die Statusfarben kommen aus lz-befund--*, und die aus ci-tokens.css. Die Farben aus WebUntis werden NICHT benutzt: Sie bedeuten dort etwas, das wir nicht vollstaendig kennen (E88). */ .lz-zeile { padding: var(--ci-abstand-m, .75rem); margin-bottom: var(--ci-abstand-s, .5rem); } /* Auf dem Telefon lesbar: Kinder buchen vom Telefon. */ @media (max-width: 30rem) { .lz-zeile { padding: var(--ci-abstand-s, .5rem); } .lz-knopfzeile { display: flex; flex-wrap: wrap; } } /* ============================================================ Schuelersicht: der Tag mit der Lernzeit an seiner Stelle (E120) ============================================================ */ /* Kacheln der Lernzeitwahl: DAS MODULRASTER --schmal, und drei eigene Zeilen daneben (E182). HIER STAND EIN VOLLSTAENDIG NACHGEBAUTES RASTER, mit dem Grund „auto-FIT gegen auto-FILL": .ci-raster--schmal lag bei auto-fill, und das laesst leere Spalten stehen — zwei Kacheln auf einem breiten Bildschirm blieben beide schmal (E132, E143, Modulbefund A8). SEIT ci-css v1.9.0 FUEHRT .ci-raster--schmal auto-fit. Der Grund ist entfallen, und damit das eigene Raster: Breite (--ci-raster-min- schmal) und Verteilung kommen jetzt aus dem Modul. WAS BLEIBT, UND WARUM: * `align-items: stretch` IST WEG (E246). Es hob das `start` des Moduls auf; seit ci-css v2.0.0 streckt `.ci-raster` selbst. Gemessen 02.10.2026, Chrome: mit und ohne die Zeile 116/116, unter v1.9.0 ohne sie 91/116. Der Waechter ist die Pruefung auf `stretch` in der Moduldatei. * `gap` und `margin` — das Modul setzt `--ci-abstand-m`. Zwischen Kacheln von 9.5rem wirkt das zerrissen. Der Wert bleibt, WEIL ER HEUTE SO IST: Ihn zu aendern ist eine Gestaltungsfrage, die ein Blick im Browser entscheidet, und der ist hier nicht zu haben. WEGGEFALLEN: `display: grid`, `grid-template-columns` (beide aus dem Modul), `.lz-kacheln[hidden]` (das Modul traegt `[hidden]` mit Spezifitaet (0,3,0) und schlaegt jede Klasse) und `> .ci-karte { margin-bottom: 0 }` (setzt `.ci-raster` selbst). */ .lz-kacheln { gap: var(--ci-abstand-s); margin: var(--ci-abstand-s) 0; } /* Eine Tageszeile des eigenen Plans: Nummer und Zeit links, der Unterricht rechts. */ .lz-stunde { display: flex; gap: var(--ci-abstand-s); align-items: baseline; /* padding-block statt der Kurzform: lz-block setzt den seitlichen Abstand, und eine Kurzform hier wuerde ihn je nach Reihenfolge wieder auf null ziehen (E129). */ padding-block: .45rem; } .lz-stunde[hidden] { display: none; } .lz-stunde-zeit { flex: 0 0 6.5rem; font-variant-numeric: tabular-nums; color: var(--ci-text-blass); font-size: .85rem; } .lz-stunde-inhalt { flex: 1 1 auto; min-width: 0; } /* Die gewaehlte Lernzeit ist eine Stunde wie jede andere - nur hervorgehoben. Der Plan bleibt geschlossen. */ .lz-stunde--gewaehlt { border-left: 4px solid var(--ci-akzent); padding-left: var(--ci-abstand-s); background: var(--ci-akzent-flaeche); } /* Ein Fach, das ausfaellt, wird durchgestrichen - die Kachel bleibt stehen. Wer seine Lernzeit gar nicht findet, haelt die Anwendung fuer kaputt. */ .lz-faellt-aus { text-decoration: line-through; } /* Auf dem Telefon zuerst: Knoepfe sind mit dem Daumen zu treffen. BERICHTIGT (E143). Hier stand "bleibt auch nach dem Umstieg - das Modul hat kein Mindestmass". Das Modul HAT eines, seit v1.8.0: @media (pointer: coarse) { .ci-knopf { min-height: ... } } Es greift aber nur auf .ci-knopf, nicht auf diese projekteigene Klasse. Die Zeile bleibt also - nicht weil das Modul nichts liefert, sondern weil sie an der falschen Klasse haengt. SIE FAELLT MIT DEM UMSTIEG AUF .ci-knopf (E126, eigenes Paket). Danach entscheidet das Modul, und es tut es enger: nur bei einem groben Zeigegeraet. Am Monitor mit Maus waren 39px nie ein Problem - die Begruendung steht in ci-komponenten.css. Der Wert kommt aus dem Modul, nicht als eigene Zahl: Zwei Stellen fuer dasselbe Mass waeren eine zweite Wahrheit (E78, E79). */ .lz-knopf { min-height: var(--ci-beruehrung-min); } .lz-tag { margin-bottom: var(--ci-abstand-m); } .lz-tag-kopf { margin: 0 0 var(--ci-abstand-s); } /* Nummer und Uhrzeit untereinander: "1.-2." ueber "08:00-09:35". Eine Doppelstunde ist EINE Zeile mit ihrem ganzen Umfang (E121). */ .lz-stunde-nr { display: block; font-weight: 600; color: var(--ci-text); } .lz-stunde-uhr { display: block; } .lz-stunde-nr[hidden], .lz-stunde-uhr[hidden] { display: none; } /* ============================================================ Fassung 2: Wochenleiste und Wochenansicht (E122) ============================================================ */ /* ---- Wochenleiste (Telefon) ------------------------------- */ .lz-wochenleiste { display: flex; align-items: stretch; gap: var(--ci-abstand-s); margin-bottom: var(--ci-abstand-m); } .lz-wochenleiste[hidden] { display: none; } .lz-pfeil { min-width: var(--ci-beruehrung-min); } .lz-wochentage { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; flex: 1 1 auto; } .lz-wochentage[hidden] { display: none; } /* Ein echter Knopf, mit dem Daumen zu treffen. */ .lz-wochentag { min-height: var(--ci-beruehrung-min); padding: .3rem .1rem; border: 1px solid var(--ci-linie); /* --ci-radius, NICHT --ci-radius-s: Den Namen gab es hier von E122 bis E129, im Modul aber nie. var() ohne Ersatzwert macht die ganze Zeile ungueltig - die Ecken waren seither eckig, und nichts hat es gemeldet (E129). */ border-radius: var(--ci-radius); background: var(--ci-grund); color: var(--ci-text); font: inherit; cursor: pointer; text-align: center; } .lz-wochentag[hidden] { display: none; } .lz-wochentag--gewaehlt { border-color: var(--ci-akzent); border-bottom-width: 3px; background: var(--ci-akzent-flaeche); } .lz-wochentag-kopf { display: block; font-size: .8rem; } .lz-wochentag-kopf[hidden] { display: none; } /* DREI ZUSTAENDE, JEDER MIT EINEM WORT. Die Farbe kommt dazu, sie traegt die Unterscheidung nicht allein - wer Farben nicht trennt, saehe sonst fuenf gleiche Kaestchen. */ .lz-wochentag-marke { display: block; font-size: .7rem; font-weight: 600; } .lz-wochentag-marke[hidden] { display: none; } .lz-wochentag-marke--keine { color: var(--ci-text-blass); } .lz-wochentag-marke--offen { color: var(--ci-akzent-text); } .lz-wochentag-marke--gebucht { color: var(--ci-akzent-text); } /* ---- Wochenansicht (iPad, Laptop) ------------------------- HIER STANDEN .lz-wochenraster, .lz-wochenspalte, .lz-wochenspalte-kopf und .lz-lzreihe - die fuenf Tagesspalten aus E122. Mit dem Raster (E130) sind sie gegenstandslos und GELOESCHT: Eine Regel ohne Element ist ein toter Weg, und der sieht benutzbar aus (E119). Was sie konnten, steht unter "Das Wochenraster". */ /* ============================================================ Fassung 2b: Kompakter, und der Langname zum Antippen (E123) ============================================================ */ /* Das Kuerzel ist ein Knopf, sieht aber nicht wie einer aus - es steht mitten im Text. Punktiert unterstrichen, wie ein : Das ist die gewohnte Andeutung fuer "hier steckt mehr dahinter". */ .lz-fach { display: inline; } .lz-fach[hidden] { display: none; } .lz-fachknopf { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; } .lz-fachknopf[aria-expanded="true"] { text-decoration: none; font-weight: 600; } /* ---- Kompakter (E123) ------------------------------------- */ /* Die Uhrzeit brach auf drei Zeilen um. Sie bekommt Platz und umbricht nicht mehr. */ .lz-stunde-zeit { white-space: nowrap; } .lz-stunde { padding-block: .3rem; } .lz-stunde-inhalt > p { margin: 0; } /* Fach, Lehrkraft und Raum standen untereinander. Eine Zeile. */ .lz-stunde-haupt { margin: 0; } /* ---- Mehr Breite, aber begrenzt --------------------------- */ /* Die Woche war auf die uebliche Lesebreite begrenzt; links und rechts blieb der halbe Monitor leer. Mehr zulassen - aber begrenzt, sonst werden die Spalten unlesbar breit. WIRKSAM WIRD DAS ERST mit .ci-inhalt-innen--breit am Geruest (E124): Solange .ci-inhalt-innen auf 76rem begrenzt, ist eine groessere max-width hier wirkungslos. */ .lz-breit { max-width: 108rem; margin-inline: auto; } .lz-breit[hidden] { display: none; } /* Mit Seitenspalte darf der Kasten breiter werden - damit die Tagesspalten durch sie NICHT schmaler werden als ohne sie. UEBER EINE KLASSE, NICHT UEBER EINE ZWEITE MEDIENABFRAGE (E131): Ob die Seitenspalte ueberhaupt gezeichnet wird, entscheidet seitenspaltePasst() in app.js. Stuende die Schwelle zusaetzlich hier, gaebe es zwei Stellen fuer dieselbe Entscheidung - und die zweite wandert (E78, E97). */ .lz-breit--spalte { max-width: 132rem; } .lz-breit--spalte[hidden] { display: none; } /* ---- Sehr breite Bildschirme: die Woche und daneben ------- */ .lz-nebeneinander { display: block; } .lz-nebeneinander[hidden] { display: none; } .lz-nebeneinander--spalte[hidden] { display: none; } /* DIE SEITENSPALTE ERST, WENN DIE WOCHE SELBST GENUG PLATZ HAT (E124). Sie kam bei 100rem und teilte sich die Breite mit der Woche - die Tagesspalten wurden dadurch SCHMALER als vorher. minmax(0, 108rem) haelt die Woche auf genau der Breite, die sie auch ohne Seitenspalte haette. Die Klasse setzt app.js, wenn die Spalte auch GEZEICHNET wird (E131) - vorher stand hier eine Medienabfrage, und die Anzeige zeichnete unabhaengig davon beides. */ .lz-nebeneinander--spalte { display: grid; grid-template-columns: minmax(0, 108rem) 20rem; gap: var(--ci-abstand-m); align-items: start; } .lz-seitenspalte { min-width: 0; } .lz-seitenspalte[hidden] { display: none; } /* Knoepfe ragten aus der schmalen Tagesspalte heraus (E124), nahmen dann die volle Spaltenbreite (zu grob, E129) und haben jetzt ihre natuerliche Breite mit Umbruch. Im Raster gilt dasselbe, an der Rasterzelle - die Tagesspalte gibt es nicht mehr (E130). DIE ZWEITE ZEILE IST ERSATZLOS WEG: overflow-wrap: anywhere sollte einen Ueberlauf abwenden und hat dafuer JEDES Wort zerschnitten. Auf dem iPad brach "BG 1.040" in "BG" und "1.040" auseinander, und zwei Zeilen daraus lesen sich wie zwei Raeume. Was ueberlaufen koennte, faengt jetzt max-width an der Zelle; was eine Einheit ist, bricht gar nicht mehr (siehe .lz-wert weiter unten). */ /* Der aufgeklappte Langname steht UNTER dem Kuerzel, nicht daneben - sonst zerreisst er die schmale Zeile (E124). */ .lz-fachlang { display: block; color: var(--ci-text-blass); } .lz-fachlang[hidden] { display: none; } /* ============================================================ Aenderungen in der Zeile statt in Kaesten (E125) ============================================================ */ /* Der alte Wert durchgestrichen, der neue daneben - wie in WebUntis. DAS DURCHSTREICHEN traegt die Bedeutung, nicht die Farbe: Wer Farben nicht unterscheidet, sieht es trotzdem. Und fuer Vorleseprogramme steht die Aenderung zusaetzlich als Satz da (.ci-nur-vorlesen). */ .lz-geaendert { white-space: nowrap; } .lz-geaendert[hidden] { display: none; } .lz-alt { color: var(--ci-text-blass); text-decoration: line-through; } .lz-neu { color: var(--ci-akzent-text); background: var(--ci-akzent-flaeche); text-decoration: none; padding: 0 .2rem; border-radius: var(--ci-radius); /* nicht --ci-radius-s, s. o. */ } /* Eine Vertretung ist eine Auskunft, kein Fehler - der Ton bleibt ruhig. Das Warngelb ist fuer Ausfall und Fehlermeldungen. */ /* ============================================================ Mehr Platz heisst auch groessere Schrift (E125) ============================================================ */ /* Am Monitor war Platz, aber die Schrift blieb klein und die Zeilen eng - unter der Woche blieb die halbe Hoehe leer. Ab der breiten Anordnung duerfen beide wachsen. UEBER DIE MODUL-TOKENS, nicht mit eigenen Werten: --ci-groesse-normal/-gross und --ci-zeilenhoehe sind belegt. */ @media (min-width: 60rem) { .lz-wochenraster { font-size: var(--ci-groesse-gross); line-height: var(--ci-zeilenhoehe); } .lz-wochenraster .lz-stunde { padding-block: .55rem; } .lz-wochenraster .lz-hinweis { font-size: var(--ci-groesse-normal); } .lz-wochenspalte-kopf { font-size: var(--ci-groesse-titel); } } /* Ein echtes Formular, damit Enter absendet (E127). Es traegt keine eigene Gestaltung - die Felder und Knoepfe darin haben ihre. */ .lz-formular { display: contents; } .lz-formular[hidden] { display: none; } /* ============================================================ Abwechselnd hinterlegte Zeilen, und die Anmeldekarte (E129) ============================================================ */ /* ---- Eine Zeile des Plans --------------------------------- */ /* lz-block ist die AEUSSERE Huelle einer Zeile - mal die Zeile selbst, mal ein Kasten, der die Zeile und ihre Auswahl enthaelt. Sie traegt den seitlichen Abstand, damit die Hinterlegung ueber den Text hinausreicht UND kein Knopf am Spaltenrand klebt. Den Abstand bekommen ALLE Zeilen, nicht nur die hinterlegten - sonst saehe jede zweite eingerueckt aus. */ .lz-block { padding-inline: var(--ci-abstand-s); border-radius: var(--ci-radius); } .lz-block[hidden] { display: none; } /* JEDE ZWEITE STUNDE LEICHT HINTERLEGT (E129), und die Trennlinien zwischen den Zeilen sind dafuer entfallen - beides zusammen wird unruhig. --ci-grund ist der hellste Ton der Modulpalette (#f4f6f9 auf weisser Karte). NACHGERECHNET, nicht angenommen; WCAG AA verlangt 4.5: --ci-text 13.98 (auf Weiss 15.14) --ci-text-blass 5.34 (auf Weiss 5.78) --ci-akzent-text 9.59 (auf Weiss 10.38) --ci-flaeche-2 waere der naechste Ton und traegt --ci-text-blass nur noch mit 4.87. Das reicht, ist aber weder dezent noch grosszuegig - und --ci-text-schwach faellt dort mit 3.90 durch. Wer hier nachbessert, rechnet neu. DIE EIGENE HERVORHEBUNG BLEIBT OBEN: lz-stunde--gewaehlt und die Warnkaesten setzen ihren Grund am inneren Element. */ .lz-wechsel { background: var(--ci-grund); } .lz-wechsel[hidden] { display: none; } /* ---- "Meine Lernzeiten" als eigene Karte ------------------- */ /* Die Seitenspalte wird nur noch gezeichnet, wenn sie NEBEN der Woche steht (E131); gestapelt gibt es sie nicht mehr. Der Abstand kommt aus der Luecke des Rasters. */ /* Der Abschnitt ist das letzte Kind der Karte; sein Abstand nach unten kaeme zur Polsterung der Karte hinzu. */ .lz-seitenspalte .ci-karte > .lz-abschnitt:last-child { margin-block-end: 0; } /* ---- Die Anmeldekarte ------------------------------------- */ /* ENTFERNT (E143): .lz-anmeldekarte. Sie war die vorlaeufige oertliche Zeile zu A5 - eine schmale, mittige Karte fuer ein einzelnes Formular. ci-css v1.8.0 liefert dafuer .ci-inhalt-innen--formular (38 rem); seitenbreite() setzt sie fuer die Anmeldung, und die Karte fuellt den Bereich. DIE OERTLICHE ZEILE FAELLT WEG, DER ZUSTAND BLEIBT - genau die Reihenfolge, die E129 verlangt. */ /* ============================================================ Das Wochenraster: Einheiten mal Tage (E130), nach dem Entwurf vom 22.09.2026 (E132) ============================================================ */ /* Eine echte Tabelle. Ein Vorleseprogramm liest daraus "Dienstag, 3. Stunde, Englisch" - das ist der Grund, nicht die Optik. ABGESETZTE ZELLEN STATT DURCHGEHENDER LINIEN (Entwurf, E132): border-spacing statt border-collapse. Jede Stunde und jede Doppelstunde ist eine eigene Flaeche mit gerundeten Ecken; was zusammengehoert, sieht man an der Flaeche und nicht an einem Linienraster. */ .lz-raster { width: 100%; border-collapse: separate; border-spacing: var(--ci-abstand-xs); table-layout: fixed; } .lz-raster[hidden] { display: none; } /* Die Kopfzeile: die fuenf Tage. */ .lz-rasterkopf { text-align: left; padding: 0 var(--ci-abstand-s) var(--ci-abstand-xs); font-size: var(--ci-groesse-normal); font-weight: 400; } .lz-rastereck { width: 6.5rem; text-align: left; padding: 0 var(--ci-abstand-xs) var(--ci-abstand-xs); font-size: var(--ci-groesse-klein); color: var(--ci-text-blass); } /* Die Kopfspalte: Nummer und Uhrzeit, EINMAL je Stunde. Vorher stand beides in jeder der fuenf Spalten. */ .lz-rasterstunde { text-align: left; vertical-align: top; padding: .45rem var(--ci-abstand-xs); font-weight: 400; white-space: nowrap; } /* EINE ZELLE IST EINE FLAECHE, keine Zeile zwischen Linien. */ .lz-rasterzelle { vertical-align: top; padding: .45rem var(--ci-abstand-s); border-radius: var(--ci-radius); background: var(--ci-grund); /* Eine Doppelstunde ueberspannt zwei Zeilen; ihr Inhalt steht oben, nicht in der Mitte zwischen zwei Stunden. */ } .lz-rasterzelle[hidden] { display: none; } .lz-rasterzelle > p { margin: 0; } /* LEER BLEIBT LEER - und zwar OHNE Flaeche (Entwurf, E132). Wo nichts ist, ist auch keine Kachel; so sieht man die Luecken im Tag auf einen Blick. */ .lz-rasterzelle--leer { background: transparent; } /* NICHT GELADEN IST NICHT LEER (E124). Der Unterschied darf im Raster nicht verschwinden: Eine Spalte ohne Flaechen liest sich als "den ganzen Tag frei". */ .lz-rasterzelle--unbekannt { background: var(--ci-flaeche-2); text-align: center; } /* ---- Der Farbwechsel je Block, auf den Zellen ------------- */ /* JE BLOCK, NICHT JE ZEILE (E131) - und auf der ZELLE, nicht als Zeilenstreifen (Entwurf, E132). Eine Doppelstunde liegt in genau einem Block, also traegt ihre Flaeche genau eine Farbe. NACHGERECHNET (E129), AA verlangt 4.5: auf --ci-grund Text 13.98 · blass 5.34 · Akzenttext 9.59 auf --ci-flaeche-2 Text 12.76 · blass 4.87 · Akzenttext 8.75 Beide tragen jeden Textton, den eine Zelle zeigt. Wer hier nachbessert, rechnet neu. */ .lz-raster tbody tr.lz-wechsel > .lz-rasterzelle { background: var(--ci-flaeche-2); } .lz-raster tbody tr.lz-wechsel > .lz-rasterzelle--leer { background: transparent; } /* DIE LERNZEITZEILE: die einzige hervorgehobene. */ .lz-rasterzeile--lz .lz-rasterstunde { background: var(--ci-akzent-flaeche); border-radius: var(--ci-radius); color: var(--ci-akzent-text); font-weight: 600; } .lz-raster tbody tr.lz-rasterzeile--lz > .lz-rasterzelle--lz, .lz-rasterzelle--lz { background: var(--ci-akzent-flaeche); } /* GEBUCHT UND GEOEFFNET tragen einen Ring - nicht der Knopf sagt, dass etwas offen ist, sondern die Zelle (E132). Ein schwacher Knopf liest sich als abgeschaltet. */ .lz-raster tbody tr > .lz-rasterzelle--gebucht, .lz-raster tbody tr > .lz-rasterzelle--offen { background: var(--ci-akzent-flaeche); box-shadow: inset 0 0 0 2px var(--ci-akzent); } /* Fallen alle aus, ist das eine Warnung - und sie faerbt die Flaeche, nicht nur die Marke. */ .lz-raster tbody tr > .lz-rasterzelle--aus { background: var(--ci-warnung-flaeche); } /* Knoepfe in der Zelle bleiben mit dem Daumen zu treffen. Der Entwurf zeigt 36 px; dabei bleibt es NICHT (E126). Wird die siebte Zeile dadurch hoeher als die anderen, ist das hinzunehmen - es ist nur diese eine. */ .lz-rasterzelle .lz-knopfzeile { margin-block-start: var(--ci-abstand-xs); } .lz-rasterzelle .lz-knopf { max-width: 100%; } /* "LERNZEIT WAEHLEN" MITTIG UEBER DIE BREITE DER ZELLE (E132). */ .lz-knopf--breit { width: 100%; justify-content: center; margin-block-end: var(--ci-abstand-xs); } .lz-knopf--breit[hidden] { display: none; } /* ---- Die Wahlflaeche unter dem Raster --------------------- */ /* HINTERLEGT UND GANZ UMRAHMT (Entwurf, E132) - vorher weiss mit einem Streifen links. Sie gehoert sichtbar zu der Zelle, aus der sie aufgegangen ist, und die traegt denselben Ring. */ .lz-wahlflaeche { background: var(--ci-akzent-flaeche); border: 2px solid var(--ci-akzent); } .lz-wahlflaeche[hidden] { display: none; } /* UEBERSCHRIFT LINKS, "SCHLIESSEN" OBEN RECHTS - in derselben Zeile. Unten stand er hinter den Kacheln; wer zumachen will, sucht ihn dort, wo er aufgemacht hat. */ .lz-wahlkopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ci-abstand-s); flex-wrap: wrap; } .lz-wahlkopf[hidden] { display: none; } .lz-wahlkopf > h3 { margin: 0; color: var(--ci-akzent-text); } /* ---- Die Kacheln: das Fach zuerst ------------------------- */ /* DAS FACH GROSS UND FETT, darunter Lehrkraft und Raum in EINER Zeile, darunter die Plaetze, dann der Knopf (Entwurf, E132). */ .lz-kachelfach { font-size: var(--ci-groesse-gross); margin: 0; } .lz-kachelfach[hidden] { display: none; } .lz-kachelfach .lz-fachknopf { font-weight: 700; } /* .lz-kacheldatum ist ENTFALLEN (E187): Das Datum steht in "Meine Lernzeiten" jetzt in derselben Zeile wie Fach, Lehrkraft und Raum, in beiden Formen. Hier stand eine eigene Zeile nur fuer das Datum. */ .lz-lzkachel { display: flex; flex-direction: column; gap: var(--ci-abstand-xs); margin-bottom: 0; } .lz-lzkachel[hidden] { display: none; } .lz-lzkachel > p { margin: 0; } /* Der Knopf schliesst die Kachel ab, ueber die ganze Breite. */ .lz-lzkachel .lz-knopfzeile { margin-block-start: auto; } .lz-lzkachel .lz-knopf { width: 100%; justify-content: center; } .lz-meine-eintrag { display: flex; flex-direction: column; gap: var(--ci-abstand-xs); } .lz-meine-eintrag[hidden] { display: none; } .lz-meine-eintrag > p { margin: 0; } /* ---- Die Wochensteuerung in einer Zeile ------------------- */ .lz-wochensteuerung { display: flex; align-items: center; gap: var(--ci-abstand-s); flex-wrap: wrap; margin-block-end: var(--ci-abstand-m); } .lz-wochensteuerung[hidden] { display: none; } .lz-wochentitel { font-weight: 600; font-size: var(--ci-groesse-gross); white-space: nowrap; } .lz-wochentitel[hidden] { display: none; } /* "Heute" bleibt sichtbar, auch wenn es nichts zu tun hat - ein Knopf, der verschwindet, laesst die Zeile springen. */ .lz-knopf[aria-disabled="true"] { opacity: .55; cursor: default; } /* ---- "Meine Lernzeiten": zwei Formen, eine Quelle --------- */ .lz-meine-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--ci-abstand-s); align-items: stretch; } .lz-meine-kacheln[hidden] { display: none; } .lz-meine-kachel { margin-bottom: 0; } .lz-meine-kachel[hidden] { display: none; } .lz-meine-kachel .lz-stunde { flex-wrap: wrap; } .lz-meine-liste { display: block; } .lz-meine-liste[hidden] { display: none; } /* "Abwaehlen" steht UNTER der Buchung - nebeneinander nur, wenn beides in die Zeile passt (E133). ANLASS: Auf dem Telefon stand der Knopf bei zwei von fuenf Zeilen neben dem Text und gedraengt an ihm, bei den uebrigen darunter. Die vorige Fassung stellte die Zeile auf flex mit Umbruch und gab NUR dem Fach eine Grundbreite; "Fl · BG 0.005" daneben war ein Flexkind ohne Untergrenze, schrumpfte auf seinen Inhalt, und der Knopf ruecke bis an ihn heran. DIE VOREINSTELLUNG IST UNTEREINANDER, mit Abstand. Nebeneinander kommt ueber eine Containerabfrage dazu - und zwar am CONTAINER, nicht am Fenster: Die Seitenspalte ist 20rem breit, gleich wie gross der Bildschirm ist. Eine Fensterabfrage saehe dort "breit" und draengte den Knopf wieder an den Text. FAELLT DIE ABFRAGE AUS, weil ein Browser sie nicht kennt, bleibt es bei der Voreinstellung - und die ist genau das, was auf schmalen Anzeigen verlangt ist. */ /* [hidden] hat das letzte Wort - auch bei einer Regel, die display erst in einem Zusammenhang setzt. */ .lz-stunde-inhalt[hidden] { display: none; } .lz-meine-liste { container-type: inline-size; } .lz-meine-liste .lz-stunde-inhalt { display: block; } .lz-meine-liste .lz-stunde-haupt { margin-block-end: 0; } .lz-meine-liste .lz-knopfzeile { margin-block-start: var(--ci-abstand-s); } /* Das Thema steht dicht unter der Lernzeit (E187) - ein Absatzrand von einer Zeilenhoehe machte aus zwei Zeilen wieder drei. */ .lz-meine-liste .lz-thema { margin: 0; } /* ---- Eine Zeile je Kind, mit Luft (E162) ------------------- ANLASS: Name, Benutzername, Marke und Knopf standen ohne Abstand untereinander. Bei zwanzig Kindern wird das eine dichte Wand, und der Knopf "Hat gefehlt" sitzt am Namen des naechsten Kindes. DIE BREITE DER ZEILE ENTSCHEIDET, nicht die des Fensters (E122, E133): Die Liste steht unter einer Kachel und kann schmal sein. Voreinstellung ist untereinander - faellt die Containerabfrage aus, bleibt genau das, was auf schmalen Anzeigen verlangt ist. */ .lz-teilnehmer { container-type: inline-size; padding-block: var(--ci-abstand-s); } /* Eine ruhige Trennung statt eines Rahmens um jede Zeile. Die erste bekommt keine - sie steht schon unter der Ueberschrift. */ .lz-teilnehmer + .lz-teilnehmer { border-top: 1px solid var(--ci-linie); } .lz-teilnehmer .lz-stunde-inhalt { display: block; } /* [hidden] hat das letzte Wort - und diese Regel ist spezifischer als die allgemeine weiter unten, also braucht sie eine eigene. */ .lz-teilnehmer .lz-stunde-inhalt[hidden] { display: none; } /* EINE ZEILE JE KIND (E167). Name und Benutzername standen untereinander: vier Zeilen Hoehe je Kind, bei zwanzig Kindern achtzig - die Lehrkraft scrollte durch ihre eigene Klasse. Nebeneinander, und bei schmaler Zeile bricht es um. */ .lz-teilnehmer .lz-stunde-haupt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ci-abstand-s); } /* [hidden] hat das letzte Wort - diese Regel setzt display und ist spezifischer als die allgemeine (Projektregel). */ .lz-teilnehmer .lz-stunde-haupt[hidden] { display: none; } .lz-teilnehmer .lz-stunde-haupt > p { margin: 0; } /* ABWECHSELND HINTERLEGT, wie im Raster (E131). Der Kontrast ist derselbe und bleibt nachgerechnet: --ci-text auf --ci-grund 13.98, --ci-text-blass 5.34 - beide ueber AA (4.5). */ .lz-teilnehmer--grund { background: var(--ci-grund); } /* DAS MINDESTMASS BLEIBT: Der Knopf muss mit dem Finger zu treffen sein (E126). Es steht an der ZEILE, nicht nur am Knopf - sonst sitzt er in einer Zeile, die enger ist als er selbst. */ .lz-teilnehmer .lz-stunde-inhalt { min-height: var(--ci-beruehrung-min); } .lz-teilnehmer-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-abstand-s); margin-block-start: var(--ci-abstand-s); } .lz-teilnehmer-rechts[hidden] { display: none; } @container (min-width: 26rem) { .lz-teilnehmer .lz-stunde-inhalt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ci-abstand-s); } /* Eine Grundbreite fuer den Namen - ohne sie schrumpft er auf seinen Inhalt, und die Marke rueckt an ihn heran (E133). */ .lz-teilnehmer .lz-stunde-haupt { flex: 1 1 12rem; min-width: 0; } .lz-teilnehmer-rechts { margin-block-start: 0; } } @container (min-width: 24rem) { .lz-meine-liste .lz-stunde-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-abstand-s); } /* Beide Textteile bekommen eine Grundbreite. Ohne sie schrumpft der hintere auf seinen Inhalt, und der Knopf steht an ihm. */ .lz-meine-liste .lz-stunde-haupt, .lz-meine-liste .lz-hinweis { flex: 1 1 8rem; } .lz-meine-liste .lz-knopfzeile { flex: 0 0 auto; margin-block-start: 0; margin-inline-start: auto; } /* Thema und aufgeklapptes Feld stehen UNTER der Zeile, nicht in ihr (E187). Diese Regel wirkt nur hier, wo `.lz-stunde-inhalt` eine ZEILE ist - dort ist flex-basis eine Breite (E147). */ .lz-meine-liste .lz-thema, .lz-meine-liste .lz-themazeile { flex: 1 1 100%; } } .lz-planseite { min-width: 0; } .lz-planseite[hidden] { display: none; } .lz-untenlernzeiten { margin-block-start: var(--ci-abstand-m); } .lz-untenlernzeiten[hidden] { display: none; } /* Die Termine zum Zuweisen unter "Mein Plan" (E260) - in der Karte des Plans, mit demselben Abstand wie die eigenen Lernzeiten darueber. */ .lz-unterplan { margin-block-start: var(--ci-abstand-m); } .lz-unterplan[hidden] { display: none; } /* EIN PLATZHALTER IST KEIN WERT (Abnahme v0.44.0). inline-block, weil die Durchstreichung eines Ausfalls (.lz-faellt-aus, E111) an inline-block-Nachfahren nicht weitergegeben wird - "Raum nicht angegeben" wurde sonst mitgestrichen. Sichtbar nur im Browser: Abnahmepunkt, keine Pruefung. */ .lz-platzhalter { display: inline-block; } .lz-platzhalter[hidden] { display: none; } /* DER TRENNER IN EINER GESTRICHENEN ZEILE (Abnahme v0.44.2): Gestrichen las sich " · " als Strich ("TVw—Raum nicht angegeben"). inline-block wie der Platzhalter; `pre`, weil ein inline-block seine Leerzeichen am Rand sonst verliert. Nur hier - ausserhalb bleibt er gewoehnlicher Text und bricht wie bisher. */ .lz-trenner[hidden] { display: none; } .lz-faellt-aus .lz-trenner { display: inline-block; white-space: pre; } /* ============================================================ Eine Raumnummer bricht nicht in sich (E130) ============================================================ */ /* Auf dem iPad brach "BG 1.040" in "BG" und "1.040" auseinander. Ein Raum ist eine Einheit: Er darf als Ganzes umbrechen, nie in sich. Dasselbe gilt fuer Kuerzel und Uhrzeitspannen. URSACHE WAR overflow-wrap: anywhere an der Tagesspalte (E124) - es sollte einen Ueberlauf abwenden und hat dafuer jedes Wort zerschnitten. Die Zelle darf ueberlaufende Woerter weiterhin brechen; die benannten Teile nicht. */ .lz-wert, .lz-stunde-uhr, .lz-stunde-zeit, .lz-fachknopf, .lz-alt, .lz-neu { white-space: nowrap; } .lz-wert[hidden] { display: none; } /* DAS FELD ZUM AENDERN an der eigenen Buchung (E170). Feld und Knopf untereinander; in einer Zeile bliebe fuer das Feld nichts uebrig, wenn "Thema speichern" danebensteht. */ .lz-themazeile { display: flex; flex-direction: column; gap: var(--ci-abstand-s); margin-block-start: var(--ci-abstand-s); } .lz-themazeile[hidden] { display: none; } /* ============================================================ IN EINEM SPALTEN-FLEXKASTEN IST `flex-basis` DIE HOEHE (E147). ============================================================ Befund vom 26.09.2026: Das Themenfeld ragte ueber die Karte, die Karten waren sehr hoch, und zwischen Feld und Knoepfen klaffte eine grosse Luecke. Zwei Ursachen, beide in `.lz-feld`: flex: 1 1 12rem in dieser SPALTE also 12rem HOCH = 192 px min-width: 12rem schrumpft nicht, also ragt es aus der Karte `.lz-feld` ist fuer eine ZEILE gebaut - im Formular stehen dort mehrere Felder nebeneinander, und 12rem ist ihre Grundbreite. Die Themazeile ist eine Spalte, und damit bedeutet dieselbe Zeile etwas anderes. DAS IST E147 ZUM ZWEITEN MAL, an einer zweiten geliehenen Klasse: Dort war es `lz-stunde-zeit` mit `flex: 0 0 6.5rem` in der Kachel. Eine Pruefung haelt jetzt die ART fest (E116): In keinem Spalten-Flexkasten steht ein Kind mit einer Laengen-`flex`-Regel, ohne dass eine Regel fuer genau diesen Ort sie aufhebt. */ .lz-themazeile .lz-feld { flex: 0 0 auto; min-width: 0; max-width: 100%; } /* DAS FREIE FELD IN DER TEILNEHMERLISTE (E170). Woran das Kind arbeiten will - "Brüche". Es steht beim Namen, weil es zu ihm gehoert, und es darf umbrechen: hundert Zeichen passen nicht in eine Zeile neben einen Namen. Kein Farbwert hier - der Ton kommt aus den Tokens. */ .lz-thema { font-style: italic; color: var(--ci-text-blass); } .lz-thema[hidden] { display: none; } /* DIE PRUEFUNG AN DER STUNDE (E201). Eine Auskunft, kein Fehler - `ci-marke` ohne Warnfarbe (E125); der Name daneben in derselben Zeile. */ .lz-pruefung { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ci-abstand-xs); margin: var(--ci-abstand-xs) 0 0; } .lz-pruefung[hidden] { display: none; } .lz-pruefung-name { font-weight: 600; } /* Eine Zuweisung in der Karte des Kindes (E246) - ein Block je Eintrag, die Eintraege durch eine Linie getrennt. Vorher stand jeder in der Feldzeile `lz-zeile`, und Termin, Satz und Aufgabe standen nebeneinander. */ .lz-eintrag { padding-block: var(--ci-abstand-s); } .lz-eintrag + .lz-eintrag { border-top: 1px solid var(--ci-linie); } /* Eine gelesene Zuweisung, zugeklappt (E253): die Zeile ist der Knopf. */ .lz-eintrag > summary { cursor: pointer; } /* DIE MARKE AM RECHTEN RAND eines Termins (Abnahme 6jf): Sie klebte am Kursnamen und sass in jeder Zeile woanders - bei zehn Terminen eine Treppe. Ein traegt das Aufklapp-Dreieck; als Flex-Zeile verloere er es. Deshalb hier ein float statt des Musters der Teilnehmerzeile (teilnehmerZeile) - zwei Bauarten fuer zwei Elemente, benannt. Wo die Marke im Browser sitzt, ist ein Abnahmepunkt. */ .lz-rechts { float: right; margin-inline-start: var(--ci-abstand-s); } .lz-rechts[hidden] { display: none; } /* Die Aufgabe unter "Meine Zuweisungen": eine Zeile je Absatz, ueber die volle Breite - auch wenn der Eintrag ab 26rem eine Flexzeile ist. */ .lz-aufgabe { flex-basis: 100%; margin: 0; } /* DIE ANHAENGE EINER AUFGABE (Zug 4, E278): Vorschaubilder und PDF-Verweise in einer umbrechenden Reihe, ueber die volle Breite wie die Aufgabe. Die Vorschau ist begrenzt; das volle Bild oeffnet ein Tipp darauf. */ .lz-anhaenge { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--ci-abstand-s); margin: var(--ci-abstand-xs) 0 0; } .lz-anhaenge[hidden] { display: none; } .lz-anhang-bild { display: block; max-width: 8rem; max-height: 8rem; border: 1px solid var(--ci-linie); border-radius: var(--ci-radius-klein); } .lz-anhang-bild[hidden] { display: none; } /* DIE VORSCHAU DER MITTEILUNG (E291): abgesetzt, wie ein Brief. Der Text ist der, der hinausgeht - WebUntis deutet Markdown, die Vorschau nicht. */ .lz-vorschau { border: 1px solid var(--ci-linie); border-radius: var(--ci-radius-klein); padding: var(--ci-abstand-s); margin: var(--ci-abstand-xs) 0 0; } /* Die Marke "Zugewiesen" an der Stunde (E243) - dieselbe Modulmarke wie bei der Pruefung, kein eigener Ton. */ .lz-zuweisung { margin: var(--ci-abstand-xs) 0 0; } .lz-zuweisung[hidden] { display: none; } /* Der Satz in der Auswahlflaeche: was als Naechstes kommt. */ .lz-pruefung-satz { margin: 0 0 var(--ci-abstand-s); } /* Das kurze Wort in der Wochenleiste - nur an Tagen mit Pruefung. */ .lz-wochentag-pruefung { display: block; font-size: .7rem; color: var(--ci-akzent-text); } .lz-wochentag-pruefung[hidden] { display: none; } /* DIE KLASSEN IM EIGENEN PLAN (E169). Im Plan einer Lehrkraft steht statt der eigenen Lehrkraft die Klasse - "5b, 5c". Sie darf umbrechen: Eine Lernzeit traegt die Klassen 05A bis 06E, und eine Zeile, die nicht umbricht, sprengt die Zelle. */ .lz-klassen { font-weight: 600; } .lz-klassen[hidden] { display: none; } /* ---- Abwechselnd hinterlegte Rasterzeilen ----------------- */ /* JE BLOCK, NICHT JE STUNDE (E131). Hier stand nth-child(even) - ein Wechsel je Zeile. Im Raster ueberspannt eine Doppelstunde zwei Zeilen und kann nur EINE Farbe tragen: Die Doppelstunden blieben weiss, waehrend die Stundenspalte daneben wechselte, und eine einzelne Zelle stand grau dazwischen. Der Wechsel wirkte zufaellig, weil er es war. WELCHE STUNDEN EINEN BLOCK BILDEN, sagt der Server (lz_bloecke_aus_raster) - abgeleitet aus den Pausen des Zeitrasters, nicht festgeschrieben. Ein CSS-Selektor kann das nicht wissen; deshalb ist nth-child hier jetzt falsch, nachdem es eine Auslieferung lang richtig schien. Derselbe Ton wie in der Tagesansicht (--ci-grund), derselbe nachgerechnete Kontrast (E129). Die Lernzeitzeile und die nicht geladene Spalte setzen ihren Grund an Zelle und Kopf und liegen damit darueber. */ .lz-raster tbody tr.lz-wechsel { background: var(--ci-grund); } /* ============================================================ DRUCKEN: nur die Teilnehmerliste (E140) ============================================================ Gedruckt kam bisher die ganze Seite - Kopfleiste, Navigation, alle Lernzeiten des Tages, Hinweistexte. Auf Papier braucht die Lehrkraft davon nichts. EINE DRUCKREGEL, KEINE ZWEITE ANSICHT. Eine eigene Druckansicht waere eine zweite Darstellung derselben Liste - und zwei Darstellungen desselben sind eine zu viel (B22, E131, E133). Sie liefe auseinander, und niemand merkte es: Papier sieht niemand beim Entwickeln. Die Klasse `lz-nicht-drucken` benennt, was NICHT aufs Papier gehoert. Sie steht an den Stellen, die es betrifft, statt hier eine Liste von Selektoren zu pflegen, die beim naechsten Umbau zurueckbleibt (E14). */ /* ============================================================ Der Minikalender der Lehrersicht (E142) ------------------------------------------------------------ ER ZEIGT, AN WELCHEN TAGEN LERNZEITEN STATTFINDEN - damit niemand auf einen Mittwoch tippt und eine leere Liste findet. Welche Tage das sind, entscheidet der Server aus `lernzeit_plaetze`; hier steht nur, wie es aussieht. ZWEI MARKIERUNGEN, ZWEI MITTEL: Lernzeittage tragen eine Flaeche, erfassbare Tage einen Rahmen. Wer Farben nicht unterscheidet, sieht den Rahmen trotzdem - und die Legende darunter sagt beides in Worten. ============================================================ */ .lz-tagwahl { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-l); align-items: flex-start; } .lz-tagwahl[hidden] { display: none; } .lz-kal { border: 1px solid var(--ci-linie); border-radius: var(--ci-radius); padding: var(--ci-abstand-s); background: var(--ci-flaeche); } .lz-kal[hidden] { display: none; } .lz-kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--ci-abstand-s); margin-bottom: var(--ci-abstand-xs); } .lz-kal-kopf[hidden] { display: none; } .lz-kal-titel { font-weight: 600; } .lz-kal-tabelle { border-collapse: collapse; } .lz-kal-tabelle th { font-size: var(--ci-groesse-klein); color: var(--ci-text-blass); font-weight: 500; padding: var(--ci-abstand-xs); } .lz-kal-tabelle td { padding: 1px; } /* DIE FLAECHE FUER DEN DAUMEN BLEIBT, auch wenn die Zahl klein ist: Ein Kalender, den man auf dem Telefon nicht trifft, ist keiner. Dasselbe Mindestmass wie bei den Knoepfen (E126). */ .lz-kal-tag { min-width: var(--ci-beruehrung-min); min-height: var(--ci-beruehrung-min); border: 2px solid transparent; border-radius: var(--ci-radius); background: none; color: var(--ci-text); font: inherit; font-size: var(--ci-groesse-klein); cursor: pointer; } .lz-kal-tag[hidden] { display: none; } .lz-kal-tag:hover { background: var(--ci-flaeche-2); } .lz-kal-tag:focus-visible { outline: 2px solid var(--ci-fokus); } /* Tage mit Lernzeiten: Flaeche und fette Schrift. Kontrast des Akzenttextes auf der Akzentflaeche: 9.66 (E6), weit ueber AA. */ .lz-kal-tag--lernzeit { background: var(--ci-akzent-flaeche); color: var(--ci-akzent-text); font-weight: 700; } /* Erfassbar: ein Rahmen, kein zweiter Farbton. */ .lz-kal-tag--erfassbar { border-color: var(--ci-akzent); } .lz-kal-tag--heute { text-decoration: underline; } .lz-kal-tag--gewaehlt { background: var(--ci-akzent); color: var(--ci-grund); font-weight: 700; } /* Sie steht NICHT mehr im Kalender, sondern in der dritten Spalte (E152). Damit braucht sie weder eigenen Rand noch eigene Breite: Der Abstand kommt aus dem `gap` der Spalte, die Breite von ihr. */ .lz-kal-legende { margin: 0; font-size: var(--ci-groesse-klein); color: var(--ci-text-blass); } /* ============================================================ Kalenderplatz, Wochengruppen und gleich hohe Kacheln (E144) ============================================================ */ /* DER PLATZ DES KALENDERS IST RESERVIERT, auch solange er leer ist. Sonst springt das Layout, sobald die Antwort kommt: Das Feld steht links, der Kalender erscheint rechts daneben und schiebt alles auseinander. DIE MASSE SIND GERECHNET, nicht gesetzt: fuenf Spalten zu --ci-beruehrung-min plus die Polsterung, und in der Hoehe sechs Zeilen - eine fuer die Wochentage, fuenf fuer die Wochen. HIER STANDEN SIEBEN (E146), das Aeusserste: Ein Monat, der an einem Freitag beginnt und 31 Tage hat, braucht sechs Wochenzeilen. Den gibt es, aber selten - und bis dahin stand unter dem Kalender dauerhaft eine leere Zeile, die die Kachelliste nach unten schob. > Ein reservierter Platz nach dem SELTENSTEN Fall ist in jedem > haeufigen Fall zu gross. Der seltene Monat waechst jetzt um eine Zeile, und zwar bevor jemand etwas anklickt. Das ist der kleinere Preis. */ .lz-kalort { min-width: calc(5 * var(--ci-beruehrung-min) + 2 * var(--ci-abstand-m)); min-height: calc(6 * var(--ci-beruehrung-min)); } .lz-kalort[hidden] { display: none; } /* NEBEN DEM KALENDER STEHT ETWAS, statt Leerraum (E146): das Datumsfeld, sein Knopf und der Hinweis zur Fehlzeit. Die Zeile bricht auf dem Telefon um, dann steht alles untereinander. */ /* Die dritte Spalte: der Hinweis zur Fehlzeit als eigene Flaeche (E148). Unter dem Kalender machte er ihn hoch, waehrend rechts die halbe Breite leer stand. Auf schmalen Bildschirmen rutscht er wieder darunter - die Zeile bricht um. */ .lz-tagwahl-hinweis { flex: 1 1 16rem; margin-bottom: 0; align-self: flex-start; /* ZWEI AUSKUENFTE, NICHT EIN ABSATZ (E152): der Hinweis zur Fehlzeit und die Legende des Kalenders. Ohne den Abstand liest sich beides als ein Block. */ display: flex; flex-direction: column; gap: var(--ci-abstand-s); } .lz-tagwahl-hinweis[hidden] { display: none; } .lz-tagwahl-hinweis > p { margin: 0; } /* `.lz-tagwahl` laeuft in der ZEILE - hier ist die Basis also eine Breite (E147). Sie waechst nicht: Sonst stuende der Kalender am rechten Rand statt neben dem Feld. */ .lz-tagwahl-neben { flex: 0 1 18rem; display: flex; flex-direction: column; gap: var(--ci-abstand-s); } .lz-tagwahl-neben[hidden] { display: none; } /* Die Gruppen der Kachelliste. Jede traegt ihren Namen - an der Farbe allein sind sie nicht zu unterscheiden. */ .lz-gruppentitel { margin: var(--ci-abstand-l) 0 var(--ci-abstand-xs); } .lz-gruppentitel[hidden] { display: none; } /* Je Woche eine Zeile, mit der Woche als Zwischenueberschrift. Vorher liefen die Kacheln durch und brachen mitten in der Woche um - zwei Termine mit einer Woche dazwischen standen nebeneinander und sahen aus wie derselbe Zeitraum. SIE HIESS `lz-wochentitel` UND HAT DAMIT EINE ZWEITE GETROFFEN (E146): Die Wochenueberschrift der SCHUELERSICHT traegt denselben Namen, steht weiter oben in dieser Datei - und die spaetere Regel gewinnt. Sie wurde klein und blass, ohne dass jemand es entschieden haette. > Ein Klassenname ist eine Schnittstelle (E127, E128). Zwei > Grundregeln fuer denselben Namen sind zwei Bedeutungen, und die > zweite gewinnt schweigend. Eine Pruefung haelt das jetzt fest. */ .lz-kachelwoche { margin: var(--ci-abstand-s) 0 var(--ci-abstand-xs); font-size: var(--ci-groesse-klein); font-weight: 600; color: var(--ci-text-blass); } .lz-kachelwoche[hidden] { display: none; } /* KACHELN EINER ZEILE SIND GLEICH HOCH, und der Knopf sitzt unten. Vorher klebte die Marke am Knopf, und ein Erfassungsvermerk schob alles auseinander: Was darueber steht, ist verschieden lang. */ /* SO HOCH WIE IHR INHALT (E145). Hier stand `height: 100%` samt `margin-top: auto` am Fuss - zusammen mit einer Kachel, die die ganze Zeile fuellte, ergab das grosse Luecken zwischen Datum, Kuerzel und Marke: gleiche Hoehe durch DEHNEN statt durch gleiche Flaeche. Die Flaeche einer Zeile bleibt gleich hoch - das macht das Raster von selbst. Der Inhalt steht oben zusammen. */ .lz-kachel { display: flex; flex-direction: column; gap: var(--ci-abstand-xs); } .lz-kachel[hidden] { display: none; } /* DER ABSTAND KOMMT AUS `gap`, NICHT AUS DEN ABSAETZEN (E146). Ein

traegt von sich aus einen Rand von einer Zeilenhoehe oben und unten; zusammen mit dem gap klaffte zwischen Kuerzel und Marke eine Luecke, die wie ein Fehler aussah. */ .lz-kachel > p { margin: 0; } /* DIE ZEILEN DER KACHEL HABEN IHRE EIGENE KLASSE (E147). Hier stand `lz-stunde-zeit`, geliehen aus der Zeile der Schuelersicht. Die traegt dort `flex: 0 0 6.5rem` - eine BREITE, denn ihr Kasten laeuft in der Zeile. > In einem SPALTEN-Flexkasten ist flex-basis die HOEHE. Damit war jeder dieser Absaetze 104px hoch, der Text oben, der Rest Luft - zwei davon je Kachel. Das ist die Luecke zwischen Datum und Kuerzel, und es ist der Grund, warum zwei Durchgaenge an den Abstaenden nichts geholfen haben: Es war keiner. Dieselbe Familie wie die doppelte Klasse aus E146, nur schlimmer: Dort bedeutete ein Name zweierlei, hier dieselbe DEKLARATION. */ .lz-kachelzeile { margin: 0; font-variant-numeric: tabular-nums; color: var(--ci-text-blass); font-size: var(--ci-groesse-klein); } .lz-kachelzeile[hidden] { display: none; } .lz-kachel-fuss { display: flex; flex-direction: column; gap: var(--ci-abstand-xs); padding-top: var(--ci-abstand-s); } .lz-kachel-fuss[hidden] { display: none; } .lz-kachel-grund { margin: 0; font-size: var(--ci-groesse-klein); color: var(--ci-text-blass); } /* Die Kachelliste der Lehrersicht: DAS MODULRASTER, und EINE eigene Zeile daneben (E146). Hier stand ein vollstaendig nachgebautes Raster mit --ci-raster-min-schmal (9.5rem). Zwei Dinge daran waren falsch: * 9.5rem ist fuer diese Kacheln zu schmal. Die Modulklasse sagt selbst, wofuer sie gedacht ist - "Kacheln, die nur ein Wort und eine Zahl tragen". Eine Kachel der Lehrersicht traegt Datum, Kuerzel, Raum, Buchungszahl, Zustand und einen Knopf; bei 152px brach jede Angabe um, und die Kachel wurde turmhoch. * Breite, Abstand und Umbruch standen ein zweites Mal da. Das Modul hat sie (auto-fill, --ci-raster-min), und zwei Stellen fuer dasselbe Mass laufen auseinander (E78, E79). ES BLEIBT NICHTS (E246). Hier stand eine Zeile `.lz-kachelliste { align-items: stretch; }` - die Aufhebung des `start`, das `.ci-raster` bis v1.9.0 setzte (gemessen 26.09.2026: 33/52 ohne, 52/52 mit). Seit ci-css v2.0.0 streckt das Modul selbst; gemessen 02.10.2026, Chrome: mit und ohne die Zeile 116/116. Der Wortlaut von damals steht in E246. Faellt das Modul auf `start` zurueck, meldet es die Pruefung auf `stretch` in der Moduldatei. auto-fill BLEIBT RICHTIG (E145): Eine einzelne Kachel behaelt ihre Breite, statt die Zeile zu fuellen. Das ist der Unterschied zu .lz-kacheln (Schuelersicht, E132), wo zwei bis fuenf nebeneinander stehen und die Breite ausnutzen sollen. */ /* Der Grund unter einer Gruppenueberschrift - nur wo er etwas erklaert. */ .lz-gruppengrund { margin: 0 0 var(--ci-abstand-s); max-width: var(--ci-lese-breite); color: var(--ci-text-blass); } /* ---- Der Bericht (Zug 2) ------------------------------------ */ /* Der Filterbereich: nebeneinander, solange Platz ist. Er traegt lz-nicht-drucken - auf dem Blatt steht das Ergebnis, nicht das Formular (E140). */ .lz-filter { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-m); align-items: flex-end; } .lz-filter[hidden] { display: none; } /* DIE AUSLEGUNG STEHT VOR DEN ZAHLEN und ist KEIN Warnton (E125): Sie sagt, was die Zahlen bedeuten - das ist eine Auskunft. */ .lz-auslegung { background: var(--ci-grund); border-inline-start: 3px solid var(--ci-akzent); border-radius: var(--ci-radius-klein); padding: var(--ci-abstand-m); margin-block: var(--ci-abstand-m); font-size: var(--ci-groesse-klein); } .lz-auslegung p { margin: 0 0 var(--ci-abstand-s); } .lz-auslegung p:last-child { margin-bottom: 0; } .lz-zahlenzeile { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-m); margin-block: var(--ci-abstand-m); } .lz-zahlenzeile[hidden] { display: none; } .lz-kennzahl { border: 1px solid var(--ci-linie); border-radius: var(--ci-radius); padding: var(--ci-abstand-s) var(--ci-abstand-m); min-width: 7rem; } /* Wert und Beschriftung untereinander - die Zahl ist die Auskunft, das Wort ordnet sie ein. */ .lz-kennzahl-wert { display: block; font-size: var(--ci-groesse-titel); font-weight: 600; color: var(--ci-akzent-text); } .lz-kennzahl-wert[hidden] { display: none; } .lz-kennzahl-text { display: block; font-size: var(--ci-groesse-klein); /* --ci-text-blass auf --ci-grund: 5.34 (nachgerechnet, E129). */ color: var(--ci-text-blass); } .lz-kennzahl-text[hidden] { display: none; } .lz-tabellenkopf { display: flex; flex-wrap: wrap; gap: var(--ci-abstand-m); align-items: flex-end; } .lz-tabellenkopf[hidden] { display: none; } /* NUR DIE TABELLE SCROLLT, nicht die Seite. Eine Tabelle darf breiter sein als der Bildschirm - dafuer steht sie in einem eigenen Bereich, und die Seite bricht nicht waagerecht um. */ .lz-tabellenbereich { overflow-x: auto; } .lz-tabelle { border-collapse: collapse; width: 100%; font-size: var(--ci-groesse-klein); } .lz-tabelle th, .lz-tabelle td { text-align: start; padding: var(--ci-abstand-xs) var(--ci-abstand-s); border-block-end: 1px solid var(--ci-linie); /* Eine Zelle bricht nicht in sich um: "BG 1.040" in zwei Zeilen liest sich wie zwei Angaben (E130). */ white-space: nowrap; } .lz-tabelle td.lz-zahl { text-align: end; font-variant-numeric: tabular-nums; } /* Jede zweite Zeile hinterlegt. HIER darf nth-child NICHT stehen - nicht weil es falsch waere, sondern weil wechselnd() dieselbe Frage schon beantwortet und zwei Stellen zwei Wahrheiten waeren (E129, E167). Die Klasse kommt aus derselben reinen Funktion wie im Raster und in der Teilnehmerliste. */ .lz-tabelle tr.lz-wechsel { background: var(--ci-grund); } /* DER KOPF EINER SPALTE IST DER KNOPF - keiner daneben. Er sieht aus wie eine Ueberschrift und ist ein