/* ===================================================================== System B · Basis — Grundkomponenten für RSA-Werkzeuge Nutzt ausschliesslich Tokens aus tokens.css. Generalisiert aus dem Brief-Editor-Panel und der Arbeitsstand-Übersicht (Atmung, Juli 2026). Regeln: Flattersatz, keine Trennung, eine Schrift, Auszeichnung sparsam. ===================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--schrift); font-size: var(--grad-grund); line-height: var(--zeile); background: var(--paper); color: var(--ink); text-align: left; hyphens: none; } /* -- Seite: Balken oben, mittige Spalte -------------------------------- */ .balken { height: 10px; background: var(--accent); } .seite { max-width: 40rem; margin: 0 auto; padding: var(--r12) var(--r6) var(--r16); } .seite-breit { max-width: 64rem; } /* -- Kopf --------------------------------------------------------------- */ .kopf { margin-bottom: var(--r12); } /* Luft zum ersten Abschnitt (section+section greift erst danach) */ .kopf h1 { font-size: var(--grad-titel); font-weight: 400; line-height: var(--zeile-eng); text-wrap: balance; } .kopf .unterzeile { color: var(--ink-soft); margin-top: var(--r2); } .kopf .meta { font-size: var(--grad-fein); color: var(--ink-faint); margin-top: var(--r1); } /* -- Gliederung --------------------------------------------------------- */ section + section, .abschnitt + .abschnitt { margin-top: var(--r12); } .rubrik { font-size: var(--grad-fein); font-weight: 400; color: var(--ink-faint); margin-bottom: var(--r4); } p + p { margin-top: var(--r3); } .mass { max-width: var(--measure); } /* -- Zeilenmass (K10) ---------------------------------------------------- Über 75 Zeichen verliert das Auge beim Rücksprung die Zeile. Gemessen wurde das lange gar nicht, weil kein Parser den Umbruch sieht — jetzt misst es tools/zeilenmass.mjs. Der Befund: der Satz war nie das Problem, sondern alles, was daneben steht. Standzeilen, Hinweise, Fusszeilen und Bildunterschriften hatten kein Mass, liefen darum über die volle Spalte und trugen im kleinen Grad die meisten Zeichen. Sie bekommen es hier — --measure rechnet in ch und schrumpft mit dem Grad mit, hält also in jeder Grösse dieselbe Zeichenzahl. :where() hält die Spezifität bei null — das hier ist das Grundmass, jede Regel, die es aus gutem Grund aufhebt, gewinnt ohne !important. */ :where(p, li, dd, dt, blockquote, figcaption, caption, .meta, .unterzeile, .hinweis, .stand, .leise, .zart, .fein, .leer, .fusszeile, .unter) { max-width: var(--measure); } /* -- Umbruch (K19) ------------------------------------------------------ Seit dem 10. 10. 2026. Zwei Fehler waren im ganzen Haus zu sehen und von keinem Prüfer zu greifen: Titel, deren letzte Zeile ein einzelnes Wort trug, und Absätze, die mit einem Wort allein auf der Schlusszeile endeten. Der Browser kann beides selbst: balance verteilt einen Titel auf gleich lange Zeilen, pretty hält im Fliesstext die Schlusszeile über einem Wort. Gemessen wird es mit tools/zeilenmass.mjs (K19). :where() hält die Spezifität bei null, wie beim Zeilenmass; der Titel steht darum NACH dem Absatz, sonst gewinnt pretty bei p.rubrik. */ :where(p, li, dd, dt, blockquote, figcaption, caption, .meta, .unterzeile, .hinweis, .fusszeile) { text-wrap: pretty; } :where(h1, h2, h3, h4, h5, h6, .rubrik, legend, summary) { text-wrap: balance; } /* Was als Ganzes stehen muss — ein Name mit Bindestrich, eine Zahl mit Einheit —, trägt .ganz; der Umbruch fällt dann davor oder dahinter. */ .ganz { white-space: nowrap; } /* -- Verweise ----------------------------------------------------------- Bis zum 16. 8. 2026 stand hier nichts, und darum standen Verweise im ganzen Haus in Browser-Blau — in einer Leiste aus zwei Grautönen fiel das erst auf, als der Wetterdienst im Tagwerk genannt werden musste. Sie tragen jetzt den Akzent, wie im Lesepult schon länger. Die Unterstreichung bleibt. Farbe allein darf keine Auskunft sein (WCAG 1.4.1), und ein Verweis ohne Strich ist im Fliesstext genau das: eine Auskunft, die nur die Farbe trägt. Kein eigener Ton für Besuchtes — das Haus führt einen Akzent, nicht zwei. */ a { color: var(--accent); } /* -- Der Vierklang ------------------------------------------------------ Vier Stimmen, vier Ämter. Wer eine davon von Hand setzt, hat die Regel schon gebrochen: welche Stimme spricht, folgt aus der Herkunft des Textes, nicht aus dem Geschmack der Seite. .ruf ruft Wortmarke, Headline, Bandtitel (Grund) arbeitet die Archivstimme — braucht keine Klasse .feder zitiert Steiners Feder: von ihm geschriebenes Werk .beleg verbürgt Apparat, Kennung, Seite, Signatur, Prüfsumme Die Probe: eine Fundstelle in der Grundschrift verliert ihre Verbindlichkeit; ein Herausgeberwort in der Feder liest sich, als hätte Steiner es geschrieben. Beides ist ein Fehler, den man SIEHT. */ .ruf { font-family: var(--schrift-ruf); font-weight: 600; letter-spacing: -0.015em; line-height: var(--zeile-eng); } .feder { font-family: var(--schrift-feder); } .beleg { font-family: var(--schrift-beleg); font-variant-numeric: tabular-nums; } /* Fremde Schriftsysteme wählen sich selbst — die Auszeichnung steht ohnehin im Quelltext (R24), also braucht es keine zweite Angabe. Gilt auch innerhalb der Feder, die weder Griechisch noch Hebräisch hat. Altgriechisch trägt lang="grc", nicht el: :lang(el) allein liess es bis zum 10. 10. 2026 durchfallen. */ :lang(el), :lang(grc) { font-family: var(--schrift-el); } :lang(he) { font-family: var(--schrift-he); } /* -- Laut (Bestand) ----------------------------------------------------- Das Amt heisst seit dem 15. 8. 2026 «Beleg» und steht aufrecht (.beleg). Diese Klasse bleibt, solange der Bestand sie führt — 70 Stellen in 13 Dateien; Migration bei der nächsten Überarbeitung der jeweiligen Seite. */ .laut { font-family: var(--schrift-laut); font-style: italic; } /* -- Satzspiegel mit Marginalspalte (R13) --------------------------------- Generalisiert aus dem Spezimen (system-b/index.html) — bisher lebte das Grid nur dort, obwohl --note-w seit je in den Tokens steht. Die Randspalte nimmt auf, was zum Satz gehört, aber nicht in ihn: Marker, Notizen — im Archiv die Herkunft (Signatur, Standort, Fassung, Lizenz). .seite-rand gibt der Seite die Breite dafür; .block teilt sie. */ .seite-rand { max-width: calc(var(--measure) + var(--note-w) + var(--r8) + var(--r16)); } .block { display: grid; grid-template-columns: minmax(0, var(--measure)) var(--note-w); column-gap: var(--r8); align-items: start; } .block > .haupt { grid-column: 1; min-width: 0; } .apparat { grid-column: 2; font-size: var(--grad-fein); line-height: 1.5; color: var(--ink); padding-top: var(--r1); } .apparat .lbl { font-weight: 600; } /* Merkmal: Fette */ /* Unter dem Umbruch fällt die Spalte unter den Satz und wird zur Randlinie. */ @media screen and (max-width: 60rem) { .block { display: block; } .apparat { margin-top: var(--r3); padding: var(--r2) 0 0 var(--r3); border-left: 2px solid var(--rule); max-width: var(--measure); } } /* -- Abbildung ------------------------------------------------------------ Zwei Arten, eine Regel: Fotografien dürfen beschnitten werden, Werke nie. Eine Fotografie ist eine Aufnahme von etwas; ein Werk ist das Etwas. Wer ein Werk beschneidet, ändert es. Werke stehen darum vollständig auf der Tafelfläche, die in beiden Klimata dunkel bleibt. */ figure.abbildung { max-width: var(--measure); } .abbildung img { display: block; width: 100%; height: auto; } .abbildung figcaption { font-size: var(--grad-fein); color: var(--ink-soft); margin-top: var(--r2); } .abbildung.breit { max-width: none; } .abbildung.foto img { object-fit: cover; } /* Beschnitt erlaubt */ .abbildung.werk { background: var(--tafel); padding: var(--r6); } .abbildung.werk img { object-fit: contain; } /* nie beschnitten */ .abbildung.werk figcaption { color: var(--tafel-soft); padding: 0 var(--r2); } /* -- Karte ---------------------------------------------------------------- */ .karte { display: block; background: var(--paper-hoch); border: var(--linie) solid var(--rule); border-radius: var(--radius-g); padding: var(--r6); text-decoration: none; color: inherit; transition: border-color .5s ease; } a.karte:where(:hover, :focus-visible) { transition-duration: .12s; } a.karte:hover { border-color: var(--accent); } .karte h3 { font-size: var(--grad-gross); font-weight: 400; color: var(--accent); } .karte p { margin-top: var(--r2); font-size: var(--grad-klein); } .karte .meta { margin-top: var(--r3); font-size: var(--grad-fein); color: var(--ink-faint); } .karten { display: grid; gap: var(--r4); } /* -- Platzhalter (Kommendes) ---------------------------------------------- */ .leer { border: var(--linie) dashed var(--rule); border-radius: var(--radius-g); padding: var(--r6); color: var(--ink-faint); font-size: var(--grad-klein); } /* -- Knöpfe ----------------------------------------------------------------- */ .knopf { display: inline-block; padding: var(--r2) var(--r3); border: var(--linie) solid var(--rule); border-radius: var(--radius-s); background: var(--paper-hoch); color: var(--ink); font: inherit; font-size: var(--grad-fein); cursor: pointer; text-decoration: none; } .knopf:hover { border-color: var(--ink-soft); } .knopf.an, .knopf-primaer { background: var(--ink); color: var(--paper); border-color: var(--ink); } .knopf-primaer { padding: var(--r3) var(--r4); font-size: var(--grad-klein); border-radius: var(--radius-s); } .knopf-primaer:hover { border-color: var(--ink); opacity: .88; } /* -- Segment-Schalter --------------------------------------------------------- */ .seg { display: inline-flex; border: var(--linie) solid var(--rule); border-radius: var(--radius-s); overflow: hidden; } .seg button { padding: var(--r2) var(--r3); border: 0; background: var(--paper-hoch); color: var(--ink); font: inherit; font-size: var(--grad-fein); cursor: pointer; } .seg button + button { border-left: var(--linie) solid var(--rule); } .seg button.aktiv { background: var(--accent); color: var(--auf-akzent); } /* -- Die gleitende Marke (18. 9. 2026) ------------------------------------------- Ein Zeiger gleitet, statt dass zwei tauschen: Behälter mit [data-gleiter] bekommen von bewegung.js (§ 5) EIN Marken-Element, das per Transform zum aktiven Kind fährt — Lage und Mass kommen als --x/--y/--w/--h. Hier steht nur das Allgemeine (absolut, hinter dem Inhalt, Weg in 0,35 s auf der Ankunftskurve des Hauses); Farbe und Rand gibt jeder Behälter selbst. Der Segment-Schalter ist der erste: Trägt er die Marke (‹gleitet›), geben seine Knöpfe die Füllung an sie ab und wechseln nur noch die Schriftfarbe. Ohne Bewegung gibt es keine Marke, und alles steht wie zuvor. */ [data-gleiter] { position: relative; isolation: isolate; } .gleit-marke { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; width: var(--w, 0); height: var(--h, 0); transform: translate(var(--x, 0), var(--y, 0)); transition: transform .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; } .gleit-marke--still { transition: none; } .seg .gleit-marke { background: var(--accent); } .seg.gleitet button { background: transparent; transition: color .35s ease; } .seg.gleitet button.aktiv { background: transparent; } /* -- Formularzeile --------------------------------------------------------------- */ .feldzeile { display: flex; align-items: center; gap: var(--r2); } .feldzeile + .feldzeile { margin-top: var(--r2); } .feldzeile label { font-size: var(--grad-fein); color: var(--ink-soft); flex: 0 0 7rem; } .feldzeile input, .feldzeile select, .feldzeile textarea { flex: 1; min-width: 0; padding: var(--r2) var(--r2); border: var(--linie) solid var(--rule); border-radius: var(--radius-s); font: inherit; font-size: var(--grad-klein); background: var(--paper-hoch); color: var(--ink); } .feldzeile input:focus, .feldzeile textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* -- Status-Chip -------------------------------------------------------------------- */ .chip { display: inline-block; padding: 2px var(--r2); border-radius: var(--radius-s); font-size: var(--grad-fein); } .chip-ok { background: var(--ok-bg); color: var(--ok-fg); } .chip-warn { background: var(--warn-bg); color: var(--warn-fg); } .chip-info { background: var(--rule-soft); color: var(--ink-soft); } /* -- Kennzahl (Zahl + Beschriftung, tabellarische Ziffern) ---------------------------- */ .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--r3); } .kennzahl { background: var(--paper-hoch); border: var(--linie) solid var(--rule); border-radius: var(--radius); padding: var(--r3) var(--r4); } .kennzahl b { display: block; font-weight: 400; font-size: var(--grad-titel); line-height: 1.15; font-variant-numeric: tabular-nums; } .kennzahl span { font-size: var(--grad-fein); color: var(--ink-faint); } /* Eine Kennzahl, die etwas tut: als Link oder als Knopf. Beide erben vom Haus weder Schrift noch Farbe noch Ausrichtung — der Browser setzt eigene —, und ein Knopf zentriert obendrein seinen Inhalt senkrecht: In einer Reihe gleich hoher Kacheln sass seine Zahl darum tiefer als die der Nachbarn. `display:block` hilft dagegen nicht, der Browser zentriert weiter; erst ein Raster mit `align-content:start` setzt Zahl und Wort nach oben. Aus rsa/vision/ hierher gehoben (Regel 2). */ .kennzahlen a.kennzahl, .kennzahlen button.kennzahl { text-decoration: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .kennzahlen button.kennzahl { display: grid; align-content: start; } .kennzahlen a.kennzahl:hover, .kennzahlen button.kennzahl:hover { border-color: var(--accent); } /* -- Hinweis ------------------------------------------------------------------------- */ .hinweis { font-size: var(--grad-fein); color: var(--ink-faint); } /* -- Einblender (Toast) ----------------------------------------------------------------- */ /* z-index 80: über allem, auch über Blättern (60) und dem Nachtblatt (70) des Tagwerks. Bis zum 23. 8. 2026 stand hier 50 — und damit lag jede Meldung, die aus einem offenen Blatt kam, hinter diesem Blatt. Der Fehlschlag beim Abonnieren eines Kalenders wurde gemeldet und war trotzdem nie zu sehen: Was hinter dem liegt, worauf man schaut, ist keine Meldung. */ .toasts { position: fixed; right: var(--r4); bottom: var(--r4); z-index: 80; display: flex; flex-direction: column; gap: var(--r2); max-width: 20rem; } .toast { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: var(--r3) var(--r3); font-size: var(--grad-fein); line-height: 1.4; display: flex; align-items: flex-start; gap: var(--r2); box-shadow: 0 4px 16px rgba(0,0,0,.25); } .toast button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; } /* -- Tabelle -------------------------------------------------------------------------------- */ /* Eine Fläche, die scrollt, muss mit der Tastatur erreichbar sein — sonst kommt niemand an die rechte Spalte, der keine Maus führt (WCAG 2.2, von K11 gemessen). Das lässt sich nicht in CSS setzen: der Behälter trägt darum tabindex="0" und, wenn er eine Überschrift verdient, role="region" mit aria-label. */ /* Eine waagrecht scrollbare Fläche muss mit der Tastatur erreichbar sein (WCAG 2.1.1) — sonst kommt an die abgeschnittenen Spalten nur heran, wer eine Maus hat. Darum trägt jedes .tabelle-umlauf im Markup tabindex="0". Gefunden am 15. 9. 2026, und zwar durch eine andere Änderung: Der angehobene Kleinsatz auf schmalen Schirmen machte eine Tabelle breiter als ihren Kasten, und damit wurde der Kasten zum ersten Mal scrollbar. Der Mangel lag vorher schon da, nur unbemerkt — er brauchte bloss eine Tabelle, die überläuft. */ .tabelle-umlauf { overflow-x: auto; } table.tabelle { border-collapse: collapse; width: 100%; font-size: var(--grad-klein); font-variant-numeric: tabular-nums; } .tabelle th { text-align: left; font-weight: 400; color: var(--ink-faint); font-size: var(--grad-fein); padding: var(--r2) var(--r3) var(--r1) 0; border-bottom: var(--linie) solid var(--rule); } .tabelle td { padding: var(--r2) var(--r3) var(--r2) 0; border-bottom: var(--linie) solid var(--rule-soft); vertical-align: top; } /* Tabellen, deren Zellen Sätze tragen statt Zahlen (K10). Am Zellenrand ist nichts zu machen: in der automatischen Tabellenberechnung ist max-width auf td nach Spezifikation wirkungslos — gemessen wurden trotz Regel unverändert 88 Zeichen im Querformat. Also trägt die Tabelle das Mass, plus Platz für die Vorspalte, und width:100% wird dabei zur Obergrenze statt zur Vorgabe. */ .tabelle.satz { width: auto; max-width: min(100%, calc(var(--measure) + 5rem)); } /* -- Fuss ------------------------------------------------------------------------------------- */ .fusszeile { margin-top: var(--r16); font-size: var(--grad-fein); color: var(--ink-faint); } .fusszeile a { color: inherit; } /* -- Tippfläche (am Finger) --------------------------------------------------------------------- Generalisiert aus dem Mobil-Durchgang von Vision und Digitalisat (August 2026): Beispiel-Knöpfe, Jahresfilter und Kopf-Icons massen dort 30–35px. Ein Ziel am Finger misst mindestens --ziel-min; die Höhe wächst über die Innenluft, nie über den Grad. Gilt nur für grobe Zeigegeräte — am Schreibtisch bleibt der Satz kompakt. .ziel — beliebiges Ziel, wächst in der Höhe .ziel-quadrat — Icon-Ziel, wächst auch in der Breite */ @media (pointer: coarse) { .knopf, .seg button, .ziel, .ziel-quadrat { min-height: var(--ziel-min); display: inline-flex; align-items: center; justify-content: center; } .ziel-quadrat { min-width: var(--ziel-min); } } /* -- Kapsel (einzeiliges Etikett) ------------------------------------------------------------------ Siehe --radius-kapsel in tokens.css: die Pille gilt für EINE Zeile. Bricht der Text um, bleibt die Rundung stehen, statt in die zweite Zeile zu schneiden. Innenluft nach --r2/--r4, damit umbrochene Zeilen in der Fläche sitzen statt am Bogen zu kleben. */ .kapsel { display: inline-block; padding: var(--r2) var(--r4); border: var(--linie) solid var(--rule); border-radius: var(--radius-kapsel); background: var(--paper-hoch); color: var(--ink-soft); font: inherit; font-size: var(--grad-fein); text-align: left; cursor: pointer; text-decoration: none; } .kapsel:hover { border-color: var(--accent); color: var(--ink); } /* -- Formularteile sprechen die Hausschrift --------------------------------------------------------- Knopf, Feld, Auswahl und Textfeld erben die Schrift NICHT: der Browser setzt sie in seine eigene, auf dem Schreibtisch also in Arial. Wo ein Bauteil des Hauses zugriff (.knopf, .seg button, .feldzeile input …), fiel das nie auf — ein blanker