/* ===================================================================== bmsw_lp-base.css — GEMEINSAMES Design aller BMSW-Seiten Eingebunden von: bmsw_lp-v20.html · klasse-*.html · portal-admin.html Eine Änderung hier wirkt auf ALLE Seiten gleichzeitig. Beim Aendern die Versionsnummer im -Verweis hochzählen (…/bmsw_lp-base.css?v=20 → ?v=21), sonst zeigen Browser die alte Fassung. ===================================================================== */ /* ---------- BMSW-Farben und Grundwerte (Corporate Design) ---------- */ :root { --fg:#252527; /* Schrift/Grundfarbe */ --muted:#6b6b6b; /* Sekundaertext */ --rule:#252527; /* kraeftige Trennlinie */ --rule-light:#d4d4d4; /* feine Trennlinie */ --accent:#A5282E; /* Dunkelrot: Links, Aktionen */ --marker:#00407C; /* Dunkelblau: "Aktuell" */ --highlight:#E1ECF2; /* Hellblau: aktuelle Zeile */ --frei-bg:#ececee; /* Hellgrau: unterrichtsfreie Zeile */ --frei-fg:#5f5f66; /* Dunkelgrau: Schrift darauf */ --bg-soft:#f1f1f1; --bg-edit:#fafbff; /* Seit 20.09.2026 zwei eigene Toene fuer die FLAECHEN - vorher stand ueberall #fff im Regelwerk, und genau das laesst sich nicht umschalten. --bg = die Seite selbst --card = Kaesten, Formulare, Eingabefelder, alles was auf der Seite liegt Im Hellen sind beide weiss; im Dunklen liegt die Karte eine Spur ueber dem Grund, damit Kaesten sichtbar bleiben, ohne Rahmen zu brauchen. */ --bg:#fff; --card:#fff; --ok:#16a34a; --danger:#dc2626; --warn:#f59e0b; /* Mini-Syntax-Farben (auch in bmsw_lp-core.js hinterlegt) */ --ms-rot:#C94646; --ms-gelb:#FFDC2F; --ms-petrol:#00797B; --ms-senf:#D69D00; /* EINE Eckenrundung fuer alles: Fenster, Knoepfe, Eingabefelder, Kaesten. Vorher standen im Projekt fuenf verschiedene Werte nebeneinander (0, 2, 3, 4 px und gar keiner) - nicht als Gestaltung, sondern weil jede Regel einzeln entstanden ist. Wer hier dreht, dreht ueberall zugleich. Ausgenommen bleiben nur echte Kreise (50%) und Knoepfe, die wie ein Textlink aussehen sollen. */ --radius:6px; /* Hoechstbreite der Seite - je Seitenart ueberschrieben. */ --seite-breite:1100px; /* Hoehe eines Aktionsfeldes (Stift, Pfeil, +/-). Der Radius ist --radius. */ --griff-hoehe:28px; } /* ---------- Drei Breiten, und nur diese drei ---------- Marc, 21.09.2026: «die Uebergaenge sollten fliessend sein, kleinere Anpassungen bei kleineren Veraenderungen des Fensters - und dann zwei bis drei Anpassungen des Anzeigeformats». Gemessen am alten Stand: ZEHN verschiedene Haltepunkte (360, 560, 600, 620, 660, 680, 720, 760, 850, 860) verteilt auf acht Stilblaetter, und `clamp()` dreimal in einer einzigen Datei. Die Seite sprang also an zehn Stellen und tat dazwischen gar nichts. Jetzt gilt: klein bis 620px Handy hochkant - Listen statt Tabellen, ein Tag mittel 621-900px Handy quer, iPad - knapper, aber gleiche Form normal 901-1400px PC - die gewohnte Ansicht gross ab 1400px der Platz traegt Inhalt: Woche und Anstehendes nebeneinander DAZWISCHEN wird gerechnet, nicht gesprungen: Schriftgroessen, Abstaende und Spaltenanteile stehen in clamp() und folgen jeder kleinen Aenderung. Ein Haltepunkt ist nur dort richtig, wo die FORM wechselt - jeder einzelne ist eine Stelle, die geprueft werden muss. Wer eine vierte Zahl einfuehrt, faengt wieder von vorne an. */ /* Fliessende Grundwerte. Die Zahlen bedeuten: kleinster Wert, Anteil der Fensterbreite, groesster Wert. */ :root { --rand: clamp(12px, 3.2vw, 24px); /* Seitenrand */ --luft: clamp(10px, 2.2vw, 20px); /* Abstand zwischen Bloecken */ --schrift: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); --titel-gross: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); --titel-klein: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem); } /* ---------- Dunkeldesign (Marc, 20.09.2026: «vielleicht noch ein Dunkel Design? Fuer die Augen?») ---------- STANDARD IST HELL (Marc, 21.09.2026). Ohne Angabe bleibt die Seite hell - auch auf einem Geraet, das dunkel gestellt ist. Wer es anders will, waehlt unter «Konto & Anpassungen -> Erscheinung»: data-theme fehlt / "hell" -> hell (Standard) data-theme="dunkel" -> dunkel data-theme="geraet" -> was das Geraet sagt (Medienabfrage unten) Gesetzt wird das Attribut von bmsw_lp-privat.js. Warum die Farben nicht dieselben sind: Das Corporate Design ist fuer Weiss gemacht. Dunkelrot #A5282E und Dunkelblau #00407C verschwinden auf dunklem Grund - sie ergeben zu wenig Kontrast (WCAG 1.4.3 verlangt 4.5:1 fuer Lauftext). Darum tragen hier die AUFGEHELLTEN Geschwister derselben Toene: dasselbe Rot, dieselbe Familie, nur so weit aufgehellt, dass es lesbar bleibt. Aufgezeichnet in LandingPage/doku/cd/CD-FARBEN.md. */ @media (prefers-color-scheme: dark) { :root[data-theme="geraet"] { --fg:#e8e8ea; --muted:#a2a2a8; --rule:#5a5a62; --rule-light:#3a3a40; --accent:#E8737A; /* Dunkelrot, aufgehellt */ --marker:#7FA9D6; /* Dunkelblau, aufgehellt */ --highlight:#1e2d36; /* Hellblau -> dunkles Blaugrau */ --frei-bg:#232326; --frei-fg:#9a9aa2; --bg-soft:#232326; --bg-edit:#1d1f26; --bg:#131315; --card:#1c1c1f; --ok:#4ade80; --danger:#f87171; --warn:#fbbf24; --ms-rot:#E8737A; --ms-gelb:#FFE566; --ms-petrol:#4FAFB0; --ms-senf:#E8B93A; /* Marken (Abgabe, Abgabe mit Note, LNW) - gemeinsam fuer Liste und Kalender. */ --m-gold:#E8B93A; --m-rot:#F09A9E; --m-kirsch:#E58FBB; --kv-fg:#C3ACE0; color-scheme: dark; } } :root[data-theme="dunkel"] { --fg:#e8e8ea; --muted:#a2a2a8; --rule:#5a5a62; --rule-light:#3a3a40; --accent:#E8737A; --marker:#7FA9D6; --highlight:#1e2d36; --frei-bg:#232326; --frei-fg:#9a9aa2; --bg-soft:#232326; --bg-edit:#1d1f26; --bg:#131315; --card:#1c1c1f; --ok:#4ade80; --danger:#f87171; --warn:#fbbf24; --ms-rot:#E8737A; --ms-gelb:#FFE566; --ms-petrol:#4FAFB0; --ms-senf:#E8B93A; /* Marken (Abgabe, Abgabe mit Note, LNW) - gemeinsam fuer Liste und Kalender. */ --m-gold:#E8B93A; --m-rot:#F09A9E; --m-kirsch:#E58FBB; --kv-fg:#C3ACE0; color-scheme: dark; } /* ---------- Warnzeichen in der Fusszeile ---------- Ersetzt seit 21.08.2026 das Band ueber dem Seitenkopf (Marc: "da will ich viel weniger"). Es steht hinter der Fassung, ist einen Anschlag gross. ZWEI ZEICHEN: Dreieck = Stoerung (gelb / rot), Kreis = Loesungsstand (hellgruen = Umweg vorhanden). Dieselben Zeichen stehen in der Anleitung an den Eintraegen - so ist nach dem Klick sofort klar, welcher gemeint war. Die Erklaerung ist eine EIGENE Flaeche, kein title-Attribut: der native Tooltip erscheint traege und im eingebetteten Rahmen oft gar nicht. Sie oeffnet nach oben und nach links, weil das Zeichen unten rechts sitzt. */ .stoer-zeichen{position:relative;display:inline-block;margin-left:8px; text-decoration:none;font-size:0.9375rem;line-height:1;vertical-align:baseline;} /* Gelb = gemeldet, Rot = etwas geht gar nicht. Die Farbe liegt am Zeichen selbst, weil es gezeichnet ist - ein Filter auf einem Emoji ergab Orange. */ .stoer-zeichen .sz-dreieck{display:inline-block;color:#D69D00;opacity:.9; vertical-align:-0.15em;} .stoer-zeichen .sz-dreieck svg{display:block;width:1.05em;height:1.05em;} .stoer-zeichen:hover .sz-dreieck, .stoer-zeichen:focus-visible .sz-dreieck{opacity:1;} .stoer-zeichen.ist-rot .sz-dreieck{color:#C0392B;opacity:1;} .stoer-zeichen .sz-kreis{display:inline-block;width:8px;height:8px; border-radius:50%;background:#7ccf8e;margin-left:4px;vertical-align:middle;} .stoer-zeichen .sz-hinweis{ position:absolute;bottom:calc(100% + 8px);right:0;z-index:40; display:none;text-align:left; /* Breite als zwei Angaben statt als min(): gleichwertig, aber jede fuer sich lesbar - und wer sie aendern will, muss nicht wissen, welches Glied gerade greift. */ width:22rem;max-width:80vw; background:var(--card);color:var(--fg);border:1px solid var(--rule-light); border-left:4px solid var(--ms-senf);border-radius:var(--radius); padding:9px 11px;font-size:0.875rem;line-height:1.45;font-weight:400; box-shadow:0 6px 20px rgba(0,0,0,.14);} .stoer-zeichen.ist-rot .sz-hinweis{border-left-color:var(--danger);} .stoer-zeichen:hover .sz-hinweis, .stoer-zeichen:focus-visible .sz-hinweis{display:block;} .stoer-zeichen .sz-hinweis hr{border:none;border-top:1px solid var(--rule-light); margin:7px 0;} .stoer-zeichen .sz-seit{color:var(--muted);font-size:0.8125rem;} .stoer-zeichen .sz-umweg{color:#1f7a3a;font-weight:700;} .stoer-zeichen .sz-liste{margin:4px 0 6px;padding-left:1.1em;} .stoer-zeichen .sz-liste li{margin:2px 0;} .stoer-zeichen .sz-fuss{display:block;margin-top:8px;padding-top:6px; border-top:1px solid var(--rule-light);color:var(--muted);font-size:0.8125rem;} /* Auf dem Handy gibt es kein Hovern - dort fuehrt der erste Tipp gleich in die Anleitung, und die Flaeche bleibt weg statt beim Tippen aufzublitzen. */ @media (hover:none){ .stoer-zeichen .sz-hinweis{display:none !important;} } /* ---------- Grundgeruest ---------- */ * { box-sizing:border-box; } /* KEINE feste Wurzelgroesse. Alle Schriftgroessen stehen seit dem 12.08.2026 in rem, und rem bezieht sich auf genau diesen Wert. Bleibt er ungesetzt, gilt die Einstellung des Browsers oder des Geraets - wer dort "grosse Schrift" waehlt, bekommt sie auf dieser Seite auch. Stuende hier "font-size:16px", waere diese Einstellung wirkungslos, und es braeuchte einen eigenen Knopf zum Vergroessern. Zoom (Strg/Cmd +) wirkt ohnehin und unabhaengig davon - auch im Teams-Rahmen. Das ist der Weg fuer "einmal schnell groesser". */ html { max-width:100%; overflow-x:hidden; } body { font-family:Arial,"Helvetica Neue",Helvetica,sans-serif; color:var(--fg); background:var(--bg); margin:0; line-height:1.45; font-size:var(--schrift); overflow-x:hidden; } /* DIE SEITE WAECHST MIT DEM FENSTER - UND BLEIBT DANN MITTIG STEHEN. Marc, 21.09.2026: «die Landingpage waechst mit der Groesse des Fensters und bleibt dann irgendwann in einer bestimmten Groesse, aber schoen zentriert zum Fenster, das sollte auch bei allen anderen Seiten so sein - also vor allem den Startseiten.» Gemessen an jenem Tag: die Fachseite hatte "margin-inline:auto", die persoenliche Startseite (bmsw_lp-lehrperson.css) und das Klassenportal (bmsw_lp-portal.css) NICHT - sie klebten oberhalb ihrer Hoechstbreite am linken Rand. Die Regel steht jetzt EINMAL hier; jede Seitenart setzt nur noch ihre Hoechstbreite als --seite-breite (Bauregeln 7: eine Quelle je Sache). Auf der Fachseite setzt das Skript --seite-breite im fremden Rahmen (Teams, OLAT) direkt am - eine Stilvorgabe am Element schlaegt diese hier. */ body { padding: var(--rand); max-width: min(var(--seite-breite), 100%); margin-inline: auto; } /* Seitenbreite/-rand setzt jede Seite selbst (Landingpage 1100px zentriert, Klassenportal 850px linksbuendig) — bewusst NICHT hier. */ /* ---------- Kopfbereich (auf allen Seiten gleich) ---------- */ /* Kopfzeile (Marc, 21.09.2026): Signet LINKS, Titel und Untertitel RECHTS buendig, der Menueknopf ganz rechts - und zwar immer, auch wenn der Block unter das Signet rutscht. Titel und Knopf stehen dabei auf derselben Hoehe. Vorher wechselte die Kopfzeile schon bei 900 px in eine gestapelte, linksbuendige Form: Signet, darunter der Knopf, darunter der Name. Der Knopf sprang damit von rechts nach links - und ein Bedienelement, das seine Stelle wechselt, muss man jedes Mal neu suchen. Marc: «möglichst Menüs, Knöpfe etc. nicht verschieben in der Position». Gebaut mit Umbruch statt mit einem Haltepunkt: `.titles` verlangt 320px. So lange die neben das Signet passen, steht alles in einer Zeile; passt es nicht mehr, rutscht der GANZE Block auf die zweite Zeile - rechtsbuendig wie zuvor. Innen ist `.titles` ein Raster aus zwei Spalten: links der Text, rechts der Knopf ueber beide Zeilen. */ header.page-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:6px 24px; padding-bottom:8px; border-bottom:1px solid var(--rule); } header.page-header .brand { display:flex; align-items:center; gap:12px; flex:0 0 auto; } header.page-header img.logo { height:56px; width:auto; display:block; } header.page-header .titles { flex:1 1 320px; display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:start; text-align:right; } header.page-header .titles > h1, header.page-header .titles > .teacher { grid-column:1; } header.page-header .titles > .menue { grid-column:2; grid-row:1 / span 2; } header.page-header h1 { margin:0; font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:1.25rem; line-height:1.2; } header.page-header .teacher { color:var(--muted); font-size:0.9375rem; margin-top:2px; } .header-rule-bottom { border-bottom:1px solid var(--rule); margin:2px 0 16px; } /* ---------- Abschnitts-Ueberschriften ---------- */ h2.section-title, section.fixed-info h2 { font-family:"Arial Black",Arial,sans-serif; font-weight:900; font-size:0.9375rem; margin:0 0 6px; letter-spacing:.02em; } /* ---------- Fusszeile / rechtlicher Hinweis ---------- */ footer.page-footer { margin-top:24px; padding-top:8px; border-top:1px solid var(--rule-light); color:var(--muted); font-size:0.875rem; text-align:center; } /* Die Fassung der Seite, ganz am Schluss und blass. Sie beantwortet EINE Frage: zeigt dieser Rahmen (Teams, OLAT) schon den neuen Stand? Die Zahl wird NICHT von Hand gepflegt - sie stammt aus dem ?v= des Stilblatts, das beim Ausrollen ohnehin hochgezaehlt wird. Zwei Stellen zu pflegen hiesse eine zu vergessen. Vom Schulserver uebernommen am 13.08.2026. */ .seiten-stand { opacity:.55; } .legal { margin-top:24px; padding-top:12px; border-top:1px solid var(--rule-light); font-size:0.875rem; color:#9a9a9a; text-align:center; } .legal a { color:#9a9a9a; } /* ---------- Aufzaehlungen ---------- Beginnt ein Punkt fett, wird auch sein Aufzaehlungszeichen fett gesetzt (Klasse kommt aus bmsw_lp-core.js). Ein Stil direkt am
  • erreicht das Zeichen nicht, ein fettes
  • wuerde den ganzen Punkt fett machen. */ li.marke-fett::marker { font-weight:bold; } /* Formularelemente erben die Schriftgroesse NICHT von allein - der Browser gibt ihnen eine eigene, kleinere (gemessen: 13.33px, waehrend die Seite auf 16px steht). Betroffen war alles ohne eigene Regel, unter anderem die Dateiauswahl beim Excel-Hochladen und der Anmeldeknopf. Die Schriftart bleibt unangetastet: Knoepfe mit .btn setzen sie selbst (Arial Black), und eine Klasse schlaegt einen Elementnamen. */ button, input, select, textarea { font-size:inherit; } /* ---------- Schaltflaechen ---------- */ /* Der Knopf - eine Form fuer alle Seiten (Prueflauf vom 21.09.2026). Bis dahin trug `.btn` Arial Black in Versalien und `.privat-knopf` auf der Startseite ruhige fette Schrift: derselbe Knopf sah auf zwei Seiten verschieden aus. Marc: «moeglichst konsistente Darstellung fuer gleiche oder gleichbedeutende Elemente» und «das minimalistische Design ueberall, wo wir das koennen». Massgebend ist jetzt die ruhige Form. `.btn.secondary` ist der Nebenknopf: Umriss statt Flaeche, wie `.privat-knopf.zweit`. */ .btn { background:var(--accent); color:#fff; border:none; padding:5px 12px; cursor:pointer; font:inherit; font-weight:bold; font-size:0.875rem; letter-spacing:0; text-transform:none; border-radius:4px; white-space:nowrap; } .btn:hover { opacity:.9; } .btn.secondary { background:var(--card); color:var(--accent); border:1px solid var(--accent); } /* Der Hauptknopf traegt EINE Farbe - die Akzentfarbe, wie auf der Startseite. Gruen war eine zweite Bedeutung fuer dieselbe Sache (Marc, 21.09.2026: «Farben nur wo noetig»). `.success` bleibt als Name bestehen, damit die Seiten nicht angefasst werden muessen. */ .btn.success { background:var(--accent); } .btn.small { padding:3px 8px; font-size:0.875rem; } @media (max-width:900px) { /* KEIN Wechsel der Ausrichtung mehr: der Umbruch oben genuegt, und der Knopf bleibt dort, wo man ihn sucht. */ } /* ---------- Kurze Erklaerung fuer die Klasse ---------- Sie liegt ueber der Fusszeile und ist zugeklappt; aufgeschlagen wird sie ueber den Verweis IN der Fusszeile. Kein eigener Knopf unter der Tabelle mehr - der nahm Platz weg, den der Fahrplan braucht (Marc, 21.08.2026). */ .seiten-hilfe[hidden]{display:none;} .seiten-hilfe{margin:16px 0 4px;} .seiten-hilfe-inhalt{padding:12px 14px;border:1px solid var(--rule-light); border-left:4px solid var(--rule-light);border-radius:var(--radius); background:var(--bg-soft);font-size:0.9375rem;line-height:1.55;max-width:46rem;} .seiten-hilfe-inhalt p{margin:0 0 10px;} .seiten-hilfe-inhalt p:last-child{margin-bottom:0;} /* Die Marken im Erklaertext sind Beispiele, keine echten Termine - sie duerfen die Zeile nicht auseinanderziehen. */ .seiten-hilfe-inhalt .termin{display:inline;} /* ---------- Kapitel und Beispiele in der Erklaerung ---------- Jedes Kapitel einzeln auf- und zuklappbar; unten ein roter Ausgang, der alles schliesst. Die Beispiele stehen in einem eigenen Rahmen, damit klar ist: Das ist gezeigt, nicht gesagt. */ details.hilfe-thema{border-top:1px solid var(--rule-light);} details.hilfe-thema:first-of-type{border-top:none;} details.hilfe-thema > summary{cursor:pointer;padding:8px 0;font-weight:700; list-style:none;display:flex;align-items:center;gap:8px;} details.hilfe-thema > summary::-webkit-details-marker{display:none;} details.hilfe-thema > summary::before{content:"+";display:inline-block;width:1em; text-align:center;font-weight:900;color:var(--accent);} details.hilfe-thema[open] > summary::before{content:"–";} .hilfe-inhalt{padding:0 0 10px 1.5em;} .hilfe-inhalt p{margin:0 0 10px;} .hilfe-inhalt p:last-child{margin-bottom:0;} .hilfe-probe{margin:6px 0 12px;padding:9px 11px;background:var(--card); border:1px dashed var(--rule-light);border-radius:var(--radius);} /* Die Probetabellen sollen zeigen, nicht die Breite der echten sprengen. */ .hilfe-probe table.lessons{min-width:0;width:100%;} .hilfe-probe .vorgriff{margin-top:0;} .hilfe-ausgang{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-light);} /* Das Signet gibt es in zwei Fassungen, beide schwarzweiss und mit durchsichtigem Grund (Marc, 21.09.2026: «mach das Amaze-Logo fuer diese Seiten in schwarzweiss statt blau/gelb - und in der Dunkelversion Gelb mit Schwarz wechseln»): bmsw-logo-sw.png schwarzes Feld, weisses Zeichen bmsw-logo-sw-dunkel.png helles Feld, dunkles Zeichen Erzeugt aus der JPG-Vorlage; die Farben des CD bleiben dem Uebrigen. Der Pfad ist relativ zu DIESEM Stilblatt, das in assets/ liegt. Steht hier in der GRUNDLAGE, weil auch die Lektions-Startseite das Signet traegt. */ :root[data-theme="dunkel"] .brand .logo { content: url("../bmsw-logo-sw-dunkel.png"); } @media (prefers-color-scheme: dark) { :root[data-theme="geraet"] .brand .logo { content: url("../bmsw-logo-sw-dunkel.png"); } } /* ---------- Hell oder dunkel, unten in der Fusszeile ---------- Drei Kreise: leer = hell, halb = wie das Geraet, voll = dunkel (Marc, 21.09.2026). Sie stehen leise da - eine Fachseite sehen vor allem Lernende, und fuer die ist das kein Hauptbedienelement. Die Erklaerung oeffnet beim Darueberfahren, wie beim Stoerzeichen daneben. */ .thema-wahl-fuss { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; } .thema-knopf { position: relative; width: 22px; height: 22px; padding: 0; line-height: 1; font-size: 0.875rem; cursor: pointer; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--muted); } .thema-knopf:hover { color: var(--fg); border-color: var(--rule-light); } .thema-knopf.an { color: var(--fg); border-color: var(--rule-light); background: var(--bg-soft); } .thema-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .thema-hinweis { /* Nach LINKS geoeffnet, nicht mittig: die Kreise stehen am Ende der Fusszeile, und eine mittige Flaeche ragte rechts aus dem Fenster (gesehen am 21.09.2026 im Bild). */ position: absolute; bottom: calc(100% + 7px); right: 0; left: auto; z-index: 40; display: none; width: max-content; max-width: 15rem; padding: 7px 10px; border-radius: var(--radius); background: var(--fg); color: var(--bg); font-size: 0.75rem; font-weight: 400; line-height: 1.4; text-align: left; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: default; } /* Offen bleibt, was JS oeffnet - nicht was der Zeiger gerade beruehrt: sonst verschwaende die Flaeche auf dem Weg zum Haekchen darin (Marc, 21.09.2026). Geschlossen wird beim Klick daneben, mit Escape oder kurz nachdem der Zeiger sie verlassen hat. */ .thema-knopf.offen .thema-hinweis { display: block; } .thema-hinweis-fuss { display: block; margin-top: 3px; opacity: .75; } /* Das Haekchen sitzt IN der Flaeche - es ist eine eigene Frage: wie lange die Wahl gilt. Ohne Klick bleibt es bei dieser Sitzung. */ .thema-merken { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(127,127,127,.4); } .thema-merken input { margin: 2px 0 0; flex: 0 0 auto; } /* Auf dem Telefon gibt es kein Darueberfahren - die Flaeche wird darum vom TIPP geoeffnet: ein Tipp auf einen Kreis setzt die Wahl UND laesst die Erklaerung stehen. Anders waere das Haekchen «Auf diesem Geraet speichern» auf dem Handy gar nicht erreichbar gewesen; bis zum 21.09.2026 war es das auch nicht - ein Fehler, den Marcs Frage aufgedeckt hat. Geschlossen wird mit einem Tipp daneben. */ /* ===================================================================== REITER — eine Form, an allen drei Orten --------------------------------------------------------------------- Marc, 21.09.2026: «die Reiter sollten auch hier in diesem Design sein wie das Menü der Startseite — dieses Design möglichst bei allen Reitern umsetzen!» Bis dahin standen die Werte dreimal da: bei «Konto & Anpassungen», im Editor der Fachseite und im «Anstehendes». Dreimal dieselbe Absicht, dreimal eigene Zahlen - und damit dreimal die Gelegenheit, dass eine davon abweicht. Jetzt stehen sie HIER, einmal. Wer eine neue Reiterleiste baut, gibt ihr die Klasse `reiter-leiste` (die Knoepfe darin brauchen keine eigene Klasse) und ist fertig. ===================================================================== */ .reiter-leiste, .konto-reiter, .editor-tabs, .anst-reiter { display: flex; flex-wrap: wrap; gap: 0; align-items: flex-end; /* KEINE Linie am Kasten. Sie stand hier und lief damit auch hinter dem aktiven Reiter durch - dort, wo das Loch sein soll. Sie musste also zugedeckt werden, und genau diese Naht blitzte auf (Marc, 22.09.2026: «das Loch ist wichtig, aber warum braucht es hinter diesem Loch diese Nahtstelle?»). Jetzt traegt JEDER Reiter sein Stueck Linie selbst, der aktive eben nicht - hinter dem Loch ist nichts mehr, was durchscheinen koennte. Rechts fuellt ::after den Rest bis zum Rand. Darum auch gap:0: eine Luecke zwischen den Reitern waere eine Luecke in der Linie. Getrennt werden sie durch ihre Polsterung. */ /* Die Linie laeuft ueber den GANZEN Bereich, nicht nur unter den Reitern (Marc, 21.09.2026: «die Linie, die links und rechts vom gewaehlten Reiter weggeht, sollte immer ueber den ganzen Bereich gehen»). Ohne width:100% ist die Leiste in einem Flex- oder Inline-Umfeld nur so breit wie ihr Inhalt - dann endete die Linie hinter dem letzten Reiter, waehrend die Liste darunter weiterging. */ width: 100%; box-sizing: border-box; /* Abstand nach unten GEHOERT zur Leiste. Beim Zusammenlegen der drei Fassungen am 21.09.2026 ging er verloren, weil er nur in einer davon stand - die Karte klebte danach an der Reiterlinie (Marc: «da ueberlappen die grafischen Elemente ploetzlich, wo ist der Abstand hin?»). Das ist die Gefahr beim Zusammenlegen: Was nur an EINER Stelle stand, faellt still weg. */ margin: 0 0 14px; } .reiter-leiste > button, .konto-reiter button, .editor-tabs button, .anst-reiter button { font: inherit; font-size: 0.9375rem; cursor: pointer; padding: 7px 14px; border: 1px solid transparent; border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; background: none; color: var(--muted); } /* Das Stueck Linie rechts neben dem letzten Reiter - damit sie ueber den ganzen Bereich laeuft (Marc, 21.09.2026). Ein Fuellstueck ohne Hoehe: bei align-items:flex-end sitzt seine Unterkante auf derselben Linie wie die der Reiter. */ .reiter-leiste::after, .konto-reiter::after, .editor-tabs::after, .anst-reiter::after { content: ""; flex: 1 1 0; min-width: 0; border-bottom: 1px solid var(--rule); } .reiter-leiste > button:hover, .konto-reiter button:hover, .editor-tabs button:hover, .anst-reiter button:hover { color: var(--fg); } .reiter-leiste > button.aktiv, .konto-reiter button.aktiv, .editor-tabs button.active, .anst-reiter button.aktiv { background: var(--card); color: var(--fg); font-weight: 700; border-color: var(--rule); /* DAS LOCH: der aktive Reiter zeichnet sein Stueck Linie einfach nicht. Nichts zu ueberdecken, also auch nichts, was aufblitzen kann. */ border-bottom-color: transparent; } /* ===================================================================== BAUREGELN — was gleich ist, sieht gleich aus --------------------------------------------------------------------- Marc, 21.09.2026: «Du musst Bauregeln aufbauen!!! Alles muss nach Funktion gleich aussehen und immer gleich gebaut werden!» DIE FARBE SAGT, WAS ES IST: grau = ein Handgriff. Er tut etwas AUF DIESER SEITE. rot (Akzent) OHNE Darueberfahren = ein LINK. Er fuehrt woandershin. rot BEIM Darueberfahren = derselbe Handgriff, jetzt unter dem Zeiger. schwarz/weiss = eine Auswahl (Haken, Schalter). Keine Farbe, kein Akzent. DARAUS FOLGT die Wahl der Klasse: .handgriff Handgriff als Text oder Zeichen (+ Aufgabe, Optionen, Zeile schliessen). Grau, beim Darueberfahren Akzent. a Link. Akzent, unterstrichen. Nie grau. .btn Hauptknopf: die EINE Handlung eines Bereichs. Gefuellt. .btn.secondary Nebenknopf: Umriss statt Flaeche. .reiter-leiste Reiter (siehe oben). input[type=checkbox|radio] Auswahl. accent-color = Schriftfarbe. WER ETWAS NEUES BAUT, waehlt aus dieser Liste - und fuegt nichts hinzu, ohne die Liste zu erweitern. Ausgeschrieben steht das in LandingPage/doku/bauregeln.md. ===================================================================== */ /* Auswahl ist schwarz/weiss, nicht blau: Blau ist die Farbe des Browsers, nicht unsere - und im Dunkeln leuchtet sie. accent-color faerbt Haken und Schalter mit der Schriftfarbe, also schwarz im Hellen und hell im Dunkeln. */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--fg); } /* DER LINK. Bis zum 21.09.2026 gab es dafuer gar keine Regel - jede Stelle faerbte ihre Verweise selbst, und was jemand vergass, blieb im Blau des Browsers stehen (gemessen: «← Zur Startseite» kam auf rgb(158,158,255)). Genau so entsteht Uneinheitlichkeit: nicht aus Absicht, sondern aus einer fehlenden Regel. Jetzt gilt sie fuer JEDEN Verweis, und Ausnahmen muessen sich ausdruecklich abmelden. */ a { color: var(--accent); } a:hover { color: var(--accent); } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Ausnahme: ein Verweis, der als Knopf gebaut ist, traegt dessen Farbe. */ a.btn, a.privat-knopf, a.handgriff { color: inherit; } a.handgriff { color: var(--muted); } a.handgriff:hover { color: var(--accent); } /* ===== DAS AKTIONSFELD ======================================================= Marc, 21.09.2026: «alle Bearbeitungselemente sollen so umkreist sein und der Kreis soll rot werden, wenn ich drauf gehe … der Radius muss vereinheitlicht werden - zumindest bei gleichgrossen Elementen und proportional zur Groesse.» GEMESSEN an jenem Tag, vier Formen fuer dieselbe Sache: +/- eines Bereichs 26x26 px, Rundung 3 px Pfeile ‹ › / «Heute» 32 px hoch, Rundung 3 px Stift «Optionen» 28x28 px, Rundung 6 px (--radius) ↻ / + im Editor frei wachsend, Rundung 6 px Jetzt EINE Form: --griff-hoehe hoch, Rundung --radius, Umriss grau, beim Darueberfahren Akzent - Umriss UND Zeichen. Das ist die Form, die Bauregeln 2 unter «Handgriff» meint; ein Handgriff ist seither ein Kaestchen. =========================================================================== */ .handgriff, .bereich-schalter, .woche-nav, .woche-heute, .anst-optionen button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--griff-hoehe); height: var(--griff-hoehe); padding: 0 8px; /* font-weight ausdruecklich: `font: inherit` holt sonst die Fettung der Umgebung mit. «+ Aufgabe» steht in einem

    und war darum fett, waehrend «+ Termin» im Kalender normal war - dieselbe Sache, zwei Bilder (22.09.2026). Die Schriftstaerke gehoert zur Form, also hierher. */ font: inherit; font-size: 0.875rem; font-weight: 400; line-height: 1; text-decoration: none; color: var(--muted); background: var(--card); border: 1px solid var(--rule-light); border-radius: var(--radius); cursor: pointer; } .handgriff:hover, .handgriff:focus-visible, .bereich-schalter:hover, .bereich-schalter:focus-visible, .woche-nav:hover, .woche-nav:focus-visible, .woche-heute:hover, .woche-heute:focus-visible, .anst-optionen button:hover, .anst-optionen button:focus-visible { color: var(--accent); border-color: var(--accent); } .handgriff:focus-visible, .bereich-schalter:focus-visible, .woche-nav:focus-visible, .woche-heute:focus-visible, .anst-optionen button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Angewaehlt: derselbe Umriss wie unter dem Zeiger, damit man sieht, was gilt. */ .handgriff.an, .anst-optionen button.an { color: var(--accent); border-color: var(--accent); } /* ===== KARTE ================================================================= Bauregeln 3: eine Karte oder Liste klappt mit ▸ / ▾ auf. Die Form stand frueher nur in bmsw_lp-privat.css und galt darum nur fuer «Konto & Anpassungen»; der Editor der Fachseiten baute sich seine Bloecke selbst (.rubrikblock) und sah anders aus. Seit dem 21.09.2026 (Marc: «Das muessten einfach wieder nur Bloecke sein, so wie im ueblichen Design, dem neuen») gibt es die Form EINMAL, hier, fuer beide. =========================================================================== */ .karte { border: 1px solid var(--rule, #e4e4e4); border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; background: var(--card); } .karte > h3, .karte h3:first-child { margin: 0 0 8px; font-size: 1rem; } details.karte > summary, details.auf-archiv > summary { cursor: pointer; font-size: 1rem; font-weight: 700; list-style: none; display: flex; align-items: baseline; gap: 8px; } details.karte > summary::-webkit-details-marker { display: none; } details.karte > summary::before { content: "\25B8"; color: var(--muted, #666); font-weight: 400; } details.karte[open] > summary::before { content: "\25BE"; } details.karte[open] > summary { margin-bottom: 10px; } .karte-neben { font-weight: 400; font-size: 0.8125rem; color: var(--muted, #666); } /* Auf dem Telefon SCHIEBEN die Reiter, sie brechen nicht um (22.09.2026). Umgebrochen standen sie in zwei Zeilen, und die Linie zerfiel in Stuecke - jede Zeile hatte ihr eigenes Ende. Eine Zeile, die man seitlich schiebt, behaelt eine durchgehende Linie und dieselbe Form wie auf dem grossen Schirm. So macht es auch jede Kalender-App. */ @media (max-width: 620px) { .reiter-leiste, .konto-reiter, .editor-tabs, .anst-reiter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .reiter-leiste::-webkit-scrollbar, .konto-reiter::-webkit-scrollbar, .editor-tabs::-webkit-scrollbar, .anst-reiter::-webkit-scrollbar { display: none; } .reiter-leiste > button, .konto-reiter button, .editor-tabs button, .anst-reiter button { flex: 0 0 auto; } } /* ===== DIE ZEICHEN ========================================================== Marc, 22.09.2026: «am einfachsten machst du wohl jeweils neue eigene Symbole, die sich gut und mittig ins bestehende Design integrieren lassen». WARUM NICHT DIE SCHRIFTZEICHEN: Ein «←», «✎» oder «–» sitzt dort, wo die Schrift es hinlegt - bei Arial ueber der Mitte der Zeile, und je nach Schriftgroesse verschieden weit. Kein Zentrieren im Kaestchen holt das zurueck, weil der Kasten das ZEICHEN mittig setzt, nicht seine TINTE. Marc hat es zweimal gesehen: erst am Minus, dann an den Pfeilen. WIE ES STATTDESSEN GEHT: gezeichnet, als Maske. Die Flaeche traegt currentColor - das Zeichen ist damit im Hellen schwarz, im Dunkeln hell und beim Darueberfahren rot, ohne eine einzige eigene Farbregel. Und es sitzt dort, wo wir es hinzeichnen: in der Mitte eines 20x20-Feldes. WER EIN NEUES ZEICHEN BRAUCHT, nimmt diese Vorlage: viewBox 0 0 20 20, fill none, stroke black, stroke-width 1.6, runde Enden. Alles Sichtbare liegt zwischen 4 und 16 - so bleibt am Rand Luft, und zwei Zeichen nebeneinander wirken gleich gross. =========================================================================== */ .sym-auge, .sym-auge-zu, .sym-links, .sym-rechts, .sym-stift, .sym-zu { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; background-color: currentColor; flex: 0 0 auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Pfeile: Schaft und Spitze, beide auf der Mittellinie y=10. */ .sym-links { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .sym-rechts { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Stift: Schaft, Spitze und die Linie, die beide trennt. */ .sym-stift { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* Schliessen: zwei Striche, genau ueber der Mitte gekreuzt. */ .sym-zu { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } /* ===== AUGE UND DURCHGESTRICHENES AUGE ====================================== Marc, 21.09.2026: «da hast du zwei verschiedene Symbole fuer ausgeblendet … es waere auch besser, das waere ein durchgestrichenes Auge und mehr als Symbol, nicht als Emoji mit komischen Farben.» GEMESSEN vorher: drei Zeichen fuer eine Sache - 👁 und 🚫 am Zeilenknopf des Editors (beides Emoji, die jedes Betriebssystem anders und BUNT zeichnet) und ein «X» im Kalenderblock. Jetzt EIN Zeichenpaar, als Maske gezeichnet: es traegt die Schriftfarbe der Stelle, an der es steht, wird im Dunkeln hell und beim Darueberfahren rot - wie jedes andere Zeichen auch. BEDEUTUNG ist die HANDLUNG, nicht der Zustand (so hat Marc es gelesen): .sym-auge offenes Auge - «Wieder einblenden» .sym-auge-zu durchgestrichenes A. - «Fuer die Klasse ausblenden», und dasselbe Zeichen markiert im Kalender eine ausgeblendete Lektion. =========================================================================== */ .sym-auge { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); } .sym-auge-zu { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }