/* ===================================================================== bmsw_lp.css — Layout NUR der Lektions-Startseite (bmsw_lp-v20.html) Setzt bmsw_lp-base.css voraus (Farben, Kopf, Schaltflaechen, Fusszeile). Beim Aendern die Versionsnummer im hochzählen (?v=20 → ?v=21). ===================================================================== */ /* Seitenbreite: zentriert, max. 1100px (Klassenportal nutzt 850px linksbuendig) */ /* --seite-breite setzt das Skript nur in einem fremden Rahmen (Teams: 950, OLAT: die gemeldete Breite). Ohne Rahmen gibt es sie nicht, dann gilt der Ausweichwert 1100px und die Seite steht zentriert wie bisher. Dieselbe Variable steuert die Lage der modalen Fenster - eine Quelle. */ /* Polsterung, Hoechstbreite und Zentrierung: bmsw_lp-base.css. Hier steht nur noch, wie breit DIESE Seitenart hoechstens wird. */ body { --seite-breite:1100px; } /* ---------- Status-/Sync-Leiste (nur Lehrperson) ---------- */ /* Weiss mit feiner Linie statt grau hinterlegt (21.09.2026): das Grau war Schmuck, die Linie genuegt, um die Leiste vom Text zu trennen. */ .syncbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card); border:1px solid var(--rule-light);padding:7px 10px;margin-bottom:16px;font-size:0.9375rem;border-radius:var(--radius);} .syncbar[hidden]{display:none;} .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);vertical-align:middle;} .dot.ok{background:var(--ok);} .dot.err{background:var(--danger);} .dot.busy{background:var(--warn);} .syncbar .grow{flex:1;} .syncbar code{background:var(--card);border:1px solid var(--rule-light);padding:0 5px;} /* ---------- Fixe Infos ---------- */ section.fixed-info{margin-bottom:20px;} section.fixed-info ul{margin:4px 0 0;padding-left:18px;} section.fixed-info a{color:var(--accent);} /* 12 statt 8px unter dem Titel - anderthalbfach. "Fixe Infos" und "Lektionen" sassen sichtbar gedrueckt auf ihrem Inhalt. Von Marc am 13.08.2026 gemeldet. */ h2.section-title{margin-top:4px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;} /* ---------- Lektionstabelle ---------- */ /* MINDESTBREITE: min(40rem, 100%) - zwei Bedingungen, beide noetig. - 40rem statt 640px: die Zahl war auf die alte 13px-Schrift abgestimmt. Mit groesserer Schrift blieben dieselben 640px relativ ENGER, ohne dass jemand sie geaendert haette. In rem waechst sie mit. - 100% als Deckel: sonst zwingt die Tabelle ihr Fenster zum seitlichen Rollen. Gemessen im Teams-Rahmen (Seite 850): das Fenster bot 724px, die Tabelle verlangte 760 - 36px Ueberstand, und die letzte Spalte war abgeschnitten. Bei 700er Seite waren es 186px. Mit dem Deckel werden die Spalten enger statt der Kasten breiter - genau das, was in einem schmalen Rahmen gebraucht wird. */ /* 0.8125rem statt 0.875: die Tabelle ist die dichteste Flaeche der Seite, und 14px liessen sie gedraengt wirken. Im geklammerten Rahmen (Teams, 850px) nochmals eine Stufe kleiner - dort steht dieselbe Menge auf zwei Dritteln der Breite. Die Wurzelgroesse bleibt UNANGETASTET: wer im Betriebssystem groessere Schrift eingestellt hat, bekommt sie weiterhin, weil hier rem steht und nicht px. Von Marc am 13.08.2026 gemeldet. ACHTUNG, das unterschreitet die Regel "nichts unter 14px" vom 12.08.2026 - bewusst und nur fuer diese eine Flaeche. */ table.lessons{width:100%;border-collapse:collapse;font-size:0.8125rem;table-layout:fixed;min-width:min(34rem,100%);} :root.seite-geklammert table.lessons{font-size:0.75rem;} /* Scrollbarer, per Ziehen vergroesserbarer Bereich; Kopf bleibt sichtbar. Beim Laden wird auf die aktuelle Lektion gescrollt. */ /* Bei offenem Wizard mehr Platz: dort wird gearbeitet, und alle Zeilen sind bearbeitbar. 300px reichten fuer vier Zeilen - man scrollte mehr, als man tippte. Von Hand ziehen geht weiterhin. */ /* Gerundet wird der RAHMEN, nicht die Tabelle darin: bei border-collapse ragen die Zellenraender sonst durch die runde Ecke. overflow:auto schneidet den Inhalt ohnehin an dieser Kante ab, die Rundung greift also sauber. */ /* ===== Tabelle und Werkzeuge: zwei Bereiche nebeneinander ================ Die Werkzeugspalte war frueher eine Tabellenspalte mit weissem Grund - sie sass damit im gerundeten Kasten und zerschnitt ihn, auch fuer Lernende, die dort nie etwas anklicken. Jetzt traegt die Tabelle nur Inhalt. align-items:flex-start, damit die Werkzeuge nicht auf die volle Hoehe gedehnt werden, wenn die Tabelle kuerzer ist. */ /* TABELLE MITTIG (Uebernahme 13.08.2026): rechts nehmen die Werkzeuge Platz weg; ohne Ausgleich saesse der Kasten sichtbar links von der Mitte, und in der Leseansicht der Klasse waere dort nur Leere. Der Ausgleich links ist genau so breit wie die Werkzeugspalte - eine Zahl, zwei Stellen. */ .tabelle-bereich{display:flex;align-items:flex-start;gap:10px; --werkzeug-breite:26px; --ausgleich-links:var(--werkzeug-breite);} .tabelle-bereich::before{content:"";flex:0 0 auto;width:var(--ausgleich-links);} /* Marke am Body statt :has() - auf :has() wollte sich der Kollege nach der ResizeObserver-Erfahrung nicht verlassen, und ein Geschwister-Selektor von tr.editing erreicht die Werkzeuge gar nicht: die stehen ausserhalb der Tabelle. Die Marke setzt startInline, jedes Neuzeichnen nimmt sie weg. */ /* Beim Bearbeiten faellt der Ausgleich WEG. Mittig zu stehen ist etwas fuer die Leseansicht der Klasse; wer arbeitet, braucht Platz. So wird die Spalte rechts breiter, ohne dass die Tabelle schmaler wird - links kommen 26px zurueck, rechts gehen 40px weg, unter dem Strich verliert die Tabelle nur 14px statt 40. */ /* 46px beim Bearbeiten. Druebengemessen mit ✓ ✕ 👁; bei uns stehen dort das Auge allein (Einzelzeile) bzw. 👁 × ⧉ ⤓ im Assistenten - beides passt. Die Entscheidung selbst (Uebernehmen/Verwerfen) sitzt in der Editorleiste, nicht in der Spalte: Marcs Entscheid vom 13.08.2026. */ body.wizard-open .tabelle-bereich, body.zeile-offen .tabelle-bereich{--werkzeug-breite:46px; --ausgleich-links:0px;} .tabelle-bereich .lessons-rahmen{flex:1 1 auto;min-width:0;} /* min-width:0 ist NICHT optional: ein Flex-Element weigert sich sonst, unter seine Inhaltsbreite zu schrumpfen, und die Tabelle druecke den Bereich breiter als das Fenster - der waagrechte Rollbalken waere weg. */ .werkzeug-spalte{flex:0 0 auto;width:var(--werkzeug-breite);} /* Umbrechen erlaubt: "Bearbeiten" steht auf zwei Zeilen statt die ganze Spalte breit zu machen. Der Kopf wird ohnehin auf die Hoehe des Tabellenkopfs gebracht (werkzeugeAngleichen), Platz ist dort genug. */ /* Muss NACH .hdr-controls .editor-toggle stehen oder spezifischer sein: beide haetten sonst dieselbe Spezifitaet, und die spaetere Regel gewaenne. Genau das ist passiert - gemessen wirkten 14px statt der hier gesetzten Groesse, und der Knopf ragte ueber die Tabelle. */ .werkzeug-kopf .hdr-controls .editor-toggle{font-size:1.0625rem;line-height:1; padding:2px 0;letter-spacing:0;text-align:center;} /* Der Kasten muss die GANZE Spaltenbreite nehmen, sonst schrumpft er auf seinen Inhalt und "mittig" bezieht sich auf nichts. */ .werkzeug-kopf .hdr-controls{align-items:center;gap:2px;width:100%;} /* DREI Klassen, nicht zwei. Mit zwei haette diese Regel dieselbe Spezifitaet wie ".hdr-controls .btn-add-inline{width:auto}" weiter unten - und die spaetere gewinnt. Gemessen drueben: das Plus schrumpfte auf 8px und sass 9px neben der Mitte. Wer hier etwas ergaenzt, pruefe zuerst, ob weiter unten eine gleich starke Regel steht. */ .werkzeug-kopf .hdr-controls>.editor-toggle, .werkzeug-kopf .hdr-controls>.btn-add-inline{width:100%;text-align:center;align-self:center;} /* MITTIG, nicht rechtsbuendig. Rechtsbuendig sassen ✎ und + versetzt zueinander, weil sie verschieden breit sind (der Stift hat Polsterung, das Plus ist ein Kreis) - am rechten Rand ausgerichtet liegen ihre Mitten dann nicht uebereinander. In einer 26px-Spalte faellt das sofort auf. */ .werkzeug-kopf{display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;} /* overflow:hidden statt eines eigenen Rollbalkens: gerollt wird links, das Band folgt per transform. Zwei Rollbalken nebeneinander waeren zwei Dinge, die auseinanderlaufen koennen. */ .werkzeug-fenster{overflow:hidden;} .werkzeug-band{will-change:transform;position:relative;} /* absolut, damit sich kein Versatz aufsummieren kann - siehe werkzeugeAngleichen() in bmsw_lp-v20.html */ .werkzeug-zeile{position:absolute;left:0;right:0;display:flex;align-items:center;box-sizing:border-box;} .werkzeug-zeile .row-werkzeuge{width:100%;} /* Groesserer Radius als beim Uebrigen: der Kasten ist die groesste Flaeche der Seite, und was gross ist, vertraegt mehr Rundung, ohne weich zu wirken. */ /* 525 statt 300: rund 1.75-mal so hoch. Die 300 stammten aus der Zeit, als die Tabelle vor allem bearbeitet wurde - lesend zeigten sie kaum vier Zeilen, und genau das war die erste Rueckmeldung aus der Testphase (Kollbrunner, 13.08.2026; von Marc gleichentags so bestellt). Von Hand ziehen geht weiterhin, nach unten bis 120px. */ /* Linie und Rundung liegen AUSSEN; overflow:hidden macht daraus eine Schere, die auch den klebenden Kopf beschneidet. */ .lessons-rahmen{border:1px solid var(--rule-light);border-radius:calc(var(--radius) * 2); overflow:hidden;background:var(--card);} /* HOECHSTENS 525px - nicht IMMER 525px (Marc, 21.09.2026: «warum kann man das am Ende ueberhaupt so weit runterziehen»). Mit fester Hoehe stand unter zwei Lektionen ein halber Bildschirm Leere, durch die man ins Nichts rollen konnte. Jetzt waechst der Kasten mit dem Inhalt und hoert bei 525px auf; von Hand groesser ziehen geht weiterhin (resize setzt dann eine eigene Hoehe). */ .lessons-scroll{height:auto;max-height:525px;min-height:120px;overflow:auto;resize:vertical;} /* max() als Boden: 68vh allein waere im eingebetteten Rahmen (OLAT, Teams) winzig, weil dort die Fensterhoehe klein ist - und in einer Umgebung ohne gemeldete Hoehe faellt vh sogar auf 0. Dann greift die Mindesthoehe von 120px, und die Tabelle waere vier Zeilen hoch. Gemessen: innerHeight 0 im Pruef-Browser, Ergebnis 120px. */ body.wizard-open .lessons-scroll{height:auto;max-height:max(360px, min(68vh, 900px));} /* Die Leiste "Nicht uebernommene Aenderungen" gibt es nicht mehr: Uebernehmen und Verwerfen stehen seit dem 13.08.2026 in der Editorleiste (#edAktionen, weiter unten). Ihre Regeln standen hier - wer sie sucht, suche dort. */ /* top:-1px statt 0: der Kopf legt sich UEBER die obere Kante des Kastens, statt daneben zu sitzen. Zusammen mit dem hoeheren Fueller unten kann oberhalb des Kopfes nichts Helles mehr durchscheinen - Marc sah dort am 21.09.2026 wiederholt einen weissen Streifen, den ich in der Probe nicht nachstellen konnte. Statt weiter zu raten ist die Luecke jetzt zugedeckt, egal woher sie kaeme. */ .lessons-scroll table.lessons thead th{position:sticky;top:0;z-index:2;} /* DER FUELLER BLEIBT - nur der Grund ist ein anderer als frueher. Gemessen am 21.09.2026 im hellen Modus, 200px heruntergerollt: ueber dem Kopf blitzte ein paar Pixel hoch die Zeile darunter durch. Das kommt von border-collapse: die zusammengelegte Linie wird auf einer eigenen Ebene gezeichnet und wandert mit der Zelle nicht mit. Der Fueller malt die Kopffarbe nach oben weiter und deckt den Spalt zu; ueberstehen kann er nicht mehr, weil der aeussere Rahmen (.lessons-rahmen) alles abschneidet. */ .lessons-scroll table.lessons thead th::before{ content:"";position:absolute;left:-1px;right:-1px;bottom:100%;height:24px; background:var(--fg);pointer-events:none;} /* Der klebende Kopf beginnt 2px unter dem oberen Rand des Rollbereichs - 1px Rahmen des Kastens, 1px der zusammengelegten Tabellenlinie. Durch diesen Spalt schoben sich beim Hochrollen die Zeilen darunter sichtbar vorbei. Der Fueller malt die Kopffarbe nach oben weiter; was darueber hinausragt, schneidet der Rollbereich ohnehin ab. Den Kopf selbst zu verschieben (top:-2px) waere der naheliegendere Weg gewesen, haette aber seine oberen zwei Pixel gekappt - dieser Weg laesst ihn, wo er ist. */ /* Der klebende Kopf muss die RUNDUNG des Kastens mitmachen. Ein klebendes Element wird von der abgerundeten Ecke des Rollbereichs nicht zuverlaessig beschnitten: beim Runterrollen schob sich der eckige Kopf ueber die runde Ecke, daneben blieb ein heller Keil stehen - Marc am 21.09.2026: «da soll es nicht ploetzlich oben weiss werden, so gehen auch die Rundungen verloren». Darum tragen die aeusseren Kopfzellen die Rundung selbst. Die letzte Zelle ist die Zusatzspalte; sie ist meist `hidden`, dann traegt die vorletzte die rechte Ecke. */ /* Ohne :has() - das meidet dieses Projekt. Die Tabelle traegt ohnehin die Klasse `hat-zusatz`, wenn die Zusatzspalte da ist; daran laesst sich ablesen, welche Zelle rechts aussen steht. */ /* Der Kopf traegt die Schriftfarbe als Flaeche - also im Hellen fast schwarz, im Dunkeln fast weiss. Die Schrift darauf ist der GRUND, nicht fest weiss: sonst steht im Dunkeln Weiss auf Hell (gesehen am 21.09.2026). */ table.lessons thead th{background:var(--fg);color:var(--bg);text-align:left;padding:8px 10px; font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-size:0.875rem;text-transform:uppercase; letter-spacing:.04em;border:1px solid var(--fg);vertical-align:top;} table.lessons thead th .th-sub{display:block;font-family:Arial,sans-serif;font-weight:400;font-size:0.875rem; text-transform:none;letter-spacing:0;opacity:.78;margin-top:2px;} /* break-word statt anywhere: "anywhere" trennt mitten im Wort, auch wenn es ganz passen wuerde - aus "Kennenlernen" wurde "Kennenlerne/n". Nur die Material-Spalte behaelt "anywhere", weil dort lange Adressen stehen, die sonst die Spalte sprengen. */ /* Silbentrennung MIT Bindestrich, bevor hart umbrochen wird. Funktioniert nur, weil die Seite lang="de-CH" traegt - ohne Sprachangabe tut hyphens:auto nichts. break-word bleibt als letzte Stufe fuer Woerter, die das Woerterbuch nicht kennt; Adressen beruehrt die Trennung nicht (Material behaelt dafuer sein "anywhere"). Von Marc am 13.08.2026 bestellt. */ table.lessons tbody td{padding:6px 8px;border:1px solid var(--rule-light);vertical-align:top;overflow-wrap:break-word; -webkit-hyphens:auto;hyphens:auto;} table.lessons tbody td.cell-material{overflow-wrap:anywhere;} /* Die Breiten folgen dem, was wirklich in den Spalten steht - nicht der Reihenfolge im Kopf: · Datum fester Inhalt (Wochentag, Datum, KW, Zeit) - braucht wenig · Thema ein Stichwort · Material die Links, meist mehrere Zeilen - der laengste Inhalt · Aufgaben Text und Abgabefrist · Lernziele nach Vorgabe der Schule NICHT verlangt, oft leer Vorher bekam Material 22 % und damit weniger als Lernziele mit 24 - genau umgekehrt zum Bedarf, was die Zeilen unnoetig hoch machte. Gemeldet von Thomas Kollbrunner am 13.08.2026. */ /* Die Datumsspalte bekommt ein FESTES Mass, keinen Anteil. Ihr Inhalt ist immer gleich gross ("Mi - 19.08", "KW 34") - ein Prozentwert macht sie auf dem grossen Schirm unnoetig breit und in Teams (850px) trotzdem eng. Mit rem ist sie ueberall genau so breit, wie sie sein muss. Beim BEARBEITEN braucht sie mehr: dort stehen ein Datumsfeld mit Kalendersymbol und darunter das Zeitfeld. Von Marc am 13.08.2026 gemeldet, "selbst im Teams". Die uebrigen Spalten teilen sich den Rest in diesen Verhaeltnissen. */ table.lessons col.col-date{width:5.625rem;} body.wizard-open table.lessons col.col-date{width:9.5rem;} table.lessons col.col-thema{width:13.5%;} table.lessons col.col-material{width:37.5%;} table.lessons col.col-tasks{width:27%;} table.lessons col.col-lz{width:22%;} /* Mit sichtbarer Zusatzspalte werden die übrigen etwas schmaler und die Tabelle breiter - sonst würde in Teams (850px) alles gequetscht. */ table.lessons.hat-zusatz col.col-thema{width:12%;} table.lessons.hat-zusatz col.col-material{width:33%;} table.lessons.hat-zusatz col.col-tasks{width:24%;} table.lessons.hat-zusatz col.col-lz{width:19%;} table.lessons.hat-zusatz col.col-zusatz{width:12%;} /* 40rem statt 47.5: die alte Untergrenze stammt aus der Zeit mit 14px-Schrift und prozentualer Datumsspalte. In Teams (850px, abzueglich Rand und Werkzeugspalte bleiben rund 750px) lag die Tabelle mit Zusatzspalte damit AN ihrer Grenze - sie konnte nicht schmaler werden, und der Browser brach stattdessen mitten im Wort um ("Kennenlerne/n"). Gemeldet von Marc am 13.08.2026. */ table.lessons.hat-zusatz{min-width:min(40rem,100%);} td.cell-zusatz{vertical-align:top;} table.lessons tbody tr.is-current td{background:var(--highlight);} /* Aus dem Kalender angesprungen. Bewusst eine ANDERE Farbe als "Aktuell": sonst staenden zwei Zeilen da, die beide behaupten, die richtige zu sein. */ table.lessons tbody tr.angesprungen td{background:color-mix(in srgb, #D69D00 16%, var(--card));} table.lessons tbody tr.angesprungen td:first-child{box-shadow:inset 3px 0 0 var(--ms-senf);} table.lessons tbody tr.is-current td:first-child{border-left:3px solid var(--marker);font-weight:700;} table.lessons tbody tr.is-current td:first-child::before{content:"Aktuell";display:block;color:var(--marker); font-family:"Arial Black",Arial,sans-serif;font-weight:900;font-size:0.875rem;} /* Hinweis für abgeschlossene Klassen - zurückhaltend, die Seite bleibt nutzbar */ p.beendet-hinweis{margin:0 0 10px;padding:8px 12px;background:var(--frei-bg); color:var(--frei-fg);border-left:3px solid var(--muted);font-size:0.9375rem;} /* Zugangsdialog (ersetzt prompt(), das im iFrame blockiert sein kann) */ /* ===== Modale Fenster in einem fremden Rahmen (Teams) ===================== Ein modales liegt im TOP-LAYER: er richtet sich am VIEWPORT aus, nicht am body und nicht an dessen max-width. Teams meldet eine zu grosse Breite; die Seite klammert sich darum auf 850px und heftet sich links an - der Dialog aber zentriert weiter auf die gemeldete Mitte, also auf eine Stelle, die niemand sieht. Gemessen bei Viewport 1600 und Seite 850: der Dialog stand 637-963 und ragte 113px hinaus, "ABBRECHEN" war halb weg. vw hilft nicht - 92vw stuetzt sich auf dieselbe falsche Zahl. Die einzige verlaessliche Groesse ist --seite-breite, die das Skript setzt (Teams: 950, OLAT: die gemeldete Breite). Ohne Rahmen gibt es die Variable gar nicht, dann gilt alles wie bisher. translateX mit 100% bezieht sich auf die EIGENE Breite des Dialogs - so zentriert CSS ihn in der Seitenbox, ohne sie kennen zu muessen. Genau das kann keine JavaScript-freie vw-Rechnung, und genau darum steht es hier statt in einem Behandler nach jedem showModal(). */ :root.seite-geklammert dialog.zugang-dlg{ left:0; right:auto; margin-left:0; margin-right:auto; max-width:min(calc(var(--seite-breite) - 16px), 440px); transform:translateX(calc((var(--seite-breite) - 100%) / 2)); } dialog.zugang-dlg{border:1px solid var(--rule);border-radius:var(--radius);padding:0;max-width:min(92vw,440px); box-shadow:0 8px 32px rgba(0,0,0,.25);color:var(--fg);background:var(--card);} dialog.zugang-dlg::backdrop{background:rgba(0,0,0,.35);} /* Mehr Luft. Und der Grund, warum es ueberhaupt gedraengt aussah: die Regel hiess frueher "dialog.zugang-dlg form" - im Fenster steht aber ein
, bewusst kein
(siehe Kommentar im Markup). Der Innenabstand war damit gemessene 0px, die Felder klebten am Rahmen. Der Treffer geht jetzt ueber die Kennung, nicht ueber den Elementnamen. */ dialog.zugang-dlg #zugangForm{padding:24px 26px 22px;margin:0;} dialog.zugang-dlg h3{margin:0 0 14px;font-family:"Arial Black",Arial,sans-serif;font-size:1.0625rem;} /* Die [hidden]-Zeile ist NICHT optional: 'display:block' an der Beschriftung schlaegt die Browserregel [hidden]{display:none}. Im Dialog fuer einen Termin blieb darum die Beschriftung "Adresse" stehen, waehrend ihr Feld weg war - eine Ueberschrift ohne alles darunter. Dieselbe Falle wie bei .ed-leiste, .sammel-leiste und .input-with-rep; das ist die vierte Stelle. */ dialog.zugang-dlg label[hidden]{display:none !important;} /* Auswahl schon hochgeladener Bilder. Feste Kachelhoehe, damit die Liste bei Hoch- und Querformat nicht springt; object-fit:cover schneidet zu, statt zu verzerren. max-height + Rollbalken, weil das Fenster sonst mit jedem weiteren Bild waechst, bis es nicht mehr auf den Bildschirm passt. */ /* Eine blosse Meldung darf NICHT ins Raster: sie wuerde selbst zu einer 96px-Spalte und mitten im Satz umbrechen ("Noch keine Bilder / hochgeladen"). Darum schaltet die Liste um, sobald sie keine Kacheln zeigt. */ .bild-liste.leer{display:block;} .bild-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px;max-height:210px;overflow-y:auto;margin-top:6px; font-size:0.875rem;color:var(--muted);} .bild-kachel{display:block;width:100%;padding:0;border:1px solid var(--rule-light); border-radius:var(--radius);background:var(--card);cursor:pointer;text-align:left;font:inherit;} .bild-kachel img{display:block;width:100%;height:66px;object-fit:cover; border-bottom:1px solid var(--rule-light);} .bild-kachel span{display:block;padding:3px 5px;font-size:0.875rem;line-height:1.25; color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bild-kachel:hover{border-color:var(--accent);} .bild-kachel[aria-pressed="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent);} .bild-kachel[aria-pressed="true"] span{color:var(--accent);font-weight:700;} dialog.zugang-dlg label{display:block;margin:14px 0 4px;font-size:0.875rem;font-weight:700;} dialog.zugang-dlg input{width:100%;box-sizing:border-box;border:1px solid var(--rule-light); padding:6px 8px;font:inherit;font-size:1rem;border-radius:var(--radius);} dialog.zugang-dlg input:focus{outline:2px solid var(--marker);outline-offset:-2px;} dialog.zugang-dlg .actions-bar{margin-top:22px;} dialog.zugang-dlg .help{margin:6px 0 0;} dialog.zugang-dlg .help.fehler{color:var(--danger);font-weight:700;} /* Unterrichtsfreie Zeile (Ferien, "fällt aus", "kein Unterricht"): ganze Zeile hellgrau, Schrift dunkelgrau - zurueckgenommen, aber noch gut lesbar (#5f5f66 auf #ececee = Kontrast 5.4:1, über der Anforderung von 4.5:1). Steht NACH .is-current, damit eine freie Zeile auch als "Aktuell" grau bleibt. */ table.lessons tbody tr.is-frei td, table.lessons tbody tr.is-frei.is-current td{background:var(--frei-bg);color:var(--frei-fg);} table.lessons tbody tr.is-frei td .d-line, table.lessons tbody tr.is-frei td.cell-thema, table.lessons tbody tr.is-frei td .d-kw{color:var(--frei-fg);} table.lessons tbody tr.is-frei td a{color:var(--frei-fg);text-decoration:underline;} td.cell-date{font-variant-numeric:tabular-nums;color:var(--muted);font-size:0.875rem;overflow-wrap:normal;vertical-align:top;} /* Datums-Zelle zweizeilig: "Di - 28.04" (hervorgehoben) / "KW 18" (klein) */ td.cell-date .d-line{display:block;font-weight:700;color:var(--fg);} td.cell-date .d-kw {display:block;font-size:0.875rem;letter-spacing:.03em;color:var(--muted);} /* Kein festes Fett mehr: was hervorgehoben wird, bestimmt die Lehrperson über die Formatierungscodes - fett(…), **…**, rot(…). */ td.cell-thema{color:var(--fg);vertical-align:top;} td a{color:var(--accent);} /* Aufzaehlungen in Zellen: kompakt, damit die Tabelle nicht auseinanderlaeuft (Mini-Syntax: Zeilen mit "- " bzw. "1. " werden zu Listen) */ td ul, td ol{margin:2px 0;padding-left:16px;} td li{margin:0 0 1px;} td li:last-child{margin-bottom:0;} /* Ausgeblendete Zeilen - nur im Wizard ueberhaupt vorhanden. Deutlich anders als eine unterrichtsfreie Zeile (die ist grau), damit man die beiden nicht verwechselt: hier ein Schraffurstreifen links und blasse Schrift. Der Vermerk steht als ::before in der Datumszelle, damit er beim Kopieren nicht mitwandert - er gehoert zur Anzeige, nicht zum Inhalt. */ table.lessons tbody tr.is-verborgen{opacity:.55;} table.lessons tbody tr.is-verborgen td{background:repeating-linear-gradient( 135deg,#fafafa,#fafafa 6px,#f0f0f0 6px,#f0f0f0 12px);} table.lessons tbody tr.is-verborgen td.cell-date::before{ content:"ausgeblendet";display:block;font-size:0.875rem;letter-spacing:.05em; text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:3px;} /* Zwei mal zwei statt einer Reihe von vier. In einer Reihe wurde die Spalte so breit, dass sie den Zellen den Platz nahm - und vier gleich grosse Zeichen nebeneinander liest man ohnehin nicht als Gruppen. Oben, was die ZEILE betrifft (einblenden, löschen), unten, was ihren INHALT betrifft (kopieren, einsetzen). */ /* In der Leseansicht stehen nur zwei Zeichen da - Stift und Kreuz, gerade uebereinander. Nebeneinander braeuchten sie die doppelte Breite, und die fehlt der Tabelle. Beim Bearbeiten schaltet die Regel darunter auf zwei Spalten um. */ .row-werkzeuge{display:grid;grid-template-columns:1fr;justify-items:center; justify-content:end;gap:1px 2px;} body.wizard-open .row-werkzeuge, body.zeile-offen .row-werkzeuge{grid-template-columns:repeat(2,auto);justify-items:stretch;} .werkzeug-zeile .row-hide{font-size:0.9375rem;} /* Kopieren und Einsetzen. Das Einsetzen-Zeichen ist blass, solange nichts kopiert wurde - ein Knopf, der nichts tun kann, soll auch nicht danach aussehen. Er bleibt trotzdem anklickbar und sagt dann, was fehlt. */ .werkzeug-zeile .row-copy, .werkzeug-zeile .row-paste{font-size:0.9375rem;} .werkzeug-zeile .row-paste{opacity:.35;} .werkzeug-zeile .row-paste.bereit{opacity:1;color:var(--accent);} /* Vorgriff: was in einer SPÄTEREN Lektion ansteht, hier schon einmal genannt. Abgeleitet beim Anzeigen - steht darum ausserhalb des bearbeitbaren Feldes und wandert beim Speichern nicht mit. Zwei Farben, weil es zwei Dinge sind: eine Abgabe ist eine Frist (gelb, wie eine Markierung im Kalender), eine Prüfung wiegt schwerer (rot). Bewusst NICHT grau - grau heisst in dieser Tabelle "unterrichtsfrei". Nicht wegklickbar: es ist keine Meldung, sondern Teil der Anzeige. */ /* Schriftgroesse: "inherit", also GENAU so gross wie der uebrige Inhalt der Zelle - keine eigene Zahl. Sie waren mit 11.5px kleiner gesetzt als der Eintrag, aus dem sie stammen: eine faellige Abgabe stand damit unauffaelliger da als ihre eigene Ankuendigung. Eine feste 13px waere nur an einer Fensterbreite richtig gewesen; geerbt stimmt es an jeder. Klein bleiben nur die grauen Vorerinnerungen unten. */ .vorgriff{margin-top:6px;padding:5px 9px;border-left:4px solid;font-size:inherit; line-height:1.35;border-radius:var(--radius);} .vorgriff .vorgriff-marke{font-weight:700;margin-right:5px;} /* Die em-Werte hier sind bewusst knapp ueber 1: bei einer Zelle von 15px ergibt .92em noch 13.8px und .88em sogar 13.2px - beides unter der Untergrenze von 14px, die fuer die ganze Seite gilt. Die Erinnerungen unterscheiden sich ohnehin durch FARBE und fehlende Hinterlegung; die Groesse muss den Unterschied nicht auch noch tragen. */ .vorgriff .vorgriff-wann{display:block;opacity:.8;font-size:.95em;margin-top:1px;} .v-abgabe{background:color-mix(in srgb, #D69D00 20%, var(--card));border-color:#D69D00;color:var(--m-gold,#6b5200);} .v-lnw{background:color-mix(in srgb, #C94646 18%, var(--card));border-color:#C94646;color:var(--m-rot,#7a2020);} /* Die Erinnerungen zwei und eine Lektion davor: blasser Text, keine Hinterlegung, kein Balken. Sie sollen an etwas erinnern, nicht mit dem Termin selbst um Aufmerksamkeit streiten - nach der dritten gleich roten Zeile schaut niemand mehr hin. */ .vorgriff-leise{background:none;border-left:none;padding:2px 0 0; color:var(--muted);font-size:.95em;} /* Die leise Erinnerung traegt KEINE Formatierung: Links, Farben, Fettung und Hinterlegungen aus dem Text werden neutralisiert - alles grau, reiner Text. Ohne das schlaegt ein roter unterstrichener Link die graue Umgebung und ruft lauter als der Termin selbst, der eine Zeile hoeher steht. */ .vorgriff-leise, .vorgriff-leise *{ color:var(--muted) !important; background:none !important; font-weight:400 !important; font-style:normal !important; text-decoration:none !important;} .vorgriff-leise .vorgriff-marke{font-weight:400;} .vorgriff-leise .vorgriff-wann{opacity:1;font-size:1em;} /* In der Klassenansicht etwas ruhiger - dort ist es Information, im Wizard eine Arbeitshilfe. */ body:not(.wizard-open) .vorgriff{opacity:.9;} /* Termine im Text: Abgabe(…) und LNW(…). Die Beschriftung steht im HTML, NICHT hier als ::before. Das ging, solange es genau eine Frist je Zeile gab; bei mehreren Terminen mitten im Text braucht jeder seine eigene - und aus ::before kopiert der Browser nichts, beim Kopieren einer Zelle waere das Wort "Abgabe:" verschwunden. */ /* Die Marke ordnet die Zeile ein, ohne sie zu zerschneiden. Klein und gesperrt, damit sie als Etikett gelesen wird und nicht als erstes Wort des Satzes. Die Farbe trennt die beiden Arten - das ist die einzige Stelle, an der sie sich unterscheiden. */ .termin{display:inline;} .termin .termin-marke{font-weight:700;} /* Der Eintrag selbst - dort, wo man ihn geschrieben hat. Er traegt die Farbe seiner Art, aber KEINE Hinterlegung: er ist Text, den man bearbeiten kann. Die hinterlegten Bloecke (.vorgriff) sind das Gegenteil - abgeleitet und darum nicht bearbeitbar. Der Unterschied muss man sehen koennen. */ /* ROT HEISST BENOTET - dieselbe Regel wie bei den Zeichen im Wochenraster. */ .t-hausaufgabe .termin-marke{color:var(--w-petrol,#00797B);} .t-abgabe .termin-marke{color:var(--m-gold,#B07E00);} .t-abgabenote .termin-marke{color:var(--accent);} .t-lnw .termin-marke{color:var(--accent);} /* Datum UND Zeit fett. Marc am 21.08.2026: Ist eine Uhrzeit gesetzt, ist sie so wichtig wie der Tag - "So, 10.05.2026 um 21:59" entscheidet ueber rechtzeitig oder zu spaet, und die Zahl, die man sucht, war die einzige unausgezeichnete im Satz. */ .termin .termin-datum, .termin .termin-zeit{font-weight:700;white-space:nowrap;} .termin .termin-inhalt{font-weight:700;} .termin .termin-zusatz{font-weight:400;} td.cell-lz .lnw strong{font-weight:700;} /* Aktions-Spalte: keine Trennlinie, kein eigener Hintergrund (verschmilzt mit der Zeile); Symbole (✎/×) und Kopf-Schaltflaechen (+/Bearbeiten) erscheinen nur beim Hovern. */ /* Die Werkzeug-Spalte gehört nicht zum Inhalt und wird darum nie eingefärbt - weder blau bei der aktuellen noch grau bei einer unterrichtsfreien Zeile. */ /* Die drei Regeln, die hier standen, hielten die Zeilenfarbe (aktuell, frei) aus der Werkzeugspalte heraus. Seit die Werkzeuge ausserhalb der Tabelle stehen, bekommen sie die Farbe gar nicht mehr - die Regeln waren gegen ein Problem gerichtet, das es nicht mehr gibt. */ .werkzeug-zeile button{background:none;border:none;color:var(--muted);font-size:1.0625rem;cursor:pointer;padding:0 3px;visibility:hidden;border-radius:var(--radius);} .werkzeug-zeile:hover button{visibility:visible;} /* Die Werkzeugzeilen stehen NICHT in der Tabelle, sondern in #werkzeugBand daneben. Hier stand darum "table.lessons tbody tr.editing .werkzeug-zeile button" - ein Nachfahre von tr.editing sind sie nie, die Regel lief ins Leere. Die Klasse wird jetzt in werkzeugeAngleichen() von der Tabellenzeile uebernommen. */ .werkzeug-zeile.editing button{visibility:visible;} .werkzeug-zeile button:hover{color:var(--accent);} .werkzeug-zeile .row-del:hover{color:var(--danger);} .hdr-controls{visibility:hidden;display:inline-flex;flex-direction:column;gap:1px;align-items:flex-end;} .werkzeug-spalte:hover .hdr-controls, .werkzeug-spalte:focus-within .hdr-controls{visibility:visible;} .hdr-controls .editor-toggle,.hdr-controls .btn-add-inline{background:none;color:var(--muted);border:none; font-family:Arial,sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:0.875rem;line-height:1.3; padding:0;width:auto;height:auto;border-radius:0;cursor:pointer;} .hdr-controls .editor-toggle:hover,.hdr-controls .btn-add-inline:hover{color:var(--accent);text-decoration:underline;} .hdr-controls .btn-add-inline{align-self:flex-start;} tr.editing td{background:color-mix(in srgb, #D69D00 18%, var(--card)) !important;} [contenteditable][data-placeholder]:empty::before{content:attr(data-placeholder);color:var(--muted);font-style:italic;} /* ---------- Wizard / Editor ---------- */ .editor-toggle,.btn-add-inline{background:var(--accent);color:#fff;border:none;cursor:pointer;} /* Ruhig wie jeder andere Knopf (21.09.2026). Arial Black in Versalien bleibt den TITELN vorbehalten - so will es das CD (Manual S. 9); auf einem Bedienelement war es nur laut. */ .editor-toggle{padding:5px 12px;font:inherit;font-weight:bold;font-size:0.875rem; letter-spacing:0;text-transform:none;border-radius:4px;} .btn-add-inline{width:26px;height:26px;border-radius:var(--radius);font-size:1.25rem;line-height:1;display:inline-flex; align-items:center;justify-content:center;font-weight:700;} /* Ruhig wie die Konto-Seite (Marc, 21.09.2026: «alle weiss schwarz, kein grau hinterlegt - Farben nur wo noetig; roter Rand?? wozu??»). Der rote Rahmen um den ganzen Editor sagte nichts: er warnte nicht und ordnete nichts zu, er war nur laut. Jetzt eine feine Linie und dieselbe Flaeche wie ringsum. */ /* Oben KEINE Kante: sonst liefe ueber den Reitern eine durchgehende Linie, und genau die gibt es auf der Startseite nicht. Der Kasten faengt erst unter der Reiterlinie an. */ /* Der Editor traegt KEINEN eigenen Rahmen mehr (Marc, 21.09.2026: «die Linie muss ganz weg - und dann unten auch diese Bloecke wie im Menu bei der Startseite»). Vorher lag ueber den Reitern die Oberkante des Kastens als durchgehender Strich, und der Inhalt sass in einem zweiten Rahmen. Jetzt genau wie unter «Konto & Anpassungen»: Reiter auf einer Linie, darunter eine Karte. Ein Rahmen, nicht zwei. */ .editor{border:none;background:none;margin:8px 0 20px;} .editor[hidden]{display:none;} /* Die Reiterleiste sitzt OBEN am Rahmen: nur die oberen Ecken runden, sonst klafft unten eine Luecke zwischen Leiste und Inhalt. */ /* Die Reiterform steht in bmsw_lp-base.css - eine Stelle fuer alle drei Leisten (21.09.2026). Hier bleibt nur, was dieser Leiste eigen ist. */ /* Im Editor sitzt die Leiste direkt auf dem Kasten - dort darf KEIN Abstand stehen, sonst klafft eine Luecke zwischen Leiste und Inhalt. */ /* Mit der Karte darunter gilt wieder der normale Abstand der Leiste. */ .editor-tabs{background:transparent;} /* Schliessen ist ein Nebenknopf, keine Warnung: es geht nichts verloren. */ /* order:1 setzt ihn HINTER das Fuellstueck der Leiste (bmsw_lp-base.css, ::after mit flex:1). Ohne das schob das Fuellstueck ihn nach links neben die Reiter - vorher hielt ihn `margin-left:auto` am rechten Rand, und dort gehoert er hin (22.09.2026). */ .editor-tabs button.wizard-close{order:1;margin-left:auto;margin-bottom:6px;position:relative; background:var(--card);color:var(--accent);border:1px solid var(--accent); border-radius:var(--radius);padding:4px 11px;font-size:0.875rem;font-weight:700; text-transform:none;letter-spacing:0;} /* DIE LINIE LAEUFT AUCH UNTER DIESEM KNOPF DURCH. Seit dem 22.09.2026 traegt jeder Reiter sein Stueck Linie selbst - wer in der Leiste sitzt und keines traegt, reisst sie auf. Beim «Schliessen» kam dazu, dass er 6px ueber der Unterkante schwebt: seine eigene Kante waere an der falschen Hoehe und ausserdem rot. Darum ein eigener Strich genau dort, wo die Linie der Leiste laeuft (6px Abstand + 1px Kante). Marc, 22.09.2026: «hier auch die Linie, die unten verschwindet». */ .editor-tabs button.wizard-close::after{content:"";position:absolute; left:-1px;right:-1px;bottom:-7px;border-bottom:1px solid var(--rule); pointer-events:none;} .editor-tabs button.wizard-close:hover{background:var(--accent);color:#fff;} /* Der Reiterinhalt ist eine KARTE - dieselbe Form wie die Karten unter «Konto & Anpassungen» (Rahmen, Rundung, Kartenton). */ .tab-panel{padding:16px;border:1px solid var(--rule-light);border-radius:8px; background:var(--card);} .tab-panel[hidden]{display:none;} /* Verweise in den Reitern. Es gab dafuer keine Regel - jede Stelle war einzeln gefaerbt (Archivliste, Rahmenhinweis), und ein neuer Verweis im Fliesstext erschien im Browser-Blau. Eine Regel statt der naechsten Einzelfarbe. */ .tab-panel a{color:var(--accent);} /* Die Ueberschrift im Reiter: ruhige fette Schrift statt Arial Black in Versalien - wie die Kartentitel unter «Konto & Anpassungen». */ .tab-panel h3{margin:0 0 10px;font-weight:700;font-size:1rem;} .form-grid{display:grid;grid-template-columns:11rem 1fr;gap:8px 14px;margin-bottom:10px;align-items:start;} /* Erklaerung je Feld. Sie steht in der zweiten Spalte des Rasters unter dem Feld, zu dem sie gehoert - eine Sammelzeile am Ende erklaert nichts, weil man beim Ausfuellen nicht dorthin schaut. Der leere davor haelt die Beschriftungsspalte frei. */ /* Die Reiter tragen Fliesstext, den man am Stueck liest - dafuer ist 14px die falsche Stufe. 14px ist fuer Beschriftungen und Randnotizen gedacht. Die Tabelle geht umgekehrt eine Stufe zurueck: dort steht viel nebeneinander in schmalen Spalten, und Marc fand sie zu gross, sobald die Zellen gefuellt sind. Der gewonnene Platz kommt den Spalten zugute - die Mindestbreite steht in rem und schrumpft mit. */ .feldhilfe{margin:2px 0 8px;font-size:1rem;line-height:1.45;color:var(--muted);} .tab-panel p,.tab-panel li{font-size:1rem;line-height:1.5;} .feldhilfe strong{color:var(--fg);} .form-grid label{font-size:0.875rem;color:var(--muted);padding-top:6px;} .form-grid input[type=text],.form-grid input[type=date],.form-grid input[type=url],.form-grid textarea,.form-grid select{ width:100%;padding:6px 8px;border:1px solid var(--rule-light);background:var(--card);font:inherit;font-size:0.9375rem;border-radius:var(--radius);} .form-grid textarea{min-height:2.2em;resize:vertical;overflow:hidden;line-height:1.4;} .links-builder{display:flex;flex-direction:column;gap:4px;} .link-row{display:flex;gap:4px;} .link-row input{flex:1;} /* Auch hier die [hidden]-Absicherung: #f-zusatz-feld traegt diese Klasse UND das hidden-Attribut. Ohne die Zeile stuende das Feld der Zusatzspalte immer im Assistenten, auch wenn es gar keine Zusatzspalte gibt - display:flex an der Klasse schlaegt [hidden]{display:none} des Browsers. Gefunden am 11.08.2026 bei der systematischen Suche nach derselben Falle. */ .input-with-rep[hidden]{display:none !important;} .input-with-rep{display:flex;gap:0;align-items:flex-start;} .input-with-rep>:first-child{flex:1;} .rep-btn{background:var(--card);border:1px solid var(--rule-light);color:var(--muted);cursor:pointer;font-size:0.875rem; padding:3px 6px;margin-left:4px;flex-shrink:0;border-radius:var(--radius);} .rep-btn:hover{color:var(--accent);border-color:var(--accent);} .inline-rep{display:inline-block;background:var(--card);border:1px solid var(--rule-light);color:var(--muted);cursor:pointer; font-size:0.875rem;padding:1px 5px;margin-left:4px;border-radius:var(--radius);} .inline-rep:hover{color:var(--accent);} .actions-bar{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;} .help{font-size:0.875rem;color:var(--muted);margin:8px 0 0;} .list-table{width:100%;border-collapse:collapse;font-size:0.9375rem;margin:4px 0 10px;} .list-table td{padding:5px 6px;border-bottom:1px solid var(--rule-light);} .list-table th{padding:5px 6px;text-align:left;border-bottom:2px solid var(--rule);font-family:"Arial Black",Arial,sans-serif;font-size:0.875rem;} hr.sep{border:none;border-top:1px solid var(--rule-light);margin:14px 0;} .kv{font-size:0.9375rem;} .kv b{font-family:"Arial Black",Arial,sans-serif;} /* ---------- Rückmeldung ---------- */ .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ok);color:#fff; padding:10px 18px;font-size:0.9375rem;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;pointer-events:none; transition:opacity .2s;z-index:100;max-width:90vw;border-radius:var(--radius);} .toast.show{opacity:1;} /* Der Rand rechnet fliessend; nur das Formularraster wechselt die Form. */ @media(max-width:900px){ .form-grid{grid-template-columns:1fr;} } body.view-only .lp-only{display:none !important;} @media print{.lp-only{display:none !important;}body{padding:0;max-width:none;}} /* Auffang-Leiste für Downloads. Der Browser verwirft programmatisch ausgelöste Downloads teils lautlos (Sandbox im eingebetteten Rahmen, Drosselung wiederholter Downloads) - ein echter Klick auf diesen Link ist davon nicht betroffen. */ .dl-fallback{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:60; display:flex;align-items:center;gap:10px;max-width:min(92vw,560px); background:var(--fg);color:#fff;padding:10px 12px;font-size:0.9375rem; box-shadow:0 6px 24px rgba(0,0,0,.3);} .dl-fallback a{color:#fff;font-weight:700;text-decoration:underline;white-space:nowrap;} .dl-fallback-zu{background:none;border:none;color:#fff;font-size:1.1875rem;line-height:1; cursor:pointer;padding:0 2px;opacity:.75;} .dl-fallback-zu:hover{opacity:1;} .dl-fallback .dl-adresse{background:rgba(255,255,255,.15);padding:2px 6px;font-size:0.875rem; user-select:all;-webkit-user-select:all;word-break:break-all;} dialog.zugang-dlg #zugangFrage{margin:0 0 4px;font-size:1rem;} /* Liste der frueheren Fassungen (Werkzeug-Lasche) */ /* Nicht width:100%. Ueber die volle Reiterbreite gezogen trieben die vier Spalten so weit auseinander, dass Datum und Knopf nichts mehr miteinander zu tun schienen. Die Tabelle ist jetzt so breit wie ihr Inhalt. Und: die Zeilentrenner waren nie zu sehen - `var(--line)` gibt es nicht, die ganze border-bottom-Kurzschreibweise fiel damit still auf `none` zurueck (gemessen: "none 0px"). Richtig ist --rule-light. */ table.archiv-tab{width:auto;max-width:100%;border-collapse:collapse; margin-top:6px;font-size:0.9375rem;} table.archiv-tab td{padding:5px 14px 5px 0;border-bottom:1px solid var(--rule-light); vertical-align:middle;white-space:nowrap;} table.archiv-tab td:last-child{padding-right:0;} table.archiv-tab td:first-child{width:60px;color:var(--muted);} table.archiv-tab a{color:var(--accent);} /* Hinweis auf eine nachträglich geänderte Lektion (Merkzeichen [!] in Ablauf/Material) PETROL, nicht rot. Bei den selbst erzeugten Markierungen sagt die Farbe jetzt, WAS gemeint ist, und nur das: gelb eine Abgabe wird fällig rot ein Leistungsnachweis petrol alles Übrige - Hinweise, "Achtung", nachträgliche Änderungen Solange dieser Hinweis rot war, hiess Rot zweierlei, und man musste jedes Mal lesen, um zu wissen, worum es geht. */ .hinweis-neu{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding:5px 8px; border-left:4px solid #00797B;background:color-mix(in srgb, #00797B 12%, var(--card));color:var(--w-petrol,#03585a); font-size:0.9375rem;line-height:1.35;border-radius:var(--radius);} .hinweis-neu .meldung-teile{flex:1;min-width:0;} .hinweis-neu .hinweis-weg{margin-left:auto;flex:none;border:1px solid #00797B; background:var(--card);color:#00797B;border-radius:var(--radius);padding:1px 8px;font-size:0.875rem; cursor:pointer;white-space:nowrap;} .hinweis-neu .hinweis-weg:hover{background:#00797B;color:#fff;} body.view-only .hinweis-neu .hinweis-weg{display:none;} /* Bild-Hochladen unter der Material-Zelle. Gleiche Optik wie "↻ aus letzter" daneben, damit die beiden als ein Paar erkennbar sind. */ .inline-bild{display:inline-block;background:var(--card);border:1px solid var(--rule-light); color:var(--muted);cursor:pointer;font-size:0.875rem;padding:1px 5px;} .inline-bild:hover{color:var(--accent);border-color:var(--accent);} /* ---------- Werkzeugleiste beim Bearbeiten ----------------------------- Eine Leiste ueber der Tabelle, nicht eine je Zelle: sonst haette jede Zeile achtzehn Knoepfe. Sie klebt oben, damit sie auch bei langen Zeilen in Reichweite bleibt. */ /* Das Attribut hidden setzt display:none nur ueber die schwache Browser-Regel - eine eigene display-Angabe schlaegt sie. Ohne diese Zeile stand die Leiste IMMER da, auch fuer die Klasse in der Leseansicht. */ .ed-leiste[hidden]{display:none !important;} /* Kein sticky mehr: die Leiste steht jetzt direkt ueber der bearbeiteten Zeile beziehungsweise im Assistenten - sie muss nicht mehr oben kleben. */ .ed-leiste{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:7px 8px; margin:0 0 8px; background:var(--card); border:1px solid var(--rule-light); border-radius:var(--radius); } .ed-gruppe{display:flex; gap:4px; align-items:center; padding-right:8px; border-right:1px solid var(--rule-light);} .ed-gruppe:last-child{border-right:none; padding-right:0;} /* Der Ausgang steht IMMER auf einer eigenen, zweiten Zeile und dort mittig - nicht dort, wo der Umbruch ihn zufaellig hinwirft. flex-basis:100% zwingt den Umbruch, unabhaengig von der Fensterbreite. Und die Gruppe davor (Code) verliert ihren Trennstrich: er stuende sonst am Ende der ersten Zeile als Strich ins Leere. Von Marc am 13.08.2026 so bestellt. */ #edCodeGruppe{border-right:none; padding-right:0;} #edAktionen{flex:0 0 100%; justify-content:center; border-right:none; padding-right:0; margin-top:2px;} #edAktionen[hidden]{display:none !important;} .ed-titel{font-size:0.875rem; color:var(--muted); margin-right:2px;} /* Eine Adresse, die hier nicht funktionieren kann (relativ, unvollstaendig). Sie sieht bewusst NICHT wie ein Link aus - ein toter Link, der wie einer aussieht, faellt erst im Unterricht auf. Die Erklaerung steht im title. */ .link-untauglich{color:var(--muted); text-decoration:underline dotted; cursor:help;} /* Der Ausgang der Leiste. Solange nichts geaendert ist, steht dort hoechstens "Zeile schliessen" und die Gruppe sieht aus wie jede andere. Sobald es etwas zu entscheiden gibt, bekommt sie denselben roten Grund, den frueher die ganze Leiste ueber der Tabelle hatte - jetzt nur noch der Teil, um den es geht. Gruen und Rot, damit die zwei Wege nicht verwechselt werden. Von Marc am 13.08.2026 so bestellt. */ #edAktionen.hat-aenderung{ background:color-mix(in srgb, var(--accent) 14%, var(--card)); border-left:4px solid var(--accent); border-radius:var(--radius); padding:4px 8px;} #edAktionen.hat-aenderung .ed-titel{color:var(--m-rot,#7a2020); font-weight:700;} #alleUebernehmen{background:var(--ok); border-color:var(--ok); color:#fff;} #alleVerwerfen {background:var(--danger); border-color:var(--danger); color:#fff;} #alleUebernehmen:hover{filter:brightness(1.08);} #alleVerwerfen:hover {filter:brightness(1.08);} .ed-knopf{ background:var(--card); border:1px solid var(--rule-light); color:var(--fg); cursor:pointer; border-radius:var(--radius); font-size:0.875rem; padding:4px 8px; min-height:28px; line-height:1; } .ed-knopf:hover{border-color:var(--accent); color:var(--accent);} .ed-farbe{ width:22px; height:22px; border:1px solid #999; border-radius:var(--radius); cursor:pointer; padding:0; } .ed-farbe:hover{outline:2px solid var(--accent); outline-offset:1px;} /* Das gerade bearbeitete Feld hervorheben - sonst ist bei mehreren Feldern in der Zeile nicht erkennbar, worauf die Knoepfe wirken. */ [contenteditable="true"].ed-aktiv{outline:2px solid var(--accent); outline-offset:1px;} /* Traegerzeile der Werkzeugleiste in der Tabelle. Zwischen zwei darf nichts anderes stehen, darum eine eigene Zeile mit einer Zelle. */ .ed-leiste-zeile td{padding:0 0 6px; border:none; background:transparent;} #edLeisteAssistent .ed-leiste{margin:0 0 10px;} /* Reiche Felder im Assistenten sehen aus wie die frueheren Textfelder. */ .f-reich{ border:1px solid var(--rule-light); padding:4px 6px; min-height:1.6em; white-space:pre-wrap; background:var(--card); border-radius:var(--radius); } .f-reich:empty::before{content:attr(data-placeholder); color:var(--muted);} /* Gedrueckter Zustand des Code-Umschalters */ .ed-knopf.ed-an{background:var(--accent); color:#fff; border-color:var(--accent);} .ed-knopf:disabled{opacity:.4; cursor:not-allowed;} /* ---------- Reiter „Quelle / Sync" ------------------------------------ EINE Spalte. Die Liste frueherer Fassungen ist eine Tabelle mit vier Spalten - in einer Viertelspalte musste sie waagrecht rollen. Untereinander bekommt sie die volle Breite, und die Gliederung traegt die Trennung schon allein. DREI SCHRIFTSTUFEN, und zwar in der Reihenfolge der Gliederung. Vorher war die OBERSTE Stufe die kleinste und dazu grau - ein Etikett, das aussah wie eine Fussnote ueber dem, was es zusammenfasst. Jetzt nimmt die Schrift von oben nach unten ab: .rubrik die Frage 18px schwarz .weg-titel die Arbeitsweise 14px schwarz, Linie links .schritt ein Schritt darin 11.5px grau, mit Ziffer Die Titel MUESSEN .tab-panel voranstellen: `.tab-panel h3` setzt 12px und schlaegt eine blosse Klasse - das hatte die Arbeitsweisen schon einmal auf Schritt-Groesse gestaucht. Arial Black kommt von dort und bleibt: sie ist die Hausschrift der Ueberschriften. */ /* Roter Hinweis vor folgenreichen Eingaben. Bewusst kraeftiger als .help: der erklaerende Text darunter wird ueberlesen, dieser soll aufhalten. */ .warnhinweis{margin:0 0 10px;padding:8px 12px;border-left:4px solid var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--card));color:var(--m-rot,#7a2020);border-radius:var(--radius);line-height:1.4;} .warnhinweis a{color:var(--accent);font-weight:700;} .tab-panel .rubrik{font-size:1.25rem;text-transform:none;letter-spacing:0; color:var(--fg);margin:0 0 12px;line-height:1.2;} /* Ein waagrechter Strich zwischen den Bloecken - ohne die zweite Spalte braucht die Trennung ein eigenes Zeichen. */ .rubrikblock + .rubrikblock{margin-top:26px;padding-top:22px; border-top:2px solid var(--rule-light);} /* 30px statt 20 - die drei Arbeitsweisen standen zu eng beieinander. */ /* Der Strich am Block und die Schrittzahlen tragen die Schriftfarbe, nicht ein helles Grau (Marc, 21.09.2026: «Block auch schwarz - Konsistenz!»). Ein Gliederungszeichen gehoert zur Schrift, nicht zu den Linien. */ .weg{margin:0 0 30px;padding-left:12px;border-left:2px solid var(--fg);} .weg:last-child{margin-bottom:0;} .tab-panel .weg-titel{font-family:"Arial Black",Arial,sans-serif;font-weight:900; font-size:1rem;margin:0 0 5px;line-height:1.25;text-transform:none;letter-spacing:0;} .weg .help{margin:0 0 2px;} .weg .actions-bar{margin-top:8px;} .schritt{margin:13px 0 3px;font-weight:700;font-size:1rem;color:var(--fg); display:flex;align-items:center;gap:7px;letter-spacing:.02em;} .schritt .nr{display:inline-flex;align-items:center;justify-content:center; width:17px;height:17px;border-radius:50%;background:var(--fg); color:var(--bg);font-size:0.875rem;flex:0 0 auto;} /* Die Laufwerk-Anleitung ist zugeklappt: sie betrifft eine Minderheit und waere aufgeklappt laenger als die beiden anderen Wege zusammen. */ .wegdetails{margin-top:8px;} .wegdetails summary{cursor:pointer;font-size:1rem;color:var(--accent); text-decoration:underline;width:fit-content;} .wegdetails-inhalt{padding:6px 0 2px;} .adresse{margin:4px 0 0;} .adresse code{font-size:0.875rem;background:var(--bg-soft); border:1px solid var(--rule-light);padding:3px 6px;display:inline-block; overflow-wrap:anywhere;} /* FARBREGEL: rot heisst „überschreibt etwas". Nur ein Knopf im ganzen Reiter erfüllt das - das Hochladen. Alles Übrige holt nur und bleibt weiss. Die Farbe ist dabei NICHT das einzige Merkmal: die Pfeile ⬇ und ⬆ tragen dieselbe Aussage, und der Satz unter dem Knopf sagt es in Worten. */ .btn.gefahr{background:var(--accent);color:#fff;border:none;} .btn.gefahr:hover{opacity:.9;} .warnhilfe{color:var(--accent);margin-top:6px;} .rahmenhinweis{color:var(--accent);margin-top:22px;} .rahmenhinweis a{color:var(--accent);text-decoration:underline;} /* Volle Breite - die vier Spalten der Tabelle haben jetzt Platz. Das Rollen bleibt als Netz fuer schmale Telefone stehen. */ #archivListe{overflow-x:auto;margin-top:10px;} /* Zwischentitel INNERHALB der Liste - eine Stufe unter dem Weg-Titel ("Zurückholen"), damit die Gliederung des Reiters nicht durchbrochen wird. */ .archiv-titel{font-family:"Arial Black",Arial,sans-serif;font-weight:900; font-size:0.875rem;margin:14px 0 2px;color:var(--fg);} .archiv-titel:first-child{margin-top:4px;} /* Warum eine alte Fassung noch da ist, steht in der Zeile selbst - sonst wirkt sie wie ein Ueberbleibsel, das aufzuraeumen vergessen wurde. */ .archiv-marke{font-size:0.875rem;color:var(--muted);letter-spacing:.02em;} #archivListe .btn.gefahr{background:var(--accent);color:#fff;border:none;} /* Fuer Passwortverwalter lesbar, fuer Menschen unsichtbar (13.09.2026). Das Kennungsfeld im Zugangsdialog: "hidden" uebergehen Browser beim Speichern. */ .nur-fuer-verwalter { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; border: 0 !important; opacity: 0; } /* ---- Klassenvertretung: Marken, Liste, Freigaben (15.09.2026) ---------- */ .kv-marke { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 0 5px; border-radius: 4px; background: color-mix(in srgb, #72528D 18%, var(--card)); color: var(--kv-fg, #4a2f7a); font-size: 0.6875rem; font-weight: bold; vertical-align: middle; white-space: nowrap; } .kv-marke button, .kv-liste button { font: inherit; font-size: 0.75rem; line-height: 1; padding: 2px 5px; border-radius: 4px; border: 1px solid color-mix(in srgb, #72528D 40%, var(--card)); background: var(--card); cursor: pointer; } .kv-marke .kv-ok, .kv-liste .kv-ok { color: var(--ok); } .kv-marke .kv-weg, .kv-liste .kv-weg { color: var(--accent); } .kv-liste { border: 1px solid color-mix(in srgb, #72528D 30%, var(--card)); background: color-mix(in srgb, #72528D 8%, var(--card)); border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 0.875rem; } .kv-liste[hidden] { display: none !important; } .kv-liste ul { margin: 6px 0 0; padding-left: 18px; } .kv-liste li { margin: 3px 0; } .kv-wo { color: var(--kv-fg, #4a2f7a); font-weight: bold; } .kv-alt { text-decoration: line-through; color: var(--muted); } .kv-neu { color: var(--fg); } .frei-zeile { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 10px; } .frei-label { display: block; margin: 6px 0 4px; font-weight: bold; } .frei-matrix { border-collapse: collapse; margin: 8px 0; font-size: 0.875rem; } .frei-matrix th, .frei-matrix td { border: 1px solid #ddd; padding: 4px 8px; text-align: center; } .frei-matrix th:first-child { text-align: left; } /* ---- Wahlspalten: asynchrone Lektionen und Fachbereiche (16.09.2026) ------ Asynchron: das Wort steht anstelle von Wochentag und Datum, die KW bleibt. Fachbereich: farbige Zeile zuoberst in der Themenzelle. Die Farbe kommt je Zeile als --fb, damit eine Regel fuer alle Bereiche genuegt. */ .d-async { display:block; font-weight:700; color:var(--kv-fg, #5B3A8E); letter-spacing:.01em; } tr.is-async .cell-date { background:rgba(91,58,142,.06); } .fb-kopf { display:flex; flex-wrap:wrap; gap:3px; margin:0 0 4px; } .fb-marke { display:inline-block; max-width:100%; padding:1px 8px; border-radius:3px; font-size:.75rem; font-weight:700; line-height:1.5; color:#fff; background:var(--fb,#3F3F46); overflow-wrap:anywhere; } /* Auf dem Handy ist die Themenspalte schmal - ein farbiger Kasten stapelte sich dort Buchstabe fuer Buchstabe. Dort nur farbige Schrift. */ @media (max-width:620px){ .fb-marke { padding:0; font-size:.6875rem; background:none; color:var(--fb,#3F3F46); } .fb-kopf { gap:0 6px; } } .spalten-leiste { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0 6px; font-size:.875rem; } .spalten-leiste select { font:inherit; padding:2px 6px; } .fb-filter-an { color:var(--accent,#A5282E); font-weight:700; } .fb-zeile { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:.9375rem; } .fb-zeile .fb-name { min-width:10em; } .fb-punkt { width:15px; height:15px; border-radius:3px; background:var(--fb,#3F3F46); display:inline-block; flex:none; } .fb-zeile input { font:inherit; width:8em; padding:2px 6px; border:1px solid var(--rule-light,#ddd); border-radius:3px; } @media (max-width:620px){ .fb-zeile .fb-name { min-width:6em; } } /* ===================================================================== HANDY: eine Karte je Lektion (Marc, 21.09.2026: «Karten ist gut») --------------------------------------------------------------------- Gemessen am alten Stand: bei 375 px Fensterbreite schrumpfte die Tabelle auf 269 px, und die Spalte «Thema» bekam 24 Pixel - zwei bis drei Zeichen. Fuenf Spalten gehen in 343 px nicht auf; seitliches Schieben versteckt ausgerechnet die Aufgaben, wegen derer die Seite geoeffnet wird. Darum unter 560 px: die Tabelle wird zur Liste von Karten. Datum und Thema bilden den Kopf, darunter stehen die Felder mit kleiner Beschriftung. Es wird nichts versteckt und nicht seitlich geschoben. NICHT im Rahmen (OLAT, Teams): dort gilt eine feste Breite, und die Ansicht soll bleiben, wie sie ist - ausdruecklich so gewollt. Gebaut ohne Eingriff ins Skript: die Zellen tragen ihre Klassen (cell-date, cell-thema, cell-material, cell-tasks, cell-lz, cell-zusatz) seit jeher, die Beschriftungen kommen aus ::before. ===================================================================== */ @media (max-width: 620px) { /* Der Ausgleich links haelt die Tabelle auf grossen Schirmen mittig - auf dem Telefon kostet er zusammen mit den Abstaenden 72 der 343 Pixel. Gemessen: die Karte war 271 px breit statt 343. Beim Bearbeiten bleibt die Werkzeugspalte rechts, sie wird dort gebraucht. */ body:not(.im-rahmen) .tabelle-bereich { --ausgleich-links: 0px; gap: 4px; } body:not(.im-rahmen) .tabelle-bereich::before { display: none; } /* Kein Kasten mit eigenem Rollbalken: die Karten wachsen mit der Seite. */ body:not(.im-rahmen) .lessons-rahmen { border: none; border-radius: 0; overflow: visible; background: none; } body:not(.im-rahmen) .lessons-scroll { height: auto; max-height: none; overflow: visible; resize: none; border: none; } body:not(.im-rahmen) table.lessons, body:not(.im-rahmen) table.lessons tbody, body:not(.im-rahmen) table.lessons tr, body:not(.im-rahmen) table.lessons td { display: block; width: auto; } body:not(.im-rahmen) table.lessons thead { display: none; } body:not(.im-rahmen) table.lessons { border-collapse: separate; } body:not(.im-rahmen) table.lessons tr { border: 1px solid var(--rule-light); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; background: var(--card); } /* Die aktuelle Lektion traegt den Streifen links, wie im Kalender. */ body:not(.im-rahmen) table.lessons tr.is-current { border-color: var(--marker); border-left-width: 3px; } body:not(.im-rahmen) table.lessons td { border: none; padding: 0; } body:not(.im-rahmen) table.lessons td + td { margin-top: 7px; } /* Leere Felder fallen weg - eine Beschriftung ohne Inhalt sagt nichts. */ body:not(.im-rahmen) table.lessons td:empty { display: none; } /* Tag, Kalenderwoche und die Marke «Aktuell» auf EINER Zeile: der Erzeuger setzt sie als eigene Bloecke (d-line, d-kw), was in der Spalte richtig ist - in der Karte ergaebe es drei Zeilen fuer drei Woerter. */ body:not(.im-rahmen) table.lessons td.cell-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-weight: 700; font-size: 0.9375rem; } body:not(.im-rahmen) table.lessons td.cell-date .d-kw { font-weight: 400; font-size: 0.8125rem; color: var(--muted); } /* «Aktuell» steht ZUOBERST, wie in der Tabelle - es ist die Antwort auf «wo bin ich gerade» und gehoert vor das Datum, nicht daneben (Marc, 21.09.2026). `order:-1` und volle Breite geben ihm die erste Zeile der Karte. */ body:not(.im-rahmen) table.lessons tbody tr.is-current td:first-child::before { display: block; order: -1; flex: 1 1 100%; font-size: 0.8125rem; } body:not(.im-rahmen) table.lessons tbody tr.is-current td:first-child { border-left: none; } body:not(.im-rahmen) table.lessons td.cell-thema { font-weight: 700; margin-top: 2px; } /* Kleine Beschriftung ueber dem Feld statt einer Kopfzeile weit oben. */ body:not(.im-rahmen) table.lessons td.cell-material::before, body:not(.im-rahmen) table.lessons td.cell-tasks::before, body:not(.im-rahmen) table.lessons td.cell-lz::before, body:not(.im-rahmen) table.lessons td.cell-zusatz::before { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; } body:not(.im-rahmen) table.lessons td.cell-material::before { content: "Ablauf / Material"; } body:not(.im-rahmen) table.lessons td.cell-tasks::before { content: "Aufgaben"; } body:not(.im-rahmen) table.lessons td.cell-lz::before { content: "Lernziele"; } body:not(.im-rahmen) table.lessons td.cell-zusatz::before { content: attr(data-titel); } } /* ===================================================================== MITTEL (bis 900 px): Datum und Thema in EINER Spalte --------------------------------------------------------------------- Marc, 21.09.2026: «Thema sollte schon zu Datum springen, wenn ‹THEMA› nicht mehr ganz angezeigt werden kann.» Vorher wurde erst unter 620 px zusammengelegt - dazwischen stand die Spalte so schmal, dass schon ihre Beschriftung abgeschnitten war und «fällt aus» auf zwei Zeilen brach. Umgesetzt mit einer zweiten, normalerweise verborgenen Fassung des Themas INNERHALB der Datumszelle (.thema-im-datum). Zellen lassen sich in CSS nicht verschieben; eine zweite Fassung ist der uebliche Weg. Sichtbar ist immer nur eine von beiden, Vorlesegeraete lesen die verborgene nicht. Im Rahmen (OLAT, Teams) bleibt alles wie bisher. ===================================================================== */ .thema-im-datum { display: none; } @media (max-width: 900px) { /* Die Datumszelle ist gedaempft (color: var(--muted)) - das Thema ist aber der Inhalt, nicht die Nebenangabe, und traegt darum die normale Schriftfarbe wie in seiner eigenen Spalte. */ body:not(.im-rahmen) .thema-im-datum { display: block; font-weight: 400; margin-top: 3px; color: var(--fg); } /* Die Thema-Spalte wird NICHT mit display:none entfernt: bei table-layout:fixed ordnen sich die -Breiten dann der Reihe nach den verbleibenden Zellen zu, und alles verrutscht um eine Spalte - gemessen am 21.09.2026: «Ablauf / Material» bekam 0 px. Stattdessen bleibt die Zelle stehen, wird unsichtbar und ihre Spalte 0 breit. `visibility: collapse` auf waere der direkte Weg, aber Safari - also genau die iPads und iPhones, um die es hier geht - setzt es nicht zuverlaessig um. */ body:not(.im-rahmen) table.lessons td.cell-thema, body:not(.im-rahmen) table.lessons thead th:nth-child(2) { visibility: hidden; padding: 0; overflow: hidden; } /* Die Beschriftung sagt jetzt, was wirklich in der Spalte steht. */ body:not(.im-rahmen) table.lessons thead th:first-child::after { content: " · Thema"; } /* Die zusammengelegte Spalte traegt zwei Angaben und braucht dafuer Platz - mit den 5.625rem der reinen Datumsspalte braeche jedes Thema um. Der gewonnene Platz geht an Ablauf und Aufgaben, wie Marc es wollte. Gemessen bei 760 px vorher: Datum 90 px, Ablauf 74 px. */ body:not(.im-rahmen) table.lessons col.col-date { width: 11rem; } body:not(.im-rahmen) table.lessons col.col-thema { width: 0; } body:not(.im-rahmen) table.lessons.hat-zusatz col.col-thema { width: 0; } body:not(.im-rahmen) table.lessons col.col-material { width: 34%; } body:not(.im-rahmen) table.lessons col.col-tasks { width: 30%; } body:not(.im-rahmen) table.lessons col.col-lz { width: 22%; } } /* In der Kartenform steht das Thema auf einer eigenen Zeile unter dem Datum - die Datumszelle ist dort eine Flex-Zeile (Tag, KW, «Aktuell»). */ @media (max-width: 620px) { body:not(.im-rahmen) table.lessons td.cell-date .thema-im-datum { flex: 1 1 100%; font-weight: 700; margin-top: 2px; } }