/* ============================================================ PERSONAL OS — DIE BUEHNEN. Fassung v34 (24.08.2026) Was einen ORT ausmacht: das Blatt, die Achse des Tages, das Bento der Uebersicht, die Modulkarte, die Gliederung, der Schreibtisch, die Zeitlinsen, das Log. Die BAUSTEINE, aus denen das gebaut ist, stehen in `ds.css`; hier steht nur, wie sie sich an diesem einen Ort ordnen. Die Grenze ist scharf und sie ist pruefbar: Wer hier einen Knopf, ein Feld oder eine Zeile neu definiert, hat einen Baustein gebaut, der nur an einem Ort gilt — und genau das soll es nicht geben (Kodex G3). Dann gehoert er nach `ds.css`. Bewegung steht auch hier nicht: sie steht in `motion.css`, und zwar vollstaendig. ============================================================ */ /* ============================================================ 1 · DIE DREI HOEHEN — BLATT, NOW, FOKUS, TIMELINE, OVERVIEW ============================================================ */ .blatt{gap:var(--space-8)} .blatt-kopf{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-6)} .blatt-eyebrow{color:var(--tinte-fern)} .blatt-schlagzeile{font:var(--type-blatt-xl);letter-spacing:var(--tracking-tight); margin:0;text-wrap:balance;max-width:22ch} .blatt-vorspann{font:var(--type-blatt-lede);color:var(--tinte-still);margin:0;max-width:46ch;text-wrap:pretty} .blatt-notiz{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);align-items:start; padding:var(--space-5) 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)} .blatt-notiz-marke{color:var(--tinte-fern);display:grid;place-items:center;padding-top:2px} .blatt-notiz-text{font:var(--type-blatt-notiz);color:var(--tinte-still);margin:0;max-width:46ch;text-wrap:pretty} .blatt-notiz-quelle{grid-column:2;color:var(--ocker-schrift)} .blatt-vorschau{display:flex;flex-direction:column;gap:var(--space-2)} .blatt-vorschau-text{font:var(--type-blatt-lede);color:var(--tinte-still);margin:0;max-width:46ch;text-wrap:pretty} .blatt-index{display:flex;flex-direction:column;gap:var(--space-1)} .blatt-index-titel{margin:0 0 var(--space-3)} .blatt-index-zeile{display:flex;align-items:baseline;gap:var(--space-4);width:100%; min-height:40px;padding:var(--space-2) 0;background:none;border:0;cursor:pointer; text-align:left;color:var(--tinte)} .blatt-index-zeile:hover .blatt-index-wert{color:var(--tinte)} .blatt-index-wort{font:var(--type-body);flex:none} .blatt-index-punkte{flex:1;border-bottom:1px dotted var(--linie-stark);transform:translateY(-4px)} .blatt-index-wert{font:var(--type-small);color:var(--tinte-still);flex:none;font-variant-numeric:tabular-nums} .blatt-aktionen{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-2)} .blatt-ziel{display:flex;flex-direction:column;gap:var(--space-1);margin:0} .blatt-ziel-wort{color:var(--tinte-fern)} .blatt-ziel-name{font:var(--type-title);letter-spacing:var(--tracking-tight);text-wrap:balance} .blatt-still{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center} .blatt-session{margin-top:var(--space-2)} /* ---------- Jetzt ---------- */ /* EINE MITTE, NICHT ZWEI. Der Kern stand zentriert, Augenbraue, Lage und Hinweis daneben linksbuendig — auf einer Buehne, deren ganze Aussage „genau eine Sache" ist, lasen sich zwei Achsen wie ein unfertiges Layout. Jetzt liegt alles auf derselben Mitte; nur die Morgenkarten bleiben links, weil sie ein Formular sind und kein Moment. */ .nah{gap:var(--space-6);flex:1;justify-content:center;padding-block:var(--space-6); text-align:center} .nah.ist-morgen{text-align:left} .nah.ist-morgen .nah-still{justify-content:flex-start} .nah-eyebrow{color:var(--tinte-fern)} .nah-gruss{font:var(--type-script);margin:0;letter-spacing:0} .nah-titel-gross{font:var(--type-display-l);letter-spacing:var(--tracking-display);margin:0} .nah-mitte{display:grid;place-items:center;padding:var(--space-6) 0} .nah-kern{display:flex;flex-direction:column;align-items:center;gap:var(--space-3); text-align:center;padding:var(--space-9) var(--space-7);min-width:min(100%,300px)} .nah-ampel{margin-bottom:var(--space-2)} .nah-vorschlag{color:var(--tinte-fern)} .nah-titel{font:var(--type-headline);letter-spacing:var(--tracking-tight);margin:0; text-wrap:balance;max-width:18ch} .nah-unter{font:var(--type-small);color:var(--tinte-still);margin:0} .nah-hinweis{font:var(--type-caption);color:var(--tinte-fern);margin:0} /* Der Verlauf im Block — eine Rille mit stillem Silber darin. Sie misst, was gerade laeuft, und ist die einzige Anzeige auf dieser Hoehe: Der Kern sagt WAS, der Verlauf sagt WIE WEIT. */ .nah-verlauf{display:flex;flex-direction:column;gap:var(--space-3); width:100%;margin-top:var(--space-2)} .nah-verlauf-spur{height:var(--space-3);border-radius:var(--radius-pill); background:var(--senke);box-shadow:var(--neo-ein);overflow:hidden} .nah-verlauf-fuell{display:block;height:100%;border-radius:var(--radius-pill); background:var(--akzent)} .nah-verlauf-wort{font:var(--type-small);color:var(--tinte-still);margin:0; font-variant-numeric:tabular-nums} .nah-text{font:var(--type-body);color:var(--tinte-still);margin:0;max-width:46ch;text-wrap:pretty} .nah-lage{font:var(--type-small);color:var(--tinte-fern);margin:0} .nah-aktionen{display:flex;flex-direction:column;gap:var(--space-4)} .nah-still{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:center;align-items:center} .nah-session{display:flex;justify-content:center} .morgen-karte{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start} .morgen-label{color:var(--tinte-fern)} .morgen-wert{font:var(--type-display-m);letter-spacing:var(--tracking-metric)} .morgen-fenster{font:var(--type-small);color:var(--tinte-still)} .morgen-text{font:var(--type-small);color:var(--tinte-still);margin:0;text-wrap:pretty} .morgen-aktionen{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-2)} .typreihe{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-2) 0} .typknopf{text-align:center;min-height:38px;padding:0 var(--space-5);font:var(--type-small); background:var(--flaeche);color:var(--tinte-still); border:0;border-radius:var(--radius-pill);box-shadow:var(--neo-auf);cursor:pointer} .typknopf:hover{color:var(--tinte)} .typknopf.ist-aktiv{box-shadow:var(--neo-ein);color:var(--tinte);font:var(--type-small-strong)} /* ---------- Der Fokus ---------- Der Wulst (gehoben), die Rille (gedrückt), der dünne Chrombogen — und die Blende in wandernder Chromkante drumherum. */ .fokus{align-items:center;text-align:center;gap:var(--space-5);flex:1; justify-content:center;padding-block:var(--space-5)} .fokus-eyebrow{color:var(--tinte-fern)} .fokus-mitte{display:grid;place-items:center;width:100%} .fokus-halter{position:relative} .fokus-ring{position:relative;width:min(74vw,290px);aspect-ratio:1;display:grid;place-items:center; border-radius:50%;background:var(--flaeche);box-shadow:var(--neo-auf-tief)} .fokus-ring::before{content:"";position:absolute;inset:7%;border-radius:50%; background:var(--flaeche);box-shadow:var(--neo-ein-tief)} .fokus-ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .fokus-ring-spur{fill:none;stroke:transparent;stroke-width:0} .fokus-ring-wert{fill:none;stroke:var(--akzent-glueh);stroke-width:2.2;stroke-linecap:round} .fokus-ring-ueber{fill:none;stroke:var(--moos);stroke-width:2.2;stroke-linecap:round} .fokus-zahlen{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);z-index:1} .fokus-zeit{font:var(--type-metric-xl);letter-spacing:var(--tracking-metric);margin:0} .fokus-von{font:var(--type-caption);color:var(--tinte-fern);margin:0} .fokus-ziel{display:flex;flex-direction:column;gap:var(--space-2);align-items:center; background:none;border:0;padding:var(--space-2);cursor:pointer;color:inherit;border-radius:var(--radius-sm)} .fokus-ziel:hover{background:var(--tinte-hauch)} .fokus-ziel:hover .fokus-ziel-pfeil{transform:translateX(3px)} .fokus-ziel-pfeil{color:var(--tinte-fern)} .fokus-ziel-titel{font:var(--type-title);margin:0;text-wrap:balance;max-width:22ch} .fokus-ziel-unter{font:var(--type-small);color:var(--tinte-still);margin:0} .fokus-durch{font:var(--type-small);color:var(--moos-schrift);margin:0} .fokus-aktionen{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:380px} .fokus-still{display:flex;flex-wrap:wrap;gap:var(--space-6);justify-content:center} .fokus.ist-pausiert .fokus-ring-wert{stroke:var(--tinte-fern)} /* ---------- Der Kalender ---------- HIER STAND BIS FASSUNG 24 DIE ACHSE DES TAGES — das gemeinsame Material der Timeline und der Tagesachse auf Planning. Beide sind mit dem Kalender-Umbau gefallen: eine Darstellung eines Tages statt dreier (Kodex G3). DAS RASTER IST EIN GITTER MIT EINER ZEITSPALTE. Die Höhe ist die Uhrzeit, und zwar über eine CSS-Variable (`--kal-stunde`) statt über Prozente: Die Bühne rechnet von der Zeigerhöhe auf die Uhrzeit zurück (`kalenderblick.zeitAus`), und dafür müssen beide Seiten dieselbe Einheit meinen. */ .karteseite,.kartenseite-breit{display:flex;flex-direction:column;gap:var(--space-6)} .kalenderseite{display:flex;flex-direction:column;gap:var(--space-5)} /* `flex-direction:row` AUSDRUECKLICH: `.seiten-kopf` ist eine Spalte, und ohne diese Zeile bedeutet `align-items:flex-end` dort „rechtsbuendig" statt „unten" — der Titel stand am rechten Rand. */ .kal-kopfzeile{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--space-5); align-items:flex-end;justify-content:space-between} @media (max-width:720px){.kal-kopfzeile{flex-direction:column;align-items:stretch}} .kal-kopf-links{display:flex;flex-direction:column;gap:var(--space-2);min-width:0} .kal-kopf-rechts{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center} .kal-blaettern{display:flex;gap:var(--space-2);align-items:center} /* Zwei Spalten: links, was man verplanen könnte; rechts, wohin. Unter 1100 px übereinander — dort ist das die einzige Ordnung, die es gibt, und die Vorschläge stehen dann OBEN: Man zieht nach unten, nicht nach oben. */ /* DIE GANZE FENSTERBREITE (07.09.2026, Florians zweiter Punkt). Die Bahn jeder anderen Buehne endet bei 1080 px, weil Fliesstext ab etwa 70 Zeichen je Zeile unlesbar wird. Ein Kalender ist kein Fliesstext: Er hat so viele Spalten, wie die Ansicht Tage zeigt, und in der Wochensicht blieben davon je Tag rund 110 px — genug fuer die Uhrzeit und das erste Wort. Die zweite Haelfte der Regel steht in `ds.css` bei `body.ist-kalender .saeule`; beide Zahlen muessen dieselbe sein, sonst fluchtet der Pfad in der Kopfleiste nicht mehr mit dem Inhalt. */ body.ist-kalender .buehne { max-width: 1760px; } /* DER GEWONNENE PLATZ GEHT AN DAS RASTER, nicht an die Vorschlaege. Die linke Spalte traegt Zeilen mit einem Titel — sie wird von 400 px nicht besser. Deshalb bleibt sie bei ihrem `minmax`, und `1fr` nimmt den Rest. */ /* DREI SPALTEN, UND DIE MITTLERE IST DER GRIFF (07.09.2026). Hier stand `minmax(240px,300px)` — fest, und zu schmal fuer die Reiterleiste. Jetzt entscheidet `--kal-spalte`, was `buehnen/kalender/ index.js` aus `app.filter.kalenderSpalte` setzt; die Grenzen (280 bis 640 px) stehen dort und werden dort erzwungen, damit es EINE Stelle gibt, an der sie geprueft werden koennen (Kodex G3). */ .kal-zwei{display:grid; grid-template-columns:var(--kal-spalte,320px) var(--space-4) minmax(0,1fr); gap:0;align-items:start} /* Unter 1100 px liegt alles untereinander, und dann gibt es nichts zu verteilen — der Griff verschwindet ganz, statt als Strich dazustehen. */ @media (max-width:1100px){ .kal-zwei{grid-template-columns:1fr;gap:var(--gap-grid)} .kal-teiler{display:none} } .kalender-vorschlaege{display:flex;flex-direction:column;gap:var(--space-4);min-width:0} /* DIE SPALTE ROLLT FUER SICH (07.09.2026), und zwar auf derselben Hoehe wie das Raster daneben (`68dvh`, siehe `.kal-raster`): Sonst rollte bei einer langen Liste die ganze Seite, und das Raster wanderte mit aus dem Bild. Nur die Liste rollt — Suchfeld und Reiter bleiben oben stehen. Unter 1100 px liegt alles untereinander, dort rollt weiter die Seite. */ @media (min-width:1101px){ .kalender-vorschlaege{max-height:68dvh} .kalender-vorschlaege>.platte.liste{min-height:0;overflow-y:auto;overscroll-behavior:contain} } .kal-flaechenteil{min-width:0} /* ---------- Der Teiler ---------- Sichtbar ist eine Haarlinie, greifbar sind sechzehn Pixel: Die FLAECHE ist fuer den Zeiger, die Linie fuer das Auge (Kodex Z2). */ .kal-teiler{position:relative;align-self:stretch;min-height:120px; cursor:col-resize;touch-action:none} .kal-teiler::after{content:"";position:absolute;top:0;bottom:0;left:50%; translate:-50% 0;width:1px;background:var(--linie)} .kal-teiler:hover::after,.kal-teiler:focus-visible::after{ width:2px;background:var(--akzent)} .kal-teiler:focus-visible{outline:none} /* ---------- Die Werkzeugzeile der Vorschlagsspalte ---------- Suchfeld und der Schalter „alle" in einer Reihe. Das Feld nimmt, was uebrig ist; der Schalter bleibt lesbar. */ .vorschlag-werkzeug{display:flex;gap:var(--space-3);align-items:center} .vorschlag-werkzeug .suchfeld{flex:1;min-width:0} /* DIE REITERLEISTE ROLLT, STATT ZU QUETSCHEN. Fuenf Reiter mit ihren Zahlen sind rund 500 px breit; die Spalte faengt bei 280 an. `.segment` steht sonst auf `flex:1 1 auto` und schrumpft — dann kleben „Aufgaben 1Projekte 2" aneinander, und genau das war der Befund vom 07.09.2026: „dass der Text nicht in die Elemente passt". Also `flex:none` und waagerechtes Rollen. Das ist dieselbe Entscheidung, die `.segmente-rollbar` fuer lange Formularschienen schon trifft — hier ueber die Buehne statt ueber eine Klasse, weil `segmente()` keine durchreicht. */ .kalender-vorschlaege .segmente{ max-width:100%;overflow-x:auto;scrollbar-width:none} .kalender-vorschlaege .segmente::-webkit-scrollbar{display:none} .kalender-vorschlaege .segment{flex:none} /* ---------- Das Hinweisband ---------- LEISE UND NICHT WARNEND. „Nicht geschafft" ist keine Störung; ein rotes Band darüber wäre eine Bewertung, und die war ausdrücklich nicht gewollt. */ .kal-band{display:flex;flex-direction:column; background:var(--flaeche);border-radius:var(--radius-md);box-shadow:var(--neo-auf); overflow:hidden} .kal-bandzeile{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4); padding:var(--space-4) var(--gutter-card); background:none;border:0;cursor:pointer;color:var(--tinte); font:var(--type-small);text-align:left} .kal-bandzeile:hover{background:var(--tinte-hauch)} .kal-bandliste{display:flex;flex-direction:column;border-top:1px solid var(--linie)} .kal-bandposten{display:flex;flex-wrap:wrap;gap:var(--space-4); align-items:center;justify-content:space-between; padding:var(--space-4) var(--gutter-card)} .kal-bandposten+.kal-bandposten{border-top:1px solid var(--linie)} .kal-bandtext{display:flex;flex-direction:column;gap:1px;min-width:0} .kal-bandknoepfe{display:flex;gap:var(--space-2);flex-wrap:wrap} /* ---------- Das Zeitraster ---------- */ .kal-raster{display:flex;flex-direction:column; background:var(--flaeche);border-radius:var(--radius-md);box-shadow:var(--neo-auf); overflow:hidden;--kal-achse:46px; /* Wie hoch die Kopfzeile ist. Sie steht hier, weil das Ganztagsband darunter klebt und die Zahl dafuer kennen muss — gemessen werden kann sie in CSS nicht, und zwei Stellen mit derselben Zahl waeren eine zu viel (G3). Wer die Polsterung von `.kal-tagkopf` aendert, aendert sie hier mit. */ --kal-kopf-h:42px} /* DAS RASTER ROLLT, SEIT ES DEN GANZEN TAG TRAEGT (07.09.2026). Vierundzwanzig Stunden zu 52 px sind 1248 px — mehr, als ein Fenster hoch ist. Ein Raster, das stattdessen die Stunden staucht, macht aus einem Dreissigminutenblock einen Strich; ein Raster, das die Nacht weglaesst, war der Befund. Also rollt es, wie jeder Kalender. `68dvh` und nicht `100%`: Darueber stehen Kopf, Tagesdaten, Taktzeile und manchmal das Hinweisband — das Raster soll die Seite nicht so lang machen, dass man zweimal rollt, einmal in ihm und einmal daneben. */ .kal-raster{max-height:68dvh;overflow-y:auto;overscroll-behavior:contain} /* KOPF UND GANZTAGSBAND BLEIBEN STEHEN. Wer zum Abend rollt, muss weiter sehen, welcher Tag welcher ist — sonst zaehlt man Spalten. */ .kal-kopf,.kal-ganztags{position:sticky;z-index:2;background:var(--flaeche)} .kal-kopf{top:0} .kal-ganztags{top:var(--kal-kopf-h,42px)} .kal-kopf,.kal-ganztags{display:grid; grid-template-columns:var(--kal-achse) repeat(var(--kal-spalten),1fr)} .kal-kopf{border-bottom:1px solid var(--linie)} .kal-tagkopf{display:flex;flex-direction:column;align-items:center;gap:1px; padding:var(--space-3) var(--space-2);border-left:1px solid var(--linie)} .kal-wochentag{font:var(--type-label);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--tinte-fern)} .kal-tagzahl{font:var(--type-subtitle);font-variant-numeric:tabular-nums} .kal-tagkopf.ist-heute .kal-tagzahl{color:var(--akzent-schrift)} .kal-tagkopf.ist-vergangen{opacity:.6} .kal-ganztags{border-bottom:1px solid var(--linie);min-height:26px} .kal-ganztagszelle{display:flex;flex-direction:column;gap:2px; padding:var(--space-2);border-left:1px solid var(--linie);min-width:0} .kal-ganztag{font:var(--type-caption);padding:1px var(--space-2); border-radius:var(--radius-xs);background:var(--tinte-hauch); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kal-flaeche{display:grid;grid-template-columns:var(--kal-achse) repeat(var(--kal-spalten),1fr); height:var(--kal-hoehe);position:relative} .kal-achse{display:flex;flex-direction:column} .kal-stunde{height:var(--kal-stunde);position:relative} .kal-stunde span{position:absolute;top:-.55em;right:var(--space-3); font:var(--type-caption);font-variant-numeric:tabular-nums;color:var(--tinte-fern)} .kal-ecke{border-right:0} .kal-spalte{position:relative;border-left:1px solid var(--linie);min-width:0} .kal-spalte.ist-heute{background:color-mix(in srgb,var(--akzent) 4%,transparent)} /* Ein vergangener Tag ist LESBAR und nimmt nur nichts mehr an. Ihn auszugrauen hieße, dass man den Strich nicht mehr liest — und der ist der Sinn der Sache. */ .kal-spalte.ist-vergangen{background:var(--tinte-hauch)} .kal-spalte.ist-ziel{background:color-mix(in srgb,var(--akzent) 10%,transparent)} .kal-linie{height:var(--kal-stunde);border-top:1px solid var(--linie)} .kal-linie:first-child{border-top:0} /* „Jetzt" ist ein Zeitpunkt, keine Fläche. */ /* ---------- Die Vorschau beim Ziehen ---------- Ein Umriss auf der Zielhoehe mit der Uhrzeit darin. Er ist die Antwort auf „man zieht auf den Tag, nicht auf die Uhrzeit": Gerechnet wurde immer richtig, sichtbar war es nie. */ .kal-vorschau{position:absolute;left:2px;right:2px;z-index:3; display:flex;align-items:flex-start;padding:2px var(--space-2); border:1px dashed var(--akzent);border-radius:var(--radius-xs); background:color-mix(in srgb,var(--akzent) 12%,transparent); font:var(--type-caption);color:var(--akzent-schrift); font-variant-numeric:tabular-nums;pointer-events:none; overflow:hidden;white-space:nowrap} .kal-jetzt{position:absolute;left:0;right:0;height:2px;background:var(--glut); z-index:2;pointer-events:none} .kal-stueck{position:absolute;display:flex;flex-direction:column;gap:0; padding:2px var(--space-2);overflow:hidden; border-radius:var(--radius-xs);font:var(--type-caption); box-sizing:border-box} .kal-zeit{font-variant-numeric:tabular-nums;color:inherit;opacity:.75} .kal-titel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kal-ort{opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* TERMIN GEGEN BLOCK — Material statt Farbe. Ein Termin ist FLACH und fremdbestimmt (nur die Kante trägt Farbe), ein Block ERHABEN und anfassbar. Dieselbe Sprache, die vorher die Achse gesprochen hat. */ .kal-stueck.ist-termin{background:var(--tinte-hauch); border-left:3px solid var(--tinte-fern);color:var(--tinte-still)} .kal-stueck.ist-block{background:var(--flaeche);box-shadow:var(--neo-auf); border-left:3px solid var(--akzent);cursor:pointer} .kal-stueck.ist-block:hover{background:var(--tinte-hauch)} /* DER STARTKNOPF liegt in der Ecke und erscheint beim Zeigen — ein Kasten von 30 Minuten hat keinen Platz fuer ihn UND den Titel. Am Finger gibt es kein Zeigen, dort steht er immer da: `hover: none` ist die einzige ehrliche Abfrage dafuer. */ .kal-griff{position:absolute;right:2px;bottom:2px;opacity:0} .kal-stueck:hover .kal-griff,.kal-griff:focus-within{opacity:1} @media (hover:none){.kal-griff{opacity:1}} /* ---------- Der Anfasser an der Unterkante ---------- Acht Pixel hoch und ueber die ganze Breite: Die FLAECHE ist fuer den Finger, sichtbar ist nur ein Strich. Er zeigt sich beim Ueberfahren und beim Tastaturfokus — dauerhaft waere er ein Strich zuviel in jedem Kasten, und sichtbar sein muss er nur, wenn jemand ihn sucht. Am Touchgeraet gibt es kein Ueberfahren, also steht er dort immer. */ .kal-laenge{position:absolute;left:0;right:0;bottom:0;height:10px; border:0;padding:0;background:transparent;cursor:ns-resize; opacity:0} .kal-laenge::after{content:"";position:absolute;left:50%;translate:-50% 0; bottom:2px;width:24px;height:2px;border-radius:1px;background:var(--tinte-fern)} .kal-stueck:hover .kal-laenge,.kal-laenge:focus-visible{opacity:1} @media (hover:none){.kal-laenge{opacity:1}} /* Ein Kasten unter 24 px traegt keinen Anfasser mehr, ohne seinen eigenen Inhalt zu verdecken. `min-height` am Stueck sorgt dafuer, dass es den Fall nicht gibt: Die Mindesthoehe von 20 Minuten steht in `kalenderblick.js`, und darunter kommt kein Stueck her. */ /* ---------- Was sich antippen laesst, sagt es ---------- */ .kal-stueck.ist-termin,.kal-ganztag.ist-termin,.kal-agendaposten.ist-antippbar{ cursor:pointer} .kal-agendaposten.ist-antippbar:hover,.kal-ganztag.ist-termin:hover{ background:var(--tinte-hauch)} /* ---------- Die Taktzeile: wann die Termine zuletzt kamen ---------- */ .kal-takt{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap; font:var(--type-small);color:var(--tinte-still)} /* ---------- Die Auskunft zu einem Termin ---------- */ .termin-daten{display:grid;grid-template-columns:max-content minmax(0,1fr); gap:var(--space-2) var(--space-5);margin:0} .termin-daten dt{font:var(--type-label);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--tinte-fern)} .termin-daten dd{margin:0;font:var(--type-body);color:var(--tinte); overflow-wrap:anywhere} /* Die Gaeste: Name links, Antwort rechts. Ohne die Reihe klebte „Prof. Dr. WeberZUGESAGT" aneinander — zwei Angaben, die wie eine aussehen. */ .termin-gaeste{list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:var(--space-2)} .termin-gaeste li{display:flex;align-items:baseline;gap:var(--space-4); justify-content:space-between} .termin-gast-name{min-width:0;overflow-wrap:anywhere} /* DIE ABSAETZE DER BESCHREIBUNG BLEIBEN ABSAETZE. Google liefert HTML; das Sheet macht daraus Text mit Zeilenumbruechen (`ohneMarkup`), und ohne diese Zeile stuende alles in einer Wurst. */ .termin-text{white-space:pre-line} /* ---------- Die Striche ---------- NICHT ZU OFFENSIV. Planung darf einen Fehler enthalten, und ein rot durchgestrichener Block wäre eine Anklage. Was nicht geschafft wurde, ist leiser und durchgestrichen; was verworfen wurde, noch leiser und ohne Kante — es soll dastehen, nicht rufen. */ .kal-stueck.ist-geschafft{border-left-color:var(--moos);opacity:.8} .kal-stueck.ist-geschafft .kal-titel{text-decoration:none} .kal-stueck.ist-nicht_geschafft{opacity:.62;border-left-color:var(--tinte-fern)} .kal-stueck.ist-nicht_geschafft .kal-titel{text-decoration:line-through} .kal-stueck.ist-verworfen{opacity:.42;border-left-color:transparent;box-shadow:none} .kal-stueck.ist-verworfen .kal-titel{text-decoration:line-through} /* Dieselben vier Zustände an der Postenzeile (`ds/zeilen.js`) — sie steht im Tag-Detail und in der Suche. */ .zeile.wirkung-geschafft .zeile-titel{color:var(--tinte-still)} .zeile.wirkung-nicht_geschafft{opacity:.7} .zeile.wirkung-nicht_geschafft .zeile-titel{text-decoration:line-through} .zeile.wirkung-verworfen{opacity:.5} .zeile.wirkung-verworfen .zeile-titel{text-decoration:line-through} .zeile.ist-gestrichen .zeile-titel{text-decoration:line-through;opacity:.75} /* ---------- Monat und Agenda ---------- */ .kal-monat{display:flex;flex-direction:column; background:var(--flaeche);border-radius:var(--radius-md);box-shadow:var(--neo-auf); overflow:hidden} .kal-monatkopf{display:grid;grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--linie)} .kal-monatkopf .kal-wochentag{padding:var(--space-3);text-align:center} .kal-monatgitter{display:grid;grid-template-columns:repeat(7,1fr)} .kal-monatzelle{display:flex;flex-direction:column;gap:2px;min-height:92px; padding:var(--space-2);border-top:1px solid var(--linie);border-left:1px solid var(--linie); cursor:pointer;min-width:0} .kal-monatzelle:hover{background:var(--tinte-hauch)} .kal-monatzelle.ist-fremd{opacity:.45} .kal-monatzelle.ist-heute{background:color-mix(in srgb,var(--akzent) 6%,transparent)} .kal-monatposten{display:flex;gap:var(--space-2);font:var(--type-caption); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kal-monatposten.ist-nicht_geschafft,.kal-monatposten.ist-verworfen{ text-decoration:line-through;opacity:.6} .kal-agenda{display:flex;flex-direction:column;gap:var(--space-5)} .kal-agendatag{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--space-4)} .kal-agendadatum{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .kal-agendaliste{display:flex;flex-direction:column;gap:var(--space-2);min-width:0} .kal-agendaposten{display:flex;gap:var(--space-4);align-items:baseline; padding:var(--space-3) var(--gutter-card); background:var(--flaeche);border-radius:var(--radius-sm);box-shadow:var(--neo-auf); font:var(--type-small)} .kal-agendaposten.ist-termin{box-shadow:none;background:var(--tinte-hauch)} .kal-agendaposten.ist-nicht_geschafft,.kal-agendaposten.ist-verworfen{ text-decoration:line-through;opacity:.6} .kal-agendatag.ist-heute .kal-tagzahl{color:var(--akzent-schrift)} /* Am Handy trägt das Raster keine sieben Spalten. Die Woche wird scrollbar statt unlesbar — sieben Spalten auf 360 px sind 44 px je Tag, und darin steht kein Titel. */ @media (max-width:720px){ .kal-raster{overflow-x:auto} .kal-kopf,.kal-ganztags,.kal-flaeche{min-width:640px} .kal-monatzelle{min-height:64px} .kal-agendatag{grid-template-columns:52px minmax(0,1fr)} } /* ---------- Die Karte: das Bento ---------- Asymmetrie ist die Aussage — was heute mehr zählt, ist größer. */ .karte-kopf{display:flex;flex-direction:column;gap:var(--space-2)} .karte-titel{font:var(--type-display-m);letter-spacing:var(--tracking-display);margin:0} .karte-unter{font:var(--type-small);color:var(--tinte-still);margin:0} .kacheln{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:var(--gap-grid)} .kachel-karte{position:relative;display:flex;flex-direction:column;gap:var(--space-2); min-height:104px;padding:var(--space-5) var(--space-6);text-align:left;cursor:pointer; background:var(--flaeche);border:0;border-radius:var(--radius-lg);color:var(--tinte); box-shadow:var(--neo-auf)} .kachel-karte:hover{box-shadow:var(--neo-auf-tief)} .kachel-karte:active{box-shadow:var(--neo-ein)} .kachel-karte.ist-gross{grid-column:span 2;min-height:126px} .kachel-karte.ist-eng{box-shadow:var(--neo-auf),inset 0 0 16px var(--glut-hauch)} .kachel-name{font:var(--type-label);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--tinte-fern)} .kachel-karte .kachel-wert{font:var(--type-display-m);letter-spacing:var(--tracking-metric); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kachel-wert.ist-lang{font:var(--type-metric)} .kachel-karte.ist-eng .kachel-wert{color:var(--glut-schrift)} .kachel-karte .kachel-unten{font:var(--type-caption);color:var(--tinte-fern);text-wrap:pretty;order:2} .kachel-puls{position:absolute;top:var(--space-5);right:var(--space-6); width:7px;height:7px;border-radius:50%;background:var(--glut-glueh); box-shadow:0 0 8px color-mix(in srgb,var(--glut-glueh) 60%,transparent)} .kachel-mehr{font:var(--type-caption);color:var(--tinte-fern);margin:var(--space-1) 0 0} .karte-fuss{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center; padding-top:var(--space-5);border-top:1px solid var(--linie)} .kachel-reihen{display:flex;flex-direction:column;gap:var(--space-3); margin:var(--space-3) 0 var(--space-1);order:1} .kachel-reihe{display:flex;align-items:center;gap:var(--space-4);font:var(--type-caption)} .kr-name{width:52px;flex:none;color:var(--tinte-still);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .kr-spur{flex:1;height:5px;border-radius:3px;background:var(--senke);box-shadow:var(--neo-ein);overflow:hidden} .kr-fuell{display:block;height:100%;border-radius:3px;background:var(--moos)} .kr-fuell.ist-eng{background:var(--ocker)} .kr-wert{flex:none;color:var(--tinte-fern);font-variant-numeric:tabular-nums; min-width:36px;text-align:right} .kachel-duell{display:flex;gap:2px;height:6px;margin:var(--space-3) 0 var(--space-1); border-radius:3px;overflow:hidden;order:1} .kd-fokus{display:block;background:var(--moos);border-radius:3px 0 0 3px} /* Ocker und nicht Glut — dieselbe Regel wie im grossen Duell darunter: Ablenkung ist die Messung, nicht die Warnung. Die Warnung dieser Kachel ist `.ist-eng` (Ablenkung ueber dem Doppelten des Fokus), und sie faerbt die ZAHL, nicht diesen Streifen. */ .kd-ablenkung{display:block;background:var(--ocker);border-radius:0 3px 3px 0} /* HIER STAND DIE WERKBANK-HUELLE — `body.ist-raum`, `.raum`, `.raum-inhalt`. Sie trug den eigenen Grund des Maschinenraums und zwei ineinandergeschachtelte Kaesten mit widersprechenden Abstaenden (space-6 hier, space-7 in ds.css). Es gibt nur noch einen Grund und nur noch eine Seitenhuelle: `.seite` (Kodex G3). */ /* HIER STAND `.zurueck` — der klebende Rueckweg jeder Detailseite. Er konnte genau eine Ebene und nichts zur Seite; die Pfadleiste kann beides und sagt dabei, wo man ist. Zwei Rueckwege waeren einer zu viel (Kodex G3). */ /* ---------- Die Tagesdaten ---------- Vier Werte in einer Zeile statt vier Kacheln — Fokus, Rahmen, Schlaf, Bildschirm gehen an, man sieht sie nicht an: keine Mulde, kein Schatten. Eine Abweichung faerbt NUR die Zahl, nie die Flaeche. */ .tagesdaten{display:flex;align-items:baseline;gap:var(--space-6); padding:var(--space-4) 0;border-bottom:1px solid var(--linie)} .tagesdaten-paar{display:inline-flex;align-items:baseline;gap:var(--space-2); background:none;border:0;padding:0;cursor:pointer;color:inherit} .tagesdaten-paar:hover .tagesdaten-name{color:var(--tinte-still)} .tagesdaten-wert{font:var(--type-metric-sm);font-variant-numeric:tabular-nums;color:var(--tinte)} .tagesdaten-name{font:var(--type-label);letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--tinte-fern)} .tagesdaten-trenn{color:var(--tinte-fern)} @media (max-width:480px){ .tagesdaten{flex-wrap:wrap;gap:var(--space-5)} } /* ---------- Das Log ---------- */ .log-liste{display:flex;flex-direction:column; border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-md);overflow:hidden} .log-zeile{ display:grid;grid-template-columns:46px 1fr auto;gap:var(--space-4); align-items:baseline; padding:var(--space-4) var(--gutter-card); background:var(--flaeche); font:var(--type-small); } .log-zeile+.log-zeile,.log-zeile+.log-meldung{border-top:1px solid var(--linie)} .log-zeit{color:var(--tinte-fern);font-variant-numeric:tabular-nums} .log-mitte{display:flex;flex-direction:column;gap:1px;min-width:0} .log-typ{font:var(--type-body-strong);word-break:break-word} .log-gegenstand{font:var(--type-caption);color:var(--tinte-fern);word-break:break-word} .log-stand{ font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase; padding:3px var(--space-3);border-radius:var(--radius-pill); border:0;box-shadow:var(--neo-auf);color:var(--tinte-still);white-space:nowrap; } .log-zeile.ist-gebucht .log-stand{color:var(--moos-schrift);border-color:color-mix(in srgb,var(--moos) 45%,transparent)} .log-zeile.ist-abgelehnt .log-stand{color:var(--glut-schrift);border-color:color-mix(in srgb,var(--glut) 50%,transparent)} .log-zeile.ist-wartet .log-stand{color:var(--ocker-schrift);border-color:color-mix(in srgb,var(--ocker) 45%,transparent)} .log-meldung{margin:0;padding:0 var(--gutter-card) var(--space-4);background:var(--flaeche); font:var(--type-caption);color:var(--glut-schrift)} .log-zubringer{display:flex;flex-direction:column; border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-md);overflow:hidden} .log-zubringer-zeile{ display:flex;align-items:center;gap:var(--space-4); padding:var(--space-5) var(--gutter-card);background:var(--flaeche); } .log-zubringer-zeile+.log-zubringer-zeile{border-top:1px solid var(--linie)} .lz-name{font:var(--type-body-strong);width:66px;flex:none} .lz-mitte{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .lz-wann{font:var(--type-small);color:var(--tinte-still);text-wrap:pretty} .lz-meldung{font:var(--type-caption);color:var(--glut-schrift)} .lz-zusatz{font:var(--type-caption);color:var(--tinte-fern)} .lz-marke{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase; color:var(--tinte-fern);flex:none} .log-zubringer-zeile.ist-fehler .lz-marke{color:var(--glut-schrift)} /* ---------- Google Kalender (Fassung 24) ---------- Eine Platte, eine Zeile je Kalender — dieselbe Bauart wie die Zubringer darunter, weil es dieselbe Sorte Auskunft ist: ein Ding, sein Stand, seine Entscheidung. Der Farbpunkt ist Googles Kalenderfarbe und die einzige Stelle, an der eine fremde Farbe in dieses Design darf: Sie ist die Wiedererkennung aus dem Google-Kalender selbst. */ .google-block{display:flex;flex-direction:column;gap:var(--space-4)} .google-konto{display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap} .google-adresse{font:var(--type-body-strong)} .google-knoepfe{display:flex;gap:var(--space-3);flex-wrap:wrap} .lm-hinweis{font:var(--type-caption);color:var(--tinte-fern);text-wrap:pretty} .lm-warnung{margin:0;font:var(--type-caption);color:var(--ocker-schrift);text-wrap:pretty} .google-kalender{display:flex;flex-direction:column; border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-md);overflow:hidden} .google-kalender-zeile{ display:flex;align-items:center;gap:var(--space-4); padding:var(--space-4) var(--gutter-card);background:var(--flaeche); } /* DIE TRENNLINIE HAENGT AM NACHBARN, nicht an der Zeile — und der Nachbar ist seit dem Titelfilter (07.09.2026) mal eine Zeile, mal ein `.gk-block` aus Zeile und Filter. Stuende hier weiter nur `.zeile+.zeile`, verschwaende die Linie genau an den Kalendern, die etwas buchen. */ .google-kalender-zeile+.google-kalender-zeile, .google-kalender-zeile+.gk-block, .gk-block+.google-kalender-zeile, .gk-block+.gk-block{border-top:1px solid var(--linie)} /* Ein abgewaehlter Kalender bleibt LESBAR und wird nur leiser. Ausgrauen bis zur Unlesbarkeit hiesse, dass man ihn zum Wiedereinschalten erst suchen muss. */ .google-kalender-zeile.ist-aus{opacity:.62} .gk-punkt{width:10px;height:10px;border-radius:50%;flex:none; background:var(--tinte-fern)} .gk-mitte{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0} .gk-name{font:var(--type-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .google-kalender-zeile .auswahl-knopf{min-width:9.5rem} /* Der Titelfilter steht UNTER seiner Zeile und nicht daneben: In der Zeile sitzen schon Name, Wahl und Schalter, und ein viertes Feld dazwischen liesse fuer den Namen nichts uebrig. Eingerueckt bis unter den Namen — damit man sieht, zu welchem Kalender er gehoert. */ .gk-filter{ display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap; padding:0 var(--gutter-card) var(--space-4); padding-left:calc(var(--gutter-card) + 10px + var(--space-4)); background:var(--flaeche); } .gk-filter .feld{flex:1;min-width:12rem} /* Ein Filter, der nichts trifft, ist kein Fehler — aber auch nichts, was man uebersehen soll. Deshalb dieselbe Farbe wie jede andere Warnung, und kein Rot: Es ist ein Hinweis, keine gescheiterte Handlung. */ .gk-filter .ist-warnung{color:var(--ocker-schrift)} /* Unter 520 px bricht die Zeile um: Name oben, Wahl darunter. Nebeneinander blieben fuer den Namen sonst zwoelf Zeichen. */ @media (max-width:520px){ .google-kalender-zeile{flex-wrap:wrap} .gk-mitte{flex-basis:100%;order:1} .gk-punkt{order:0} .google-kalender-zeile .auswahl-knopf{order:2;flex:1} /* Die Einrueckung faellt: Auf einem Handy ist der Platz die knappere Auskunft als die Zugehoerigkeit, und die Zeile darueber steht ohnehin direkt daran. */ .gk-filter{padding-left:var(--gutter-card)} } /* EINE PLATTE MIT FUENF ZELLEN, nicht fuenf Platten. Sie trugen je `--neo-auf` und behaupteten damit fuenf Ebenen nebeneinander, wo eine ist — was mit dem staerkeren Relief vom 26.08.2026 sofort auffiel. Getrennt wird jetzt durch eine Haarlinie. */ .log-fassungen{ display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); background:var(--flaeche); border-radius:var(--radius-md);box-shadow:var(--neo-auf); overflow:hidden; } .log-fassung{display:flex;flex-direction:column;gap:2px; padding:var(--space-4) var(--space-5); border-left:var(--hairline)} .log-fassung:first-child{border-left:0} .log-fassung .lm-num{font:var(--type-subtitle);font-variant-numeric:tabular-nums} /* ---------- Einstellungen: zwei Spalten am Laptop ---------- Links, was man aendert; rechts, was das System meldet. Unter 1100 px faellt es in eine Spalte zurueck — dort ist Uebereinander die einzige Ordnung, die es gibt. */ .einstellungenseite{display:flex;flex-direction:column;gap:var(--space-6)} .einstellungenseite .seiten-kopf{grid-column:1 / -1} .einstellungenseite .spalte-wahl, .einstellungenseite .spalte-bericht{ display:flex;flex-direction:column;gap:var(--space-4);min-width:0; } @media (min-width:1100px){ .einstellungenseite{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:var(--space-9) var(--space-10); align-items:start; } } .fassung-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5); padding:var(--space-3) 0;border-bottom:1px solid var(--linie)} /* ============================================================ 3 · DAS INNENLEBEN — MODULE, THEMEN, GLIEDERUNG, SCHREIBTISCH ============================================================ */ /* DER SEITENKOPF STEHT IN ds.css. Hier lag er ein zweites Mal, Wort fuer Wort — beim Aufteilen von app.css mitgekommen. Zwei Orte fuer eine Sache sind einer zu viel (Kodex G3). */ /* Die Zahlen zur Woche ueber der Reflexion: bis zu fuenf Kacheln, die sich den Platz teilen statt in einer Reihe zu stehen, die nicht umbricht. DIE SPALTENZAHL KOMMT AUS DER ANZAHL, nicht aus einer Mindestbreite. `repeat(auto-fit,minmax(132px,1fr))` stellte in der 580 px breiten Werkspalte vier Kacheln nebeneinander und liess die fuenfte allein in einer zweiten Reihe stehen. `js/buehnen/zeit/reflexion.js` weiss, wie viele es sind, und setzt `--zahlen-spalten`; der Vorgabewert 2 gilt nur, falls die Zeile ohne diese Angabe gebaut wuerde. */ .reflexions-zahlen{display:grid;gap:var(--gap-grid); grid-template-columns:repeat(var(--zahlen-spalten,2),minmax(0,1fr))} /* Auf schmalen Schirmen waeren fuenf Spalten je 60 px breit — dort gewinnt die Lesbarkeit gegen die Symmetrie. Bei ungerader Anzahl nimmt die letzte Kachel beide Spalten, statt allein in einer halben Zeile zu stehen: Auch hier soll kein Waisenkind entstehen. */ @media (max-width:720px){ .reflexions-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))} .reflexions-zahlen>:last-child:nth-child(odd){grid-column:span 2} } /* ---------- Die Modulkarte ---------- DREI BÄNDER, nicht ein Stapel. Vorher standen bis zu sieben Zeilen ähnlicher Größe untereinander — jede für sich richtig, zusammen ein Absatz ohne Anfang. Jetzt: WER (Kürzel, Name), WANN (Countdown und Prüfungsform in EINER Zeile), WIE WEIT (Maß, Balken, Zählzeile), getrennt durch Haarlinien. Und darunter, falls nötig, genau eine Befundzeile. Die Haarlinien sind die eigentliche Arbeit: Sie sagen, wo eine Aussage aufhört. Ohne sie hilft auch die beste Reihenfolge nicht. */ .modulgruppen{display:flex;flex-direction:column;gap:var(--space-9)} /* ---------- Die zwei anderen Segmente ---------- Keine Reiterschiene: zwei Zeilen, die eine Zahl tragen und einen Weg. Sie stehen ueber der Modulliste, weil sie zur Frage gehoeren, mit der man kommt („was gibt es hier ueberhaupt"), und nicht zur Arbeit darunter. Am Laptop nebeneinander, am Handy untereinander — zwei Zeilen quer ueber 1.080 px waeren zwei sehr leere Zeilen. */ .studium-einstiege{display:grid;gap:var(--space-4);margin-bottom:var(--space-7)} @media (min-width:900px){ .studium-einstiege{grid-template-columns:1fr 1fr} } .studium-einstieg{ display:flex;align-items:center;gap:var(--space-4); min-height:var(--griff);padding:var(--space-4) var(--space-5); background:var(--flaeche);color:var(--tinte);text-align:left;cursor:pointer; border:0;border-radius:var(--radius-sm);box-shadow:var(--neo-auf); font:var(--type-body)} .studium-einstieg:active{box-shadow:var(--neo-ein)} .studium-einstieg-wort{font:var(--type-body-strong);flex:none} .studium-einstieg-zahl{color:var(--tinte-fern);font:var(--type-caption); flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .studium-einstieg-pfeil{color:var(--tinte-fern);flex:none} /* ZWEI KARTEN NEBENEINANDER, SOBALD ES DEN PLATZ GIBT. Untereinander gestapelt war jede Modulkarte 1.080 px breit für einen Inhalt, der auf 400 passt: Der Countdown stand links, und rechts lag ein halber Bildschirm Nichts. Als Raster füllt sich die Fläche, und die Reihenfolge (nächster Termin zuerst) bleibt lesbar. Die Heldenkarte nimmt trotzdem die ganze Zeile: Sie ist die nächste Prüfung, sie trägt Wörterbalken, Stufenbalken und Befund — und der Grössenunterschied IST die Führung. Zwei gleich grosse Karten sind eine Frage, eine grosse und eine kleine sind eine Antwort. */ .kartenliste{ display:grid;gap:var(--space-5); /* `min(380px,100%)` und nicht `380px`: Als feste Untergrenze konnte die Spur am Handy nicht mehr schrumpfen — die Seite bekam einen waagerechten Bildlauf, und der Layout-Wächter hat es gemeldet („div.orte-workspace reicht 27 px über den Rand", 390 px breit). */ grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr)); align-items:start; } .kartenliste>.modulkarte.ist-hero{grid-column:1 / -1} .modulkarte{display:flex;flex-direction:column;gap:var(--space-5)} .modulkarte-kopf{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap} .modulkarte-name-block{display:flex;flex-direction:column;gap:var(--space-1); flex:1;min-width:0} .modulkarte-kuerzel{color:var(--tinte-fern);letter-spacing:var(--tracking-label); text-transform:uppercase} .modulkarte-name{font:var(--type-title);margin:0;text-wrap:balance} /* Die Griffe der Modulseite: ZWEI Reihen, aber EIN Block. Die Wege hinein (Schreiben, Schreibtisch) und die Änderungen an der Hülle (Bearbeiten, Oberthemen) sind zwei Fragen und stehen deshalb in zwei Reihen. Als zwei Geschwister der Lagespalte lägen 32 px zwischen ihnen (`--space-9`), und die untere Reihe sähe aus wie ein vergessener Knopf; in dieser Klammer sind es 8. */ /* ---------- Die drei Segmente einer Arbeit (Spez C1) ---------- Gliederung, Arbeitsschritte, Literatur — ein Chip-Umschalter statt drei Blöcken untereinander. Dieselben Chips wie überall sonst, dieselbe Reihe wie die Filterchips der Literatur direkt darunter. */ .modul-segmente{display:flex;flex-direction:column;gap:var(--space-3)} .modul-segmente-reihe{padding-bottom:var(--space-2);border-bottom:1px solid var(--linie)} /* ---------- Die Literatur-Gruppen (Spez D) ---------- Ein Zwischenkopf je Gruppe (Typ, Gelesen oder Relevanz — je nach Umschalter), mit Anzahl. Kein eigener Rahmen: Der Abstand zur Liste darüber und darunter genügt, um die Gruppe erkennbar zu machen. */ .literatur-gruppenkopf{ display:flex;align-items:baseline;justify-content:space-between; padding:var(--space-4) var(--space-2) var(--space-1); font:var(--type-caption-strong);color:var(--tinte-fern); text-transform:uppercase;letter-spacing:var(--tracking-label); } .literatur-gruppenkopf:first-child{padding-top:var(--space-2)} .literatur-gruppenzahl{color:var(--tinte-still);text-transform:none;letter-spacing:normal} /* Band 2: die Zahl links, die Form daneben — auf einer Grundlinie, weil sie dieselbe Frage beantworten („wann und wie"). */ .modulkarte-termin{ display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap; padding-top:var(--space-5);border-top:1px solid var(--linie); } .modulkarte-countdown{font:var(--type-body-strong);color:var(--tinte)} .modulkarte-termin.ist-gross .modulkarte-countdown{ font:var(--type-display-m);letter-spacing:var(--tracking-display)} .modulkarte-form{font:var(--type-small);color:var(--tinte-fern)} /* Band 3 */ .modulkarte-fortschritt{ display:flex;flex-direction:column;gap:var(--space-6); padding-top:var(--space-5);border-top:1px solid var(--linie); } /* Ein Messblock: seine Beschriftung und sein Balken gehören eng zusammen, der nächste Block hält Abstand. Ohne diese Klammer lagen der Wörterbalken und der Stufenbalken gleich weit auseinander wie Balken und Beschriftung — und lasen sich als ein Balken, der in der Mitte die Farbe wechselt. */ .modulkarte-mess{display:flex;flex-direction:column;gap:var(--space-3)} /* Das Maß: Wert und Quote sind Zahlen und stehen deshalb an den Rändern; die Einheit steht dazwischen und ist Text. Vorher stand alles in einem String, und der brach auf dem Handy mitten in „Wörter". */ .modulkarte-mass{display:flex;align-items:baseline;gap:var(--space-3)} .modulkarte-mass-wert{font:var(--type-metric-sm);letter-spacing:var(--tracking-metric)} .modulkarte-mass-ziel{font:var(--type-small);color:var(--tinte-fern); flex:1;min-width:0} .modulkarte-mass-quote{font:var(--type-small);color:var(--tinte-still);flex:none} .modulkarte-stand{font:var(--type-small);color:var(--tinte-still);margin:0} /* Der Befund: EIN Satz, der dringlichste. */ .modulkarte-befund{ display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3); font:var(--type-small);color:var(--tinte-still);margin:0; } .modulkarte-befund .ton-critical{color:var(--glut-schrift)} /* ---------- Themen, Projekte, Noten ---------- */ /* Das Filter-Suchfeld und die Modul-Chips in EINER Zeile: Ohne eine Breitengrenze nahm das Suchfeld den ganzen freien Raum der Zeile und drängte die Chips in eine eigene darunter — zwei Zeilen für eine Frage ("wonach, in welchem Modul"). `.filterzeile` bleibt der generische Flex-Riegel aus ds.css; nur hier, wo Suchfeld und Chips zusammengehören, bekommt das Suchfeld eine feste Vorzugsbreite. */ .filterzeile .suchfeld{flex:0 1 260px} /* Stand und Uhr stehen NEBENEINANDER: Es sind die zwei Griffe, die man auf dieser Bühne wirklich anfasst, und sie sind zusammen so breit wie die Lagespalte. Untereinander waren es zwei Zeilen für zwei Knöpfe. */ .thema-kopf{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap} /* DER STANDSCHALTER IST EIN GRIFF, KEINE ANZEIGE. Er war `inline-flex` und sonst nichts: eine Kugel, ein Wort, kein Relief — und dahinter lag die Wahl, die auf dieser Bühne am meisten zählt. Jetzt ist er aus der Fläche gehoben (`--neo-auf`) und rastet beim Drücken ein (`--neo-ein`), wie jeder Knopf dieses Hauses. Der Chevron sagt, dass etwas aufgeht; das Wort trägt `--tinte`, nicht das stille Grau, denn es IST die Auskunft. */ .thema-ampel{ display:inline-flex;align-items:center;gap:var(--space-3); min-height:44px;padding:0 var(--space-5) 0 var(--space-4); border:0;border-radius:var(--radius-pill); background:var(--flaeche);box-shadow:var(--neo-auf); color:var(--tinte);cursor:pointer;flex:1;min-width:0; } .thema-ampel:active{box-shadow:var(--neo-ein)} /* Überschreibt die Grundfassung aus ds.css (`--type-caption`, `--tinte-fern`). Dort ist das Wort eine Beschriftung neben einer Kugel; hier ist es die Aufschrift des Schalters und muss so laut sein wie jedes Knopfwort. */ .thema-ampel .thema-ampel-wort{font:var(--type-small-strong);color:var(--tinte)} .thema-ampel-pfeil{flex:none;color:var(--tinte-fern);margin-left:auto} .thema-ampel:hover .thema-ampel-pfeil{color:var(--tinte-still)} .thema-aktionen{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center} .thema-uhr{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap} /* Hier standen `.projektkarte`, `.projekt-kopf`, `.projekt-name`, `.projekt-ziel`, `.projekt-meta` und `.projekt-module` — sechs Regeln fuer ein DOM, das es seit dem Umbau auf Zeilen nicht mehr gab. Kein einziges `js/` erzeugte sie noch (Q8). */ /* Die flache Wertezeile unter "Jetzt dran": Beschriftung ueber Zahl, drei Paare in einer `.reihe` statt drei Kachel-Karten. */ .projekt-wertpaar{display:flex;flex-direction:column;gap:var(--space-2)} /* Die Notenlage: die Kopfzahl und das Bild, das sie erklärt, in EINER Zeile. Getrennt untereinander nahm jede die volle Breite für einen Inhalt, der die Hälfte davon braucht — und die Zahl stand ausserhalb des Bildschirms, sobald man das Bild ansah. 4:6, weil links drei Zeilen stehen und rechts ein Diagramm mit Achse. Erst ab 1100 px: Darunter ist ein Diagramm neben einer Zahl zwei zu enge Spalten. */ .notenlage{display:flex;flex-direction:column;gap:var(--space-6)} .notenliste-teil{display:flex;flex-direction:column;gap:var(--space-4);min-width:0} @media (min-width:1100px){ /* Drei Kinder, zwei Spalten: Die Kopfzahl steht links oben, das Bild rechts ueber beide Reihen, und die Liste fuellt links darunter das, was sonst Loch waere. Die Zuordnung steht ausdruecklich da und nicht als Reihenfolge im Fluss — sonst rutscht sie, sobald ein viertes Kind dazukommt (dieselbe Ueberlegung wie bei `--moment-i`). */ .notenlage{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:var(--space-6) var(--space-8);align-items:start} .notenlage>.notenkopf{grid-column:1;grid-row:1} .notenlage>.instrument{grid-column:2;grid-row:1 / span 2} .notenlage>.notenliste-teil{grid-column:1;grid-row:2} } /* Die ausstehenden Noten stehen oben und mit Abstand: Sie sind das Offene, alles darunter ist erledigt. */ .notengruppe-ausstehend{display:flex;flex-direction:column;gap:var(--space-4); margin-bottom:var(--space-6)} .notenzeile{display:flex;align-items:center;gap:var(--space-4)} .notenzeile-note.ist-offen{color:var(--tinte-fern); font:var(--type-metric-sm);font-variant-numeric:tabular-nums;flex:none} .notenzeile-sem{color:var(--tinte-fern);flex:none;width:58px} .notenzeile-note{font:var(--type-metric-sm);font-variant-numeric:tabular-nums;flex:none} .notizkarte,.erklaerkarte,.lagekarte,.schrittkarte{ display:flex;flex-direction:column;gap:var(--space-3)} /* ---------- Das Warnband einer Arbeit ---------- Dieselben Befunde, die `arbeit.py stand` am Rechner ausgibt — als Aufzählung, nicht als Alarmfläche. Die Fläche bleibt eine gewöhnliche Platte: Ein rot hinterlegter Kasten schreit auch dann noch, wenn nur eine Quelle einen Bibkey vermisst. */ .warnband{display:flex;flex-direction:column;gap:var(--space-3)} .warnband-zeile{display:flex;gap:var(--space-3);align-items:baseline} .warnband-punkt{flex:none;line-height:1} .warnband-text{display:flex;flex-direction:column;gap:1px;min-width:0} .warnband-satz{font:var(--type-small);color:var(--tinte)} .warnband-unter{font:var(--type-caption);color:var(--tinte-fern);text-wrap:pretty} /* ---------- Die Gliederung ---------- Kapitelmodell v2 (26.08.2026): eine Zeile je Kapitel, dicht — Kennung, Nummer, Titel, Status-Punkt (Ampel), Wörter/Soll klein rechts. KEIN Karten-Stapel, KEIN Schatten je Zeile: Die Zeilen stehen offen auf dem Grund, getrennt durch Abstand, markiert wird nur die eine, an der gerade gearbeitet wird — und zwar durch eine Randfarbe, nicht durch eine gehobene Fläche (siehe „DAS OFFENE KAPITEL" weiter unten). Sie ÖFFNET ihr Kapitel, wie jede Zeile in dieser App öffnet. (Das Aufklappen der Belege an dieser Stelle ist wieder ausgebaut: Es hat den erwarteten Klick gekapert; die Beleg-Arbeit wohnt auf dem Schreibtisch.) Die Ampel links bleibt eine eigene Fläche. */ .gliederung-zeile{ display:flex;align-items:center;gap:var(--space-3); min-height:44px; /* `--space-5` und nicht `--gutter-card`: Diese Liste liegt nicht IN einer Karte, sie liegt auf dem Grund — 18 px Rand sind dort nicht Ruhe, sondern zweimal sechs Pixel, die dem Kapiteltitel in der schmalen Spalte des Schreibtischs fehlen. */ padding:var(--space-2) var(--space-5); border-radius:var(--radius-sm); border-left:2px solid transparent; } .gliederung-zeile:hover .zeile-chevron{transform:translateX(3px);color:var(--tinte-still)} .gliederung-ampel{ flex:none;width:40px;height:40px;padding:0;margin-left:calc(var(--space-3) * -1); display:grid;place-items:center;background:none;border:0;cursor:pointer; } .gliederung-mitte{ flex:1;min-width:0;display:flex;align-items:center;gap:2px; padding:0;background:none;border:0;cursor:pointer;text-align:left; } /* Unterkapitel — die Struktur sichtbar machen, ohne sie zu behaupten. Die Ebene kommt seit Kapitelmodell v2 aus `eltern`/`position` (`ableitungen.js: kapitelBaum`), nicht mehr aus einer Nummer im Titel. Eingerückt wird die MITTE, nicht die Zeile: Die Ampel bleibt in ihrer Spalte, sonst tanzt die linke Kante. Die Haarlinie davor ist die Führung, die eine Einrückung erst lesbar macht — ohne sie sieht ein eingerücktes Element nur verrutscht aus. */ .gliederung-zeile[data-ebene] .gliederung-mitte{position:relative} .gliederung-zeile[data-ebene] .gliederung-mitte::before{ content:"";position:absolute;left:0;top:8px;bottom:8px; border-left:1px solid var(--linie); } .gliederung-zeile[data-ebene="1"] .gliederung-mitte{padding-left:var(--space-5)} .gliederung-zeile[data-ebene="2"] .gliederung-mitte{padding-left:var(--space-8)} .gliederung-zeile[data-ebene="3"] .gliederung-mitte{padding-left:var(--space-10)} /* Ein Unterkapitel ist kein Hauptkapitel: kleinere Schrift, ruhigere Farbe fuer den Titeltext. Die Hierarchie steht damit auch dann da, wenn die Kennung/Nummer davor knapp wird. (Bis 26.08.2026 zielte diese Regel auf `.zeile-titel` — eine Klasse, die diese Zeile nie trug; sie traf also nie. Jetzt trifft sie `.gliederung-titel` wirklich, wie der Name immer schon versprach.) */ .gliederung-zeile[data-ebene] .gliederung-titel{font:var(--type-small)} .gliederung-zeile[data-ebene] .gliederung-titeltext{color:var(--tinte-still)} /* ---------- Die Gliederung als gemeinsames Element ---------- Dieselbe Liste steht jetzt an drei Stellen (Modulseite, Schreibfläche, Schreibtisch), und sie kann überall dasselbe. Was sich unterscheidet, ist nur die DICHTE: neben dem Editor kleiner, sonst mit derselben Zeile. KEINE KARTEN. Die Zeilen stehen offen auf dem Grund; getrennt werden sie von Abstand, markiert wird nur die eine, an der man gerade arbeitet. Ein Rahmen um jede Zeile wären zwanzig Rahmen, die nichts sagen. */ .gliederung{display:flex;flex-direction:column;gap:var(--space-2);min-width:0} .gliederung-liste{display:flex;flex-direction:column;gap:1px} .gliederung-fuss{display:flex;gap:var(--space-2);padding-top:var(--space-2)} /* Der Klappknoten. Er nimmt seinen Platz AUCH DANN ein, wenn es nichts einzuklappen gibt — sonst rutschen die Zeilen ohne Unterkapitel nach links und die Spalte franst aus. 24 BREIT, 40 HOCH. Der erste Entwurf machte ihn 22×22 — der Layout-Wächter hat ihn auf allen drei Breiten als zu kleine Trefferfläche gemeldet, und er hat recht: Das ist der Knopf, den man mit dem Daumen trifft oder eben nicht. Schmal darf er bleiben (er sitzt in einer engen Spalte), hoch muss er sein. */ .gliederung-klappe{ flex:none;width:24px;min-height:40px;padding:0; display:grid;place-items:center; background:none;border:0;border-radius:var(--radius-xs); color:var(--tinte-fern);cursor:pointer; } .gliederung-klappe:hover{background:var(--tinte-hauch);color:var(--tinte)} .gliederung-klappe.ist-leer{cursor:default} /* EINE ZEILE, KEIN VERZEICHNIS-EINTRAG MEHR. Bis zum 26.08.2026 durfte ein Titel auf zwei Zeilen umbrechen (`line-clamp`) — richtig für eine ausführliche Liste mit Metazeile und Befund darunter. Genau die sind mit Kapitelmodell v2 gefallen (Spez C2): „eine Zeile je Kapitel" heisst nicht mehr nur „eine Metazeile weniger", sondern wirklich eine Zeile, abgeschnitten mit Auslassungspunkten statt umgebrochen. Der volle Titel steht im `title`-Attribut der Zeile. */ .gliederung-titel{ display:flex;align-items:baseline;gap:var(--space-2);min-width:0; overflow:hidden;white-space:nowrap;color:var(--tinte); } .gliederung-titeltext{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* Die Nummer — dieselbe tabellarische, dezente Schrift wie die Kennung davor, nur ohne deren fernere Farbe: Sie gehört zum Titel, nicht zum Anker (Spez C2: „Kennung … , Nummer, Titel"). */ .gliederung-nummer{flex:none;color:var(--tinte-fern)} /* DIE ZAHL TRÄGT DEN ZUSTAND. Das ersetzt einen Balken je Zeile: Wo nichts steht, ist die Zahl still; wo das Soll erreicht ist, wird sie Moos; wo es überschritten ist, Ocker. Vier Zustände, kein einziger Strich. KEIN eigener Ton für „leer": Der erste Entwurf nahm dafür `--tinte-fern` — 3,9:1 auf der Platte, unter den 4,5:1, die kleine Schrift braucht. Einen Zustand durch schlechtere Lesbarkeit zu markieren ist der falsche Handel, und „0 / 1200" sagt ohnehin schon, dass da nichts steht. */ .gliederung-zahl{ flex:none;display:inline-flex;align-items:baseline;gap:4px; padding:var(--space-1) var(--space-2); background:none;border:0;border-radius:var(--radius-xs); font:var(--type-caption);color:var(--tinte-still); font-variant-numeric:tabular-nums;cursor:pointer; } .gliederung-zahl:hover{background:var(--tinte-hauch)} /* NICHT `--tinte-fern`: gemessen 4,23:1 auf der Platte, unter den 4,5:1, die kleine Schrift braucht. Genau davor warnt der Absatz darüber — und der erste Entwurf hat es trotzdem getan. */ .gliederung-soll{color:var(--tinte-still)} .gliederung-zeile.ist-voll .gliederung-zahl{color:var(--moos-schrift)} .gliederung-zeile.ist-drueber .gliederung-zahl{color:var(--ocker-schrift)} /* DAS OFFENE KAPITEL IST EINE KANTE, KEINE MULDE MEHR. Bis zum 26.08.2026 war es eine Mulde: `box-shadow:var(--neo-ein)`, dieselbe Sprache wie der aktive Ort in der Ortsleiste oder ein gedrückter Chip. Für eine Listenzeile unter vielen ist das ein Schatten zu viel (Spez C2: „kein Karten-Stapel, keine Schatten je Zeile") — zwanzig Zeilen, von denen eine eingedrückt aussieht, lesen sich wie zwanzig Karten mit einer Delle. Markiert wird jetzt flach: eine Akzentkante links (dieselbe Sprache wie eine aktive Registerkarte) und ein Hauch Fläche, beides ohne Tiefe. */ .gliederung-zeile{ /* UMBRUCH ERLAUBT. Der Balken des offenen Kapitels ist `flex-basis:100%` und gehört auf eine eigene Zeile; ohne `wrap` quetschte er sich in die Reihe und schob Titel und Zahl übereinander. */ flex-wrap:wrap; } .gliederung-zeile:hover{background:var(--tinte-hauch)} .gliederung-zeile.ist-aktiv{background:var(--tinte-hauch);border-left-color:var(--akzent)} .gliederung-zeile.ist-aktiv .gliederung-titeltext{font:var(--type-body-strong)} /* Beim Ziehen: Das Ziel sagt selbst, dass es eines ist. */ .gliederung-zeile.ist-ziel{ background:var(--moos-hauch); box-shadow:inset 0 0 0 1px var(--moos); } .gliederung-balken{flex-basis:100%;padding:0 var(--space-3) var(--space-2) 34px} /* Die dichte Fassung neben dem Editor: noch etwas weniger Höhe. */ .gliederung.ist-dicht .gliederung-zeile{min-height:36px;padding:var(--space-1) var(--space-2)} .gliederung.ist-dicht .gliederung-ampel{width:32px;height:36px;margin-left:0} .gliederung.ist-dicht .gliederung-titel{font:var(--type-small)} .gliederung.ist-dicht .gliederung-balken{padding-left:28px} /* ---------- Die Deckblatt-Zeile (Spez C3) ---------- Ganz oben in der Gliederung, kein Kapitel: eigener Stil, damit sie nicht mit „Kapitel 1" verwechselt wird — ein Symbol statt einer Ampel, sonst dieselbe Zeilenhöhe wie darunter. */ .deckblatt-zeile{ display:flex;align-items:center;gap:var(--space-3);width:100%; min-height:44px;padding:var(--space-2) var(--space-5); background:none;border:0;border-radius:var(--radius-sm); border-bottom:1px solid var(--linie); cursor:pointer;text-align:left;color:inherit; } .deckblatt-zeile:hover{background:var(--tinte-hauch)} .deckblatt-symbol{flex:none;width:40px;height:40px;display:grid;place-items:center; margin-left:calc(var(--space-3) * -1);color:var(--tinte-fern)} .deckblatt-mitte{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--space-2)} .deckblatt-titel{font:var(--type-small-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .deckblatt-meta{flex:1;min-width:0;font:var(--type-caption);color:var(--tinte-fern); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .deckblatt-hinweis{flex:none;font:var(--type-caption);color:var(--ocker-schrift)} /* HIER STAND EINE ZWEITE FASSUNG VON `.menue` UND `.menuezeile` — eigener Abstand, eigenes Polster, eigener Radius, und weil `buehnen.css` nach `ds.css` laedt, gewann sie. Zwei Fassungen derselben Zeile an zwei Orten (Kodex G3), und die zweite kannte die Regel nicht, die das Wort links haelt. Das Menue im Designsystem (`css/ds.css`, `js/ds/navigation.js`) ist die eine Fassung; hier steht keine mehr. */ .erklaerkarte-text,.lagekarte-text,.schrittkarte-text{ font:var(--type-small);color:var(--tinte-still);margin:0;text-wrap:pretty} .schrittzeile{display:flex;align-items:center;gap:var(--space-4)} .schritt-symbol{color:var(--tinte-fern);flex:none} .schritt-text{flex:1;min-width:0;font:var(--type-body)} .schritt-aktion{flex:none;margin-left:auto; font:var(--type-small);color:var(--tinte-still); text-decoration:underline;text-underline-offset:3px} .schrittzeile.ist-offen{width:100%} .schrittzeile.ist-offen .schritt-text{color:var(--tinte-fern)} .notiz{font:var(--type-small);color:var(--tinte-still);margin:0;text-wrap:pretty} /* Die Projekt-Notiz: Antippen macht sie beschreibbar. Der Griff ist die ganze Karte — ein Stift-Symbol daneben wäre ein zweites Ziel für dieselbe Handlung. */ .notiz-griff{ display:flex;flex-direction:column;gap:var(--space-2);width:100%; background:none;border:0;padding:0;cursor:text;text-align:left; } .notiz-griff:hover .notiz{color:var(--tinte)} .notiz.ist-leer{color:var(--tinte-fern);font-style:italic} .notiz-editor{width:100%} /* KONTEXT.md im Log: Markdown tippt sich in fester Schrift ehrlicher. */ .kontext-editor{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:13px} /* ---------- Das Einrichten-Protokoll ---------- Ein Lauf, der Dateien anlegt, zeigt jede Zeile — wortloser Erfolg ist von wortlosem Scheitern nicht zu unterscheiden. */ .einrichten-protokoll{display:flex;flex-direction:column;gap:var(--space-2)} .einrichten-zeile{display:flex;align-items:baseline;gap:var(--space-3); font:var(--type-small);color:var(--tinte)} .einrichten-zeile .einrichten-haken{flex:none;color:var(--moos);transform:translateY(2px)} .einrichten-zeile.ton-caution{color:var(--tinte-still)} .einrichten-zeile.ton-caution .einrichten-haken{color:var(--ocker-schrift)} .einrichten-zeile.ton-critical{color:var(--glut-schrift)} .einrichten-zeile.ton-critical .einrichten-haken{color:var(--glut-schrift)} /* ---------- Die Quellenzeile ---------- Drei Griffe nebeneinander, und keiner darf wie ein Knopf aussehen: Punkt = gelesen, Mitte = bearbeiten, Marke = Kapitel zuordnen. Jeder bekommt 40 px Trefferfläche, sichtbar bleibt das Kleine darin — dasselbe Verhältnis wie beim Hakengriff. */ .quelle-haken{ position:relative;flex:none;width:40px;height:40px;padding:0; display:grid;place-items:center; background:none;border:0;cursor:pointer; } .quelle-punkt{ width:10px;height:10px;border-radius:50%;flex:none; border:1.5px solid var(--linie-stark);background:transparent; } .quelle-haken:hover .quelle-punkt{border-color:var(--tinte)} .quelle-haken.ist-gelesen .quelle-punkt{background:var(--moos);border-color:var(--moos)} .quelle-kapitel{ flex:none;min-height:40px;padding:0 0 0 var(--space-2); display:grid;place-items:center; background:none;border:0;cursor:pointer; } .quelle-kapitel:hover .marke{color:var(--tinte)} .quelle-kapitel:hover .marke-critical{color:var(--glut-schrift);text-decoration:underline; text-underline-offset:2px} /* ---------- Der Schreibtisch ---------- Links die Quellen, rechts die Gliederung, dazwischen der Zug. HIER STANDEN `.tisch`, `.tisch-spalte`, `.tisch-werkzeuge`, `.tisch-quellenliste` UND (unten) `.tischseite` MIT `.tisch-quellenspalte` — sechs Regeln fuer eine Quellenspalte mit eigenem Bildlauf, die es so nicht mehr gibt: Der Schreibtisch baut seit B-5 `.arbeit-tisch` (`buehnen/arbeit/index.js`), und kein Modul im Repo setzt eine dieser Klassen. Gefunden hat sie B-0 des Phase-1b-Plans, aufgeschrieben mit dem Vermerk „geloescht wird hier nichts: `app.css` ist Phase 2". Ausgerechnet der Kommentar an `ortMerken()` nannte sie damals als Beispiel — und `ortMerken()` ist mit B-2 gefallen. Damit war der letzte Leser weg, und eine Regel, die niemand mehr anwendet, ist kein Stil, sondern eine Fussnote, die aussieht wie eine Zusage. Dass nichts daran haengt, sagt nicht dieser Kommentar, sondern `probe/abbild.mjs`: 43 Pruefungen, jede Abdruckzeile unveraendert — Lage, Farbe, Schrift, Rand und eigener Text je sichtbarem Element, ueber 14 Buehnen in drei Breiten. */ .tisch-bibstand{font:var(--type-caption);color:var(--tinte-fern);margin-left:auto; text-align:right;text-wrap:pretty} /* ============================================================ DIE QUELLENLISTE HIER STAND EINE KARTE JE QUELLE (`.tisch-quelle`): eigenes Relief, eigene Rundung, vier Textbloecke untereinander, eine Fusszeile. Zwei Quellen fuellten 260 px, dreissig fuellten den Bildschirm dreimal. Eine Liste, die man SCANNT, sieht anders aus: gleiche Zeilenhoehe, feste Spalten, Haarlinien statt Schatten. Und sie folgt der Regel aus `tokens.css` — Relief bezeichnet Ebenen, nicht Dinge: Die LISTE ist die gehobene Flaeche, ihre Zeilen sind es nicht. ============================================================ */ /* DIE HUELLE DER LISTE. Sie heisst seit dem 26.08.2026 `.quellenliste` und steht an BEIDEN Orten — im Arbeitsbereich schmal, auf der Modulseite breit (`js/quellenliste.js`). `.arbeit-quellenliste` gab es nur im Arbeitsbereich und ist mit der zweiten Liste gegangen (Q8). */ .quellenliste{display:flex;flex-direction:column;gap:var(--space-4)} .quellenliste-steuer{display:flex;flex-direction:column;gap:var(--space-3)} /* Auf der breiten Seite passen Suche und Chips nebeneinander — auf der schmalen Spalte des Arbeitsbereichs nie. */ .quellenliste.ist-breit .quellenliste-steuer{ flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--space-4); } .quellenliste.ist-breit .quellenliste-steuer>.suchfeld{flex:1;min-width:220px} .quellenliste-koerper{display:flex;flex-direction:column;gap:var(--space-3)} /* Ein Zwischenkopf je Gruppe: Wort links, Anzahl rechts, kein Rahmen. Der Abstand zur Liste darunter traegt die Zusammengehoerigkeit. */ .quellenliste-gruppenkopf{ display:flex;align-items:baseline;justify-content:space-between; gap:var(--space-3);padding:0 var(--space-2); font:var(--type-label);letter-spacing:var(--tracking-label); color:var(--tinte-fern);text-transform:uppercase; } /* Die gehobene Flaeche ist die GRUPPE, nicht die Zeile (`tokens.css`: Relief bezeichnet Ebenen, nicht Dinge). */ .quellenliste-gruppe{ display:flex;flex-direction:column; background:var(--flaeche); border-radius:var(--radius-md); box-shadow:var(--neo-auf); overflow:hidden; } .quellenliste-zaehler{margin:0} /* Die Spalten stehen im Raster und nicht im Fluss: Nur so liegt die Kapitelzahl in JEDER Zeile an derselben Stelle — und genau das ist der Unterschied zwischen einer Liste und einem Stapel. */ .quellzeile{ display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:var(--space-2); min-height:44px; padding:var(--space-1) var(--space-2); border-top:var(--hairline); cursor:grab; } /* BREIT: eine Spalte mehr fuer den Bibkey. Die Faehigkeiten sind dieselben wie in der schmalen Darstellung — was dazukommt, sind Woerter, die auf 340 px nicht hinpassen (`js/quellenliste.js`). */ .ist-breit .quellzeile{ grid-template-columns:auto 1fr auto auto auto auto; gap:var(--space-3); padding:var(--space-2) var(--space-3); } /* „verknuepft, im Text nie zitiert" — die Auskunft, die beim Schreiben zaehlt. Sie steht unter der Autorzeile und nur dort, wo Platz ist. */ .quellzeile-befund{ display:block;font:var(--type-caption);color:var(--ocker-schrift); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .quellzeile:first-child{border-top:0} .quellzeile:active{cursor:grabbing} .quellzeile:hover{background:var(--tinte-hauch)} .quellzeile.laedt-hoch{opacity:.6;pointer-events:none} /* Der Lesepunkt. Ein Ring, der sich fuellt — dieselbe Aussage wie ein Haken, nur ohne die Grafik eines Formulars. */ /* 40 px, wie jedes Ziel dieser App (`probe/waechter.mjs` §2). Der erste Entwurf gab ihm 32, und der Waechter hat ihn auf der schmalsten Breite gemeldet — zu Recht: Er ist der einzige Griff der Zeile, der einen Zustand KIPPT. Die ZEICHNUNG bleibt 11 px: Die Flaeche ist fuer den Finger, das Glyph fuer das Auge. */ .quellzeile-haken{ flex:none;display:grid;place-items:center; width:40px;height:40px;padding:0; border:0;border-radius:50%;background:none;cursor:pointer; } .quellzeile-haken:hover{background:var(--tinte-hauch-stark)} .quellzeile-punkt{ width:11px;height:11px;border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--tinte-fern); } .quellzeile-haken.ist-gelesen .quellzeile-punkt{ background:var(--moos);box-shadow:inset 0 0 0 1.5px var(--moos); } /* Titel und Autorzeile. Beide EINZEILIG mit Auslassung — eine Liste, deren Zeilen verschieden hoch sind, laesst sich nicht senkrecht lesen, und genau dafuer ist sie da. */ .quellzeile-text{ min-width:0;display:flex;flex-direction:column;gap:1px; padding:0;border:0;background:none;cursor:pointer;text-align:left; } .quellzeile-titel,.quellzeile-autor{ display:block;min-width:0;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .quellzeile-titel{font:var(--type-small);color:var(--tinte)} .quellzeile-autor{font:var(--type-caption);color:var(--tinte-fern)} .quellzeile-text:hover .quellzeile-titel{text-decoration:underline;text-underline-offset:3px} .quellzeile.hat-pdf .quellzeile-titel{color:var(--tinte)} /* Die zwei Zustandsspalten. Feste Breite, damit sie in jeder Zeile uebereinander stehen — eine Spalte, die mit ihrem Inhalt waechst, ist keine. */ /* Das Kapitel ist ein GRIFF, kein Etikett — in beiden Darstellungen. Er sieht nur nicht danach aus, solange der Zeiger nicht darauf steht: In einer Liste von dreissig Zeilen waeren dreissig Knoepfe ein Muster. */ .quellzeile-kapitel{ flex:none;min-width:22px;padding:var(--space-2) var(--space-2); border:0;border-radius:var(--radius-xs);background:none;cursor:pointer; text-align:center; font:var(--type-caption-strong);color:var(--tinte-still); font-variant-numeric:tabular-nums;white-space:nowrap; } .quellzeile-kapitel:hover{background:var(--tinte-hauch-stark);color:var(--tinte)} .quellzeile-kapitel.ist-offen{color:var(--ocker-schrift)} .ist-breit .quellzeile-kapitel{min-width:88px} /* Breit steht der Stift immer da — dort ist Platz, und ein Griff, den man erst durch Zeigen findet, ist auf einer Uebersichtsseite eine Wette. */ .ist-breit .quellzeile-stift{opacity:.55} .ist-breit .quellzeile:hover .quellzeile-stift{opacity:1} /* 40 px, wie der Lesepunkt und wie jedes Ziel dieser App. Die ZEICHNUNG bleibt 14 px — die Flaeche ist fuer den Finger, das Glyph fuers Auge. */ .quellzeile-pdf{ flex:none;display:grid;place-items:center; width:40px;height:40px;padding:0; border:0;border-radius:var(--radius-xs); background:none;color:var(--tinte-fern);cursor:pointer; } .quellzeile-pdf:hover{background:var(--tinte-hauch-stark);color:var(--tinte)} .quellzeile-pdf.hat-pdf{color:var(--moos-schrift)} /* Der Stift tritt erst hervor, wenn der Zeiger auf der Zeile steht. Dreissig Bleistifte untereinander sind ein Muster, keine Auskunft — fuer die Tastatur bleibt er sichtbar, sobald er den Fokus hat. */ .quellzeile-stift{opacity:0} .quellzeile:hover .quellzeile-stift, .quellzeile-stift:focus-visible{opacity:1} /* Ein PDF schwebt ueber der Zeile: Die Mulde sagt „hier hinein". */ .quellzeile.ist-abwurf{ background:var(--moos-hauch); box-shadow:inset 0 0 0 1px var(--moos); } /* HIER STANDEN `.tisch-kapitel`, `-kopf`, `-titel`, `-woerter`, `-soll` UND `-leer` — die Kapitelkarte, die der Schreibtisch bis B-5 selbst mitbrachte. Seither steht dort `ui/gliederung.js`, und kein Modul im Repo setzt eine dieser Klassen mehr (nachgesehen am 25.08.2026 über `js/`). Eine Regel ohne Anwender ist kein Stil, sondern eine Fussnote, die aussieht wie eine Zusage (Kodex Q8). Was bleibt, ist das, was `belege.js` wirklich baut: die Notiz des Kapitels und sein Befund. */ .tisch-kapitel-notiz{font:var(--type-small);color:var(--tinte-still);text-wrap:pretty} /* Die Belege — untereinander, mit Haarlinien, wie jede Liste. `.tisch-beleg` ist seit `ds/ziehen.js` ein `div` (die Zieh-Quelle), `.tisch-beleg-mitte` der Knopf darin (bearbeiten) — ein Knopf kann nicht selbst gezogen werden, siehe `belege.js`. */ .tisch-belege{display:flex;flex-direction:column} .tisch-belege>*+*{border-top:1px solid var(--linie)} .tisch-beleg{ display:flex;align-items:flex-start;gap:var(--space-3);width:100%; min-height:44px;padding:var(--space-3) var(--space-2); border-radius:var(--radius-xs);cursor:grab;color:var(--tinte); } .tisch-beleg:active{cursor:grabbing} .tisch-beleg:hover{background:var(--tinte-hauch)} .tisch-beleg-griff{flex:none;color:var(--tinte-fern);padding-top:4px} .tisch-beleg-mitte{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; background:none;border:0;padding:0;text-align:left;cursor:pointer;color:inherit; } .tisch-beleg-wer{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3); font:var(--type-small)} .tisch-beleg-seite{font:var(--type-caption);color:var(--tinte-fern); font-variant-numeric:tabular-nums} .tisch-beleg-notiz{font:var(--type-caption);color:var(--tinte-still);text-wrap:pretty} .tisch-beleg-notiz.ist-leer{color:var(--tinte-fern);font-style:italic} .tisch-kapitel-befund{font:var(--type-caption);color:var(--ocker-schrift)} /* ---------- Der Tagesplan im Formular ---------- */ .postenbereich{display:flex;flex-direction:column;gap:var(--space-4)} .postenliste{display:flex;flex-direction:column; border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-md);overflow:hidden} .postenliste>*+*{border-top:1px solid var(--linie)} /* Die Art steht als eigene, schmale Spalte links — sie ist eine Sortierhilfe, kein Teil des Titels. Oben ausgerichtet, damit sie bei zweizeiligen Titeln nicht in die Mitte rutscht. */ .postenzeile-art{ font:var(--type-caption);color:var(--tinte-fern); width:56px;flex:none;align-self:flex-start;padding-top:3px; } .postenzeile-edit{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center} /* Der Schleppgriff zum Umordnen — dieselbe Handbewegung wie bei den Belegen auf dem Schreibtisch. Die Pfeile daneben bleiben: Sie sind der Weg für Tastatur und Handy. */ .posten-schleppgriff{flex:none;color:var(--tinte-fern);cursor:grab; display:inline-flex;align-items:center} .posten-schleppgriff:active{cursor:grabbing} /* Wohin der gezogene Posten faellt, zeigt seit `ds/ziehen.js` die generische `.ist-ziel`-Kante (`css/ds.css`) — keine eigene Ober/Unter- Fassung mehr, die HTML5-DnD noch brauchte. */ /* Die Mitte der Postenzeile ist ein Griff (Beginn/Text ändern) … */ .posten-griff{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px; background:none;border:0;padding:var(--space-2) 0;cursor:pointer; text-align:left;color:inherit; } .posten-griff:hover .zeile-titel{text-decoration:underline;text-underline-offset:3px} /* … und die Minuten stehen als eigener Griff daneben: −/+ in Viertelstunden, ohne Unterblatt. */ .posten-minuten{display:inline-flex;align-items:center;gap:var(--space-1);flex:none} .posten-dauer{font:var(--type-small);font-variant-numeric:tabular-nums; min-width:44px;text-align:center} /* Die Schnellzeile der Tagesplanung: ein Suchfeld, Treffer direkt darunter, zwei Chips — der ganze Hinzufügen-Fluss ohne Unterblatt. */ .schnellzeile{display:flex;flex-direction:column;gap:var(--space-3)} .schnellzeile-treffer{max-height:min(240px,40dvh);overflow-y:auto; display:flex;flex-direction:column; border-radius:var(--radius-md);overflow:hidden} .schnellzeile-treffer:not(:empty){border:0;box-shadow:var(--neo-auf)} .schnellzeile-treffer>*+*{border-top:1px solid var(--linie)} .schnell-treffer{min-height:44px} /* ---------- Der Abschluss-Moment ---------- */ .abschluss{display:flex;flex-direction:column;gap:var(--space-6)} .abschluss-block{display:flex;flex-direction:column;gap:var(--space-4)} .abschluss-zeit{font:var(--type-metric-xl);letter-spacing:var(--tracking-metric);margin:0;text-align:center} .abschluss-summe{font:var(--type-small);color:var(--tinte-still);margin:0;text-align:center} .abschluss-still{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:center} .abschluss-session{display:flex;justify-content:center} /* ============================================================ Der Zeit-Reiter Hier liegen die Instrumente. Sie sind bewusst KONKRET: Balken mit Achse und Beschriftung, keine Kunst. Wer eine Zahl nicht ablesen kann, hat kein Instrument, sondern ein Bild. ============================================================ */ .zeit-inhalt{display:flex;flex-direction:column;gap:var(--space-9)} .zeitkarte{display:flex;flex-direction:column;gap:var(--space-4)} /* ---------- Der Bezug unter einem Balkenstreifen ---------- `balkenTage()` kann eine gestrichelte Bezugslinie (`ziel`) — sie wurde bis zum 25.08.2026 nirgends bestellt, und die Streifen zeigten vierzehn Laengen ohne Massstab. Jetzt steht die Linie da, und diese Zeile sagt, was sie ist und wie hoch die volle Saeule reicht. Ein Strich ohne Namen erklaert nichts. Sie steht dicht unter dem Streifen, den sie erklaert — naeher als der Abstand der Karte, sonst gehoert sie optisch zur naechsten Zeile. `--tinte-still` und nicht `--tinte-fern`: Diese Zeile traegt ZAHLEN, an denen man das Bild darueber abliest — sie ist keine Fussnote. Der ferne Ton erreicht im Nachtlicht ausserdem nur 3,42:1 (gemessen am 25.08.2026, auf `--flaeche`), der stille 7,0:1. */ .balkentage-bezug{margin:calc(var(--space-3) * -1) 0 0; font:var(--type-caption);color:var(--tinte-still); font-variant-numeric:tabular-nums;text-wrap:pretty} /* Der heutige Tag im Streifen. `zehrung.js` bestellt fuer ihn seit je `ton:"accent"` — eine Tonklasse, zu der es keine Regel gab: Der Balken fiel still auf die Grundfarbe zurueck und war von den dreizehn anderen nicht zu unterscheiden. Eine Absicht, die nichts bewirkt und nichts meldet, ist genau der Fall, gegen den G1 steht. */ .balkentage-stab.ton-accent{background:var(--akzent)} /* ------------------------------------------------------------------ Die vier Linsen des Zeit-Reiters (Fassung 18). Vorher war der Reiter eine Spalte aus dreizehn gleich aussehenden Blöcken — der Grund für „einfach nur eine Aneinanderreihung von vielen Zahlen ohne Gruppierungen". Die Kopfzeile ist deshalb bewusst GRÖSSER als jede Abschnittszeile darin: Wo eine Gliederung dieselbe Größe hat wie ihr Inhalt, ist sie keine. ------------------------------------------------------------------ */ .zeitlinse{display:flex;flex-direction:column;gap:var(--space-6)} /* HIER STANDEN `.zeitlinse-kopf`, `.zeitlinse-wort`, `.zeitlinse-frage` UND DIE GANZE SPRUNGLEISTE (`.zeitsprung*`, 20 Zeilen mit eigener Glasbehandlung und eigenem `sticky`). Beide gab es, weil fuenf Linsen untereinander auf einer Seite standen: die Koepfe, damit man wusste, welche man gerade liest, die Leiste, damit man ohne Scrollen dorthin kam. Seit jede Linse eine eigene Adresse hat, sagt der Seitenkopf, welche es ist, und die Pfadleiste bringt einen zu den anderen. Der `scroll-margin-top` rechnete mit der Hoehe genau dieser Leiste. */ /* Der Tagesbogen: 24 Stunden als ein Streifen, in Töpfe geteilt. */ .bogenkarte{display:flex;flex-direction:column;gap:var(--space-4)} .bogen-kopf{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap} .bogen-wort{font:var(--type-subtitle);flex:1;min-width:0} .bogen-wert{font:var(--type-metric-sm);font-variant-numeric:tabular-nums} .bogen-offen{font:var(--type-small);color:var(--tinte-fern);font-variant-numeric:tabular-nums} .bogen{display:flex;height:12px;border-radius:6px;overflow:hidden;gap:2px; background:var(--tinte-hauch)} /* Grundfuellung, damit eine Kategorie OHNE eigene Tonklasse sichtbar ist (AP-10.2). Wer eine neunte Zeitkategorie anlegt, bekommt einen grauen Streifen statt eines unsichtbaren -- eine Farbe ist eine Nettigkeit, eine fehlende Farbe darf keine fehlende Zahl vortaeuschen. */ .bogen-teil{height:100%;background:color-mix(in srgb,var(--tinte) 16%,transparent)} .bogen-schlaf{background:color-mix(in srgb,var(--tinte) 34%,transparent)} /* Die Rahmen-Familie: eine monochrome Rampe. Vier eigene Streifen statt eines Sammel-„Rahmens" — zusammengehörig lesbar, einzeln ablesbar. */ .bogen-arbeit{background:color-mix(in srgb,var(--tinte) 26%,transparent)} .bogen-pendeln{background:color-mix(in srgb,var(--tinte) 19%,transparent)} .bogen-vorlesung{background:color-mix(in srgb,var(--tinte) 13%,transparent)} .bogen-termin{background:color-mix(in srgb,var(--tinte) 8%,transparent)} .bogen-fokus{background:var(--moos)} /* Fokus INNERHALB der Pflichtzeit (Fassung 18). Dieselbe Farbfamilie wie der freie Fokus, aber blasser: Es ist Fokus, und er liegt im Rahmen — eine eigene Farbe hätte behauptet, es wäre etwas Drittes. */ .bogen-imrahmen{background:color-mix(in srgb,var(--moos) 52%,transparent)} .bogen-sport{background:var(--ocker)} .bogen-soziales{background:color-mix(in srgb,var(--ocker) 64%,transparent)} .bogen-erholung{background:color-mix(in srgb,var(--ocker) 38%,transparent)} .bogen-rest{background:none} .bogen-marken{display:flex;flex-wrap:wrap;gap:var(--space-5)} .bogen-marke{display:inline-flex;align-items:center;gap:var(--space-3); font:var(--type-caption);color:var(--tinte-still)} /* Kein background hier: Die Farbe kommt aus der Tonklasse (.bogen-schlaf …), die bei gleicher Spezifität sonst von dieser späteren Regel überschrieben würde — dann wäre jeder Legendenpunkt grau, während der Balken bunt bleibt. */ .bogen-punkt{width:9px;height:9px;border-radius:3px;flex:none} /* Der Freiraum-Punkt: Der Streifen ist absichtlich leer (background:none), ein unsichtbarer Legendenpunkt wäre aber eine Marke ohne Marke. */ .bogen-punkt.bogen-rest{background:var(--tinte-hauch);box-shadow:inset 0 0 0 1px var(--linie-stark)} /* „davon 3:00 fokussiert" — der Zusatz an einer Rahmenmarke. Er steht leiser als die Zahl davor: Die Bruttozeit ist die Aussage, der Anteil die Erläuterung. */ .bogen-davon{font:var(--type-caption);color:var(--tinte-fern);opacity:.85} /* Der Standstreifen: sieben Tage als Messanzeige, keine Kette. */ .standstreifen{display:flex;flex-direction:column;gap:var(--space-3)} .standstreifen-reihe{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap} .standstreifen-teil{display:flex;align-items:center;gap:var(--space-3)} .standstreifen-punkt{width:9px;height:9px;border-radius:50%;background:var(--tinte-hauch-stark);flex:none} .standstreifen-punkt.ist-da{background:var(--moos)} .standstreifen-punkt.ist-leer{background:none;border:1px dashed var(--linie-stark)} .standstreifen-wort{font:var(--type-caption);color:var(--tinte-fern)} .standstreifen-zahl{font:var(--type-metric-sm);font-variant-numeric:tabular-nums} .standstreifen-befund{ display:block;width:100%;text-align:left; background:none;border:0;border-left:2px solid var(--ocker); padding:var(--space-3) 0 var(--space-3) var(--space-5); font:var(--type-small);color:var(--tinte-still);cursor:pointer; } .standstreifen-klemmt{font:var(--type-caption);color:var(--glut-schrift)} /* ---------- Die Trendzeile: eine Zahl, ihr Wort, ihre Richtung ---------- EIN ABLESEFELD, KEINE DREI KACHELN (25.08.2026). Fokus, Ablenkung und Umsetzung standen als `repeat(auto-fit,minmax(140px,1fr))` in der rechten Spalte — die ist rund 340 px breit, also passten zwei Kacheln nebeneinander und die dritte sass allein in einer zweiten Reihe. Ein Waisenkind unter zwei Geschwistern ist kein Raster, und die drei Werte gehoeren ohnehin zusammen: Sie beantworten EINE Frage („wie steht die Woche gegen die davor?") in drei Groessen. Jetzt ist es das, was ein Instrument dafuer hat: ein Feld mit drei Zeilen, getrennt durch Haarlinien. Links Wort und Richtung, rechts die Zahl — drei Zahlen buendig untereinander, tabellarisch gesetzt und damit vergleichbar. Kein Waisenkind mehr, keine Breite, die von der Spaltenbreite abhaengt, und ein Drittel weniger Hoehe. */ .trendreihe{display:flex;flex-direction:column; background:var(--flaeche);border-radius:var(--radius-md); box-shadow:var(--neo-auf);overflow:hidden} .trendkachel{ display:grid;grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"wort wert" "trend wert"; align-items:baseline;column-gap:var(--space-5);row-gap:var(--space-1); padding:var(--space-4) var(--gutter-card); } .trendkachel+.trendkachel{border-top:1px solid var(--linie)} .trendkachel-wort{grid-area:wort;color:var(--tinte-fern)} .trendkachel-wert{grid-area:wert;align-self:center; font:var(--type-metric);letter-spacing:var(--tracking-metric); font-variant-numeric:tabular-nums;text-align:right} .trendkachel-trend{grid-area:trend;font:var(--type-caption);color:var(--tinte-fern); display:inline-flex;align-items:center;gap:var(--space-2)} .trendkachel-pfeil{font-size:13px;line-height:1} .trendkachel-trend.ton-positive,.trendkachel-pfeil.ton-positive{color:var(--moos-schrift)} .trendkachel-trend.ton-critical,.trendkachel-pfeil.ton-critical{color:var(--glut-schrift)} /* Bildschirmzeit je App. */ .bildschirm-kopf{display:flex;flex-direction:column;gap:var(--space-2)} .bildschirm-heute{display:flex;flex-direction:column;gap:var(--space-2)} .bildschirm-zahl{font:var(--type-metric-xl);letter-spacing:var(--tracking-metric);margin:0} /* ---------- Die App-Zeile ---------- EIN RASTER, KEINE FLEX-REIHE. Vorher war die Marke „Ablenkung" ein eigenes Element hinter dem Balken — und weil sie nur bei markierten Apps dastand, war die Balkenspalte in jeder Zeile anders breit. Damit waren die Balken NICHT VERGLEICHBAR: Der von WhatsApp hatte mehr Platz als der von TikTok und sah dadurch länger aus, als er war. Ein Diagramm, dessen Skala je Zeile wechselt, ist kein Diagramm. Feste Spalten lösen das: Punkt · Name · Balken · Anteil · Wert. Die Markierung sitzt im Punkt und in der Balkenfarbe, nimmt also keinen Platz mehr weg — und weil der Punkt IMMER da ist (nur unsichtbar, wenn nichts markiert ist), springt auch nichts beim Umschalten. */ .appzeile{ display:grid; /* Der NAME bekommt mehr Platz als der Balken. Umgekehrt stand da „Instagra…", während der Balken daneben doppelt so breit war wie nötig — ein Balken ist ein Verhältnis und braucht keine Länge, ein Name ist eine Auskunft und schon. */ grid-template-columns:8px minmax(0,1.5fr) minmax(44px,1fr) 38px 58px; align-items:center;gap:var(--space-4); width:100%;padding:var(--space-3) var(--space-3); margin:0 calc(var(--space-3) * -1); background:none;border:0;border-radius:var(--radius-sm); text-align:left; } button.appzeile{cursor:pointer} button.appzeile:hover{background:var(--tinte-hauch)} .appzeile-punkt{ width:8px;height:8px;border-radius:50%; background:transparent; } /* Ocker, nicht Glut — dieselbe Groesse, dieselbe Farbe wie im Duell. „Als Ablenkung markiert" ist eine EINSTUFUNG des Nutzers, keine Warnung des Systems; die App-Liste ist der Ort, an dem er sie setzt. */ .appzeile.ist-ablenkung .appzeile-punkt{background:var(--ocker)} .appzeile-name{min-width:0;font:var(--type-small); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .appzeile.ist-ablenkung .appzeile-name{font:var(--type-body-strong);font-size:13px} .appzeile-anteil{font:var(--type-caption);font-variant-numeric:tabular-nums; color:var(--tinte-fern);text-align:right} .appzeile-wert{font:var(--type-small);font-variant-numeric:tabular-nums; color:var(--tinte-still);text-align:right} .appzeile-balken{height:5px;border-radius:3px;background:var(--tinte-hauch);overflow:hidden} .appzeile-fuell{display:block;height:100%;border-radius:3px;background:var(--tinte-still);} .appzeile.ist-ablenkung .appzeile-fuell{background:var(--ocker)} /* Der Rest ist keine App und lässt sich nicht markieren — er tritt zurück. Die alte Regel hat hier den NAMEN mit einem grauen Kasten hinterlegt, weil sie Schriftfarbe und Balkenfläche in einem Selektor zusammengefasst hat. Zwei Dinge, ein Selektor, ein sichtbarer Fehler. */ .appzeile.ist-rest{opacity:.72} .appzeile.ist-rest .appzeile-name{color:var(--tinte-fern);font-style:italic} .appzeile.ist-rest .appzeile-fuell{background:var(--tinte-fern)} /* ---------- Die Abrechnung ---------- Woraus sich der Tag zusammensetzt: Zeile für Zeile, mit Anteil und Wert. Vorher musste man die Differenz aus zwei Zahlen selbst ausrechnen — und wer eine Differenz sieht und keinen Grund, hält sie für einen Fehler. */ .rechnung{display:flex;flex-direction:column;gap:var(--space-4)} .rechnungzeile{ display:grid;grid-template-columns:minmax(0,1fr) 46px 64px; grid-template-areas:"wort anteil wert" "unter unter unter"; align-items:baseline;gap:var(--space-2) var(--space-4); } .rechnungzeile.ist-eingerueckt{padding-left:var(--space-6); border-left:2px solid var(--linie)} .rechnungzeile-wort{grid-area:wort;font:var(--type-body)} .rechnungzeile-unter{grid-area:unter;font:var(--type-caption);color:var(--tinte-fern); text-wrap:pretty} .rechnungzeile-anteil{grid-area:anteil;font:var(--type-small);color:var(--tinte-fern); font-variant-numeric:tabular-nums;text-align:right} .rechnungzeile-wert{grid-area:wert;font:var(--type-body-strong); font-variant-numeric:tabular-nums;text-align:right} .distraktorzeile{display:flex;align-items:center;gap:var(--space-4); padding:var(--space-4) 0} .distraktorzeile+.distraktorzeile{border-top:1px solid var(--linie)} /* Ein Befund im Zeit-Reiter: ein Satz, ein Weg. */ .zeitbefund{display:flex;flex-direction:column;gap:var(--space-3); padding:var(--space-5);border-radius:var(--radius-md); border:0;box-shadow:var(--neo-auf);background:var(--tinte-hauch)} .zeitbefund-text{display:flex;flex-direction:column;gap:var(--space-2)} /* Der Weg aus dem Befund ist ein KNOPF und keine Zeile: In der schmalen rechten Spalte zog ihn die Saeule sonst auf die volle Breite, und er sah aus wie der naechste Listeneintrag. */ .zeitbefund>.knopf,.zeitbefund>.lm-rand{align-self:flex-start} .zeitbefund-satz{font:var(--type-small);text-wrap:pretty} .zeitbefund.ton-critical{border-color:color-mix(in srgb,var(--glut) 42%,transparent); background:var(--glut-hauch)} .zeitbefund.ton-caution{border-color:color-mix(in srgb,var(--ocker) 40%,transparent); background:var(--ocker-hauch)} .rahmen-wert{font:var(--type-small);font-variant-numeric:tabular-nums;color:var(--tinte-still)} /* ---------- Restzustände ---------- KEINE Füllregeln auf `.ist-*`-Namen. Sie sind Beiworte an ganz verschiedenen Bausteinen; `.ist-offen{display:block}` hat die Schrittzeile eines Projekts umgeworfen, weil sie zufällig so heißt. Ein Zustand darf nur das ändern, was er wirklich meint. */ .ist-gelesen{color:var(--tinte-fern)} .hat-fokus .eingabe{border-color:var(--tinte)} .ikon-ghost{border-color:transparent} /* ============================================================ 4 · DIE INSTRUMENTE UND DIE BILANZ ============================================================ */ .instrument{ display:flex;flex-direction:column;gap:var(--space-4); margin:0;padding:var(--space-6); background:var(--flaeche); border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-md); } .instrument-kopf{display:flex;flex-direction:column;gap:var(--space-1);order:-1} .instrument-titel{font:var(--type-subtitle);margin:0} .instrument-unter{font:var(--type-caption);color:var(--tinte-fern);margin:0;text-wrap:pretty} /* HIER STANDEN `.instrument-legende`, `.legende-teil` UND `.legende-punkt` — die Farbpunktreihe ueber einem Bild. Genau ein Instrument hat sie je bestellt: „Fokus gegen Ablenkung". Dessen zwei Spaltenwoerter stehen seit dem 25.08.2026 IM Bild und tragen die Farbe ihrer Spalte; die Legende war damit dieselbe Auskunft zwei Zeilen darueber. Das Feld ist aus `ui/instrumente.js` gefallen, also fallen die Regeln mit (Q8). */ .instrument-bild{width:100%;overflow-x:auto} .instrument-lehre{font:var(--type-blatt-notiz);color:var(--tinte-still);margin:0; padding-top:var(--space-4);border-top:1px solid var(--linie);text-wrap:pretty} .instrument-quelle{font:var(--type-caption);color:var(--tinte-fern);margin:0;text-wrap:pretty} /* Ein SVG skaliert mit der Breite — auf dem Laptop wäre der Verlauf sonst tausend Pixel hoch. Die Deckelung hält das Bild in der Größe, in der es entworfen wurde. */ .diagramm{display:block;width:100%;max-width:460px;height:auto;overflow:visible;margin-inline:auto} .d-fokus{fill:var(--moos)} .d-fokus-still{fill:color-mix(in srgb,var(--moos) 42%,transparent)} /* Die Ablenkungsseite des Duells. OCKER, nicht Glut: Vierzehn voll gesaettigte Glutbloecke waren das Lauteste auf jeder Seite, auf der dieses Bild vorkam — und behaupteten damit dauerhaft einen Alarm, wo nur gemessen wird. Die Herleitung steht im Kopf von `js/ui/instrumente.js`; hier steht nur der Wert. */ .d-bildschirm{fill:var(--ocker)} .d-schlaf{fill:color-mix(in srgb,var(--tinte) 58%,transparent)} .d-schlaf-knapp{fill:color-mix(in srgb,var(--tinte) 26%,transparent)} .d-achse{stroke:var(--linie-stark);stroke-width:1} .d-hilfe{stroke:var(--linie-stark);stroke-width:1;stroke-dasharray:3 3} .d-leerstrich{stroke:var(--linie-stark);stroke-width:1.5;stroke-dasharray:2 2} .d-tag{font:500 9.5px/1 var(--font-sans);fill:var(--tinte-fern)} .d-tag.ist-heute{fill:var(--tinte);font-weight:700} .d-wert{font:500 10px/1 var(--font-sans);fill:var(--tinte-still);font-variant-numeric:tabular-nums} .d-leer{font:400 9.5px/1 var(--font-sans);fill:var(--tinte-fern)} .d-achsenwort,.d-reihenwort{font:500 9.5px/1 var(--font-sans);fill:var(--tinte-fern); letter-spacing:.08em;text-transform:uppercase} /* Die zwei Spaltenwoerter des Duells SIND die Legende — deshalb tragen sie die Farbe ihrer Spalte. Die Schrifttoene und nicht die Fuelltoene: Dieselbe Farbe braucht als Flaeche und als 9,5-px-Wort verschiedene Helligkeiten, und 4,5:1 gilt in beiden Lichtern. */ .d-achsenwort.ist-ablenkung{fill:var(--ocker-schrift)} .d-achsenwort.ist-fokus{fill:var(--moos-schrift)} /* HIER STAND `.d-wert.ist-innen` — die Zahl IM Balken, in Gegenton. Sie kam zum Einsatz, sobald ein Balken so lang war, dass seine Zahl aussen abgeschnitten worden waere. Seit dem 25.08.2026 stehen alle Werte des Duells in einer FESTEN Spalte am Aussenrand und koennen gar nicht mehr anstossen; die Klasse wurde nirgends mehr vergeben (Kodex Q8). */ /* Die Hantel: dein Punkt gefüllt, der Kurs hohl, dazwischen die Strecke. Gefüllt gegen hohl ist der Unterschied zwischen „das bist du" und „das ist der Vergleich" — er braucht keine Legende. */ .d-spanne{stroke:var(--linie-stark);stroke-width:2} .d-spanne.ist-vorn{stroke:var(--moos)} .d-eigen{fill:var(--tinte)} .d-kurs{fill:var(--grund);stroke:var(--tinte-fern);stroke-width:1.5} /* ============================================================ Die Schreibfläche (#schreiben/) Drei Spalten auf Breite, gestapelt auf Schmal. Die mittlere trägt den Editor und bekommt allen übrigen Platz — beim Schreiben ist der Text die Hauptsache, und Gliederung und Quellen sind Beiwerk, das danebenliegt. ============================================================ */ .arbeit-bau { display: flex; flex-direction: column; gap: var(--space-4); } .arbeit-raster { display: flex; flex-direction: column; gap: var(--space-4); } /* DIE LEISTE IST DIE KANTE DER WERKBANK, keine schwebende Reihe. EINE ZEILE SEIT DEM 26.08.2026 (Florians Punkt 2.1). Hier standen zwei Zeilen Symbole — oben, was mit dem Text geschieht, unten, wie die Werkbank steht. Mit Polster und Haarlinie waren das rund 90 px ueber einem Feld, dessen einziger Zweck der Text darunter ist. Jetzt ist es eine Menueleiste (`js/ds/navigation.js`): vier Woerter, die aufklappen, der Zitieren-Knopf und rechts das Satzband mit dem Setzen-Knopf. Die Haarlinie unten schliesst die Leiste gegen die Arbeitsflaeche ab. */ .arbeit-leiste { display: flex; flex-direction: column; padding-bottom: var(--space-2); border-bottom: 1px solid var(--linie); /* SIE BLEIBT OBEN STEHEN. Die Kopfleiste tut es seit jeher (`ds.css`, `position:sticky`), diese hier nicht — und sobald die Seite überhaupt scrollt, wanderte das Werkzeug aus dem Bild, während der Text stehen blieb. `--kopf-hoehe` ist die Höhe der Kopfleiste darüber; die zwei stapeln sich, statt sich zu überdecken. Der Hintergrund ist Pflicht, kein Schmuck: Ohne ihn scheint der Text beim Scrollen durch die Leiste hindurch. `z-index` unter dem der Kopfleiste (23), über dem Raster. */ position: sticky; top: var(--kopf-hoehe); z-index: 12; background: var(--grund); padding-top: var(--space-2); } /* Im Fokus steht nur noch der Editor da. Die Leiste bleibt hell und bedienbar (Florians Vorgabe: „sonst nichts") — der schmale Streifen links sagt, WARUM daneben nichts mehr ist. */ .arbeit-leiste.ist-fokus { box-shadow: inset 2px 0 0 var(--akzent); } /* Das Satzband hat in einer 34-px-Zeile keine 32 px Hoehe mehr. */ .arbeit-leiste .satzband { min-height: 26px; padding: 0 var(--space-3); } .arbeit-leiste .satzband .denkorb { width: 16px; height: 16px; } /* DIE STATUSZEILE DES SATZES (Spez F1). Die eine Zeile, die beantwortet, was gerade passiert — und ob das PDF hinter dem Knopf noch der Text ist, an dem man sitzt. Bis zum 13.08.2026 gab es sie nicht: Man drueckte Setzen, wartete zwei Minuten und erfuhr nichts. Bis zum 26.08.2026 gab es sie als Knopf mit vier Zustaenden; jetzt sagt sie die PHASE im Klartext, und waehrend ein Lauf laeuft, dreht sich der Denk-Orb darin (`ds/effekte.js`) — eine der zwei erlaubten Dauerbewegungen (Kodex Z4), und er steht still, sobald der Lauf steht. Vier Farben fuer sechs Zustaende — `nie` und `veraltet` teilen sich das stille Grau bzw. das Ocker, weil beide dasselbe bedeuten: kein Fehler, aber auch nichts Aktuelles. Rot ist NUR der gescheiterte Lauf. Ein veraltetes PDF rot zu zeichnen hiesse „kaputt", und dann drueckt man Setzen aus Schreck statt aus Absicht. */ .satzband{ display:inline-flex;align-items:center;gap:var(--space-3); min-height:32px;padding:0 var(--space-4); border-radius:var(--radius-pill); background:var(--tinte-hauch); font:var(--type-small);color:var(--tinte-still); white-space:nowrap;max-width:100%; } .satzband-glyph{flex:none} /* Der Orb ist ein `` mit fester Groesse; er darf im Flex-Kontext nicht schrumpfen, sonst zeichnet er in ein Rechteck, das er nicht kennt. */ .satzband .denkorb{flex:none;width:20px;height:20px} .satzband-wort{overflow:hidden;text-overflow:ellipsis} /* `--tinte-still` und nicht `--tinte-fern`: 4,05:1 gemessen, zu wenig. Der Zeitabstand ist klein und leise, aber er soll lesbar sein. */ .satzband-wann{color:var(--tinte-still);font-variant-numeric:tabular-nums} /* Die Hinweise eines GELUNGENEN Laufes — ein Knopf im Band, kein zweites Element daneben: Sie gehoeren zu diesem Lauf und zu keinem anderen. */ .satzband-hinweise{ border:0;background:none;padding:0;margin:0; font:inherit;color:var(--ocker-schrift);cursor:pointer; text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px; } .satzband.ist-nie{color:var(--tinte-still)} .satzband.ist-laeuft{background:var(--ocker-hauch);color:var(--ocker-schrift)} .satzband.ist-fehler{background:var(--glut-hauch);color:var(--glut)} /* Ein Lauf, von dem nichts mehr kommt. Dieselbe Farbe wie ein gescheiterter Satz — fuer den Schreibenden ist es dasselbe: kein PDF und ein Grund. */ .satzband.ist-ueberfaellig{background:var(--glut-hauch);color:var(--glut)} .satzband.ist-veraltet{background:var(--ocker-hauch);color:var(--ocker-schrift)} .satzband.ist-frisch{background:var(--moos-hauch);color:var(--moos-schrift)} /* DER LOG-AUSZUG EINES GESCHEITERTEN LAUFES (Spez F2). Eine aufklappbare Flaeche unter der Leiste und kein rotes Woertchen: „Undefined control sequence, kapitel/SEM-04.tex:214" ist eine Arbeitsanweisung, und die gehoert auf etwas, das stehen bleibt. Bei gruenem Satz ist sie leer und `hidden` — deshalb die eigene Zeile dafuer. */ .arbeit-satzfehler{display:block} .arbeit-satzfehler[hidden]{display:none} /* HIER STAND DAS PDF IN DER APP — ein `` mit Ersatzinhalt und einer Fusszeile. Am 13.08.2026 ausgebaut: Es war immer kleiner als der Bildschirm, konnte weder suchen noch blättern noch Miniaturen zeigen, und es war spürbar träger als Chromes eigener Betrachter. Eine Quelle liest man; dafür will man das ganze Fenster. Das PDF geht jetzt in den Betrachter des Geräts (`arbeit.js`). Damit fällt auch der Umschalter weg, der zwischen „gut" und „schlechter" wählen liess. */ /* Die Hinweise eines Laufes. Ort und Meldung getrennt, weil man beim Überfliegen von sieben Zeilen die Datei sucht und nicht den Satzbau. */ /* Ein Bild, das über dem Editor schwebt. Der Rahmen sagt „hier lasse ich los" — ohne ihn ist das Ziehen ein Blindflug, und man lässt neben dem Editor los, wo der Browser die Datei einfach öffnet. */ .arbeit-editor.nimmt-bild{ outline:2px dashed var(--akzent);outline-offset:-4px; } .satzhinweise{display:flex;flex-direction:column;gap:var(--space-4)} .satzhinweis{ padding:var(--space-4); background:var(--grund);border-radius:var(--radius-md); border-left:2px solid var(--ocker); } .satzhinweis-ort{ display:block; font:var(--type-label);letter-spacing:var(--tracking-label); color:var(--tinte-still); } .satzhinweis-text{margin:var(--space-2) 0 0;font:var(--type-body);color:var(--tinte)} /* Eine Meldung mit Datei und Zeile führt seit dem 26.08.2026 zur Stelle. Nur DANN sieht sie auch anklickbar aus: `ist-begehbar` setzt der Bau nur, wenn die Datei zu einem Kapitel gehört — ein Fehler in `kapitel/anhang/…` bleibt Text, statt einen toten Knopf anzubieten. */ .satzhinweis.ist-begehbar{border-left-color:var(--akzent)} button.satzhinweis-ort{ appearance:none;background:none;border:0;padding:0; font:var(--type-label);letter-spacing:var(--tracking-label); color:var(--akzent);cursor:pointer;text-align:left; text-decoration:underline;text-underline-offset:3px; text-decoration-color:color-mix(in oklab,var(--akzent) 40%,transparent); } button.satzhinweis-ort:hover{text-decoration-color:var(--akzent)} button.satzhinweis-ort:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:2px} /* Was der Lauf über sich selbst sagt — Meldung und Protokolladresse. Beide wurden bis zum 26.08.2026 geschrieben und nirgends gezeigt. */ .satzhinweis-nachsatz{ margin:var(--space-2) 0 0;font:var(--type-small);color:var(--tinte-still); } .satzhinweis-protokoll{ display:inline-block;margin-top:var(--space-2); font:var(--type-small);color:var(--tinte-still); } .satzhinweis-protokoll:hover{color:var(--akzent)} /* DIE GANZE BREITE. Jede andere Bühne hört bei 640 bzw. 720 px auf, weil Fließtext ab etwa 70 Zeichen je Zeile unlesbar wird. Hier steht kein Fließtext, sondern ein Codeeditor zwischen zwei Spalten — und dieselbe Regel war fatal: Von 720 px blieben der Mitte rund 150 px, und LaTeX brach nach jedem zweiten Zeichen um. `1760px` und nicht `none`: Auf einem sehr breiten Monitor wären drei Spalten über 2500 px auch wieder falsch — die Augen müssten wandern. Das ist die Breite, ab der ein zweiter Blick nichts mehr gewinnt. */ body.ist-schreiben .buehne { max-width: 1760px; padding-left: var(--space-6, 20px); padding-right: var(--space-6, 20px); /* OBEN AUCH (27.08.2026, Florians vierter Punkt). Seit das Suchband im ganzen Arbeitsbereich wegbleibt (`app/suche.js`), stand an seiner Stelle nichts — und darunter noch die 32 px, die jede andere Buehne unter der Kopfleiste beginnen laesst. Zusammen war das ein Streifen Grund, breiter als die Menueleiste darunter. Die Leiste rueckt hoch; was sie freigibt, bekommt das Dock, und zwar gemessen und nicht geschaetzt (`arbeit/platz.js` misst die wirkliche Oberkante). */ padding-top: var(--space-3, 12px); /* Die 96 px Luft unter jeder Bühne sind hier 96 px Grund, die Seite scrollen zu lassen — auf einer Schreibfläche die eine Bewegung, die man nicht will: Man greift zum Scrollen im Text und verschiebt die Seite. Der Editor bemisst seine Höhe ohnehin am Fenster; unter der Fusszeile kommt nichts mehr. */ padding-bottom: var(--space-4, 16px); } /* ============================================================ DAS FLAECHENRASTER (Spez E2) FUENF PLAETZE IN EINER REIHE: Gliederungs-Leiste · Editor · Quellen · Belege+Notizen · PDF-Vorschau. Welche davon stehen und wie breit, entscheidet `arbeit/views.js` und schreibt es als `--arbeit-spalten` hierher — samt der Griffspalte zwischen je zwei sichtbaren Flaechen. Bis zum 26.08.2026 stand die Belegung im Stylesheet: zwei Spalten, `minmax(260px, 420px) minmax(0, 1fr)`, und eine `:has()`-Regel fuer die dichte Gliederung. Das war eine Wette darauf, wie jemand arbeitet — und sie ging daneben, sobald man beim Schreiben eine Quelle nachschlagen wollte. Jetzt entscheidet die Hand, und das Stylesheet stellt nur noch das Raster. ============================================================ */ .arbeit-dock { display: grid; grid-template-columns: var(--arbeit-spalten, minmax(0, 1fr)); align-items: stretch; /* Der Editor soll den Bildschirm füllen, nicht die Seite wachsen lassen: Wer schreibt, scrollt im Text und nicht an der Seite. `height` UND `min-height:0` — nicht `min-height` allein. Bis zum 26.08.2026 stand hier nur die Mindesthöhe, und damit galt der Satz darüber für den Editor, aber für sonst nichts: Eine `auto`-gesizte Grid-Zeile wächst auf die max-content-Höhe ihrer längsten Spalte. Die Quellenliste zog die Zeile also auf ihre volle Länge, `.arbeit-view` erreichte seine Überlaufgrenze nie, sein `overflow-y:auto` griff nicht — und stattdessen wuchs die SEITE. Man scrollte durch die Quellen mit der Gesamt-Scrollbar, und die Werkzeugleisten wanderten dabei aus dem Bild. Dem Editor ist es nie aufgefallen, weil er eine feste `height` trägt; genau die bekommt die Zeile jetzt auch. */ height: var(--arbeit-platz, calc(100dvh - 320px)); min-height: 0; } /* ------------------------------------------------- Spalten und Gruppen EINE SPALTE ist eine Bahn des Docks. Darin stehen eine oder mehrere GRUPPEN übereinander, zwischen je zweien ein waagerechter Griff — genau so, wie zwischen zwei Spalten ein senkrechter steht. Welche Höhen das sind, rechnet `dockplan.js rasterZeilen()` und schreibt es als `--arbeit-zeilen` hierher. ZEILEN GIBT ES SEIT DEM 28.08.2026 (Florians achter Punkt: „ich kann eine Fläche nicht unter oder über eine andere platzieren"). Bis dahin war eine Spalte selbst die Gruppe — eine View konnte NEBEN eine andere oder als Reiter DARÜBER, aber nie darunter. EINE GRUPPE: oben die Reiterleiste, darunter der Körper mit den gestapelten Views. Sie steht OFFEN auf dem Grund — drei bis fünf Kästen nebeneinander wären fünf gleich laute Stimmen. Getrennt wird durch Abstand und die Haarlinie des Griffs. */ .dock-spalte { display: grid; grid-template-rows: var(--arbeit-zeilen, minmax(0, 1fr)); min-width: 0; min-height: 0; } .dock-gruppe { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; position: relative; } .dock-koerper { display: grid; min-width: 0; min-height: 0; } /* Alle Flächen einer Gruppe liegen auf DEMSELBEN Platz — die nicht aktive ist `hidden`, nicht entfernt (`flaechen.js`, Regel 2). Ohne `grid-area` stünden sie untereinander, sobald zwei sichtbar wären. */ .dock-koerper > .arbeit-view { grid-area: 1 / 1; } /* Die Reiterleiste. Sie steht AUCH bei einer einzelnen Fläche: Sie ist der Griff, an dem man sie wegzieht — eine Leiste, die erst beim Stapeln erscheint, macht das Wegziehen zu einer Entdeckung. */ .dock-reiter { display: flex; align-items: stretch; gap: 2px; padding: 0 var(--space-3) var(--space-2); overflow-x: auto; scrollbar-width: none; } .dock-reiter::-webkit-scrollbar { display: none; } .dock-reiter-knopf { display: flex; align-items: center; gap: var(--space-2); flex: none; padding: var(--space-2) var(--space-3); border: 0; background: none; border-radius: var(--radius-xs); font: var(--type-label); letter-spacing: var(--tracking-label); color: var(--tinte-fern); cursor: grab; white-space: nowrap; } .dock-reiter-knopf:hover { color: var(--tinte-still); background: var(--tinte-hauch); } .dock-reiter-knopf.ist-aktiv { color: var(--tinte); background: var(--tinte-hauch); } .dock-reiter-knopf:active { cursor: grabbing; } .dock-reiter-glyph { display: flex; color: currentColor; } /* Die Gruppe, aus der gerade gezogen wird, tritt zurück — sonst sieht es aus, als läge die Fläche noch dort. */ .dock-gruppe.gibt-ab { opacity: .6; } /* WO ES LANDET. Ohne diesen Streifen ist das Ziehen ein Blindflug: „hinein" und „daneben" unterscheiden sich nur um ein paar Pixel Mauszeiger. */ .dock-gruppe.nimmt-links::after, .dock-gruppe.nimmt-rechts::after, .dock-gruppe.nimmt-hinein::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-sm); } .dock-gruppe.nimmt-oben::after, .dock-gruppe.nimmt-unten::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius-sm); } .dock-gruppe.nimmt-hinein::after { background: var(--akzent-hauch); outline: 2px solid var(--akzent); outline-offset: -2px; } .dock-gruppe.nimmt-links::after { border-left: 3px solid var(--akzent); background: linear-gradient(90deg, var(--akzent-hauch), transparent 40%); } .dock-gruppe.nimmt-rechts::after { border-right: 3px solid var(--akzent); background: linear-gradient(270deg, var(--akzent-hauch), transparent 40%); } /* OBEN UND UNTEN, seit es Zeilen gibt. Derselbe Streifen um 90° gedreht — ohne ihn ist „darüber" von „hinein" nicht zu unterscheiden, und das Ziehen wäre ein Blindflug. */ .dock-gruppe.nimmt-oben::after { border-top: 3px solid var(--akzent); background: linear-gradient(180deg, var(--akzent-hauch), transparent 40%); } .dock-gruppe.nimmt-unten::after { border-bottom: 3px solid var(--akzent); background: linear-gradient(0deg, var(--akzent-hauch), transparent 40%); } /* Die Breite EINER Griffspalte. Sechs Pixel sind schmal genug, um nicht als Spalte zu lesen, und breit genug, um sie mit der Maus zu treffen — die Trefferflaeche selbst ist groesser (siehe `.arbeit-griff::before`). */ :root { --arbeit-griff: 6px; } /* Eine Flaeche steht OFFEN auf dem Grund: kein Rahmen, kein Relief. Drei bis fuenf Kaesten nebeneinander waeren fuenf gleich laute Stimmen — gehoben ist genau eine, und das ist der Editor (siehe unten). Getrennt wird durch Abstand und die Haarlinie des Griffs. */ /* DAS POLSTER IST GEWACHSEN (26.08.2026, Florians Punkt 2.3.1: „Die Inhalte sind zu nah an den Rändern der Module"). Vorher 8 px innen und NULL an den beiden aeusseren Flaechen — Quellen, Belege und PDF standen damit direkt an der Kante, und eine Liste, deren Zeilen die Kante beruehren, liest sich gedrungen. Jetzt 12 px, und die aeusseren behalten ihres: Die Buehne hat ihr eigenes, aber es liegt AUSSERHALB des Bildlaufs — der Inhalt scrollt darunter durch. */ .arbeit-view { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; min-height: 0; padding: 0 var(--space-5); overflow-y: auto; overscroll-behavior: contain; } /* `display:flex` schlaegt die `[hidden]`-Regel des Browsers. Ohne diese Zeile bliebe eine ausgeblendete Flaeche als Rasterfeld stehen — und das Raster haette eine Spalte mehr, als `--arbeit-spalten` kennt. */ .arbeit-view[hidden] { display: none; } /* HIER STAND `padding-left:0` fuer die erste und `padding-right:0` fuer die letzte Flaeche, mit der Begruendung „die Luft gibt die Buehne". Sie gibt sie aussen um das Dock herum — der Inhalt der Flaeche scrollt aber INNEN, und dort stand er dann an der Kante. */ /* DER GRIFF: eine Haarlinie mit einer Trefferflaeche darum. Sichtbar ist die Linie, greifbar sind 13 px — die 24-px-Regel (Kodex Z2) gilt fuer Bedienelemente, die man TRIFFT; eine Kante zieht man, und dafuer sucht der Zeiger ohnehin die Linie. Die Tastatur kommt ueber `tabindex` und die Pfeiltasten daran (`arbeit/views.js`). */ .arbeit-griff { position: relative; width: var(--arbeit-griff); cursor: col-resize; background: var(--linie); background-clip: content-box; border-left: 1px solid var(--linie); border-right: 1px solid transparent; align-self: stretch; } .arbeit-griff[hidden] { display: none; } .arbeit-griff::before { content: ""; position: absolute; inset: 0 -4px; } .arbeit-griff:hover, .arbeit-griff:focus-visible { border-left-color: var(--linie-stark); outline: none; } .arbeit-griff:focus-visible { border-left-color: var(--tinte-still); } /* DERSELBE GRIFF, UM 90° GEDREHT — zwischen zwei Gruppen einer Spalte. Er trägt dieselbe Klasse, weil er dieselbe Sache ist: eine Haarlinie mit einer Trefferfläche darum, ziehbar mit Zeiger und mit den Pfeiltasten (`arbeit/views.js`, ein Bauplan für beide Richtungen). Was sich dreht, sind Breite/Höhe, Cursor und die Kante, die die Linie trägt. */ .arbeit-griff.ist-waagerecht { width: auto; height: var(--arbeit-griff); cursor: row-resize; border-left: 0; border-right: 0; border-top: 1px solid var(--linie); border-bottom: 1px solid transparent; justify-self: stretch; align-self: auto; } .arbeit-griff.ist-waagerecht::before { inset: -4px 0; } .arbeit-griff.ist-waagerecht:hover, .arbeit-griff.ist-waagerecht:focus-visible { border-top-color: var(--linie-stark); } .arbeit-griff.ist-waagerecht:focus-visible { border-top-color: var(--tinte-still); } /* Waehrend gezogen wird, gehoert der ganze Zeiger der Kante — sonst markiert der Zug nebenbei Text im Editor. */ body.zieht-kante { cursor: col-resize; user-select: none; } body.zieht-kante-quer { cursor: row-resize; user-select: none; } /* ---- Die Gliederungs-Leiste (Spez E4) ---- Eine Zeile je Kapitel: Nummer, Titel, Status-Punkt. Die Kennung steht im `title` — „SEM-04" ist ein Anker fuer Verweise, kein Wort, das man beim Schreiben liest, und in 240 px nimmt es dem Titel ein Drittel. */ .kapitelleiste { display: flex; flex-direction: column; gap: var(--space-4); } .kapitelleiste-liste { display: flex; flex-direction: column; } .kapitelleiste-zeile { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 28px; padding: var(--space-2) var(--space-3); border: 0; background: none; border-radius: var(--radius-xs); font: var(--type-small); color: var(--tinte-still); text-align: left; cursor: pointer; } .kapitelleiste-zeile:hover { background: var(--tinte-hauch); color: var(--tinte); } .kapitelleiste-zeile.ist-aktiv { background: var(--tinte-hauch); color: var(--tinte); font: var(--type-small-strong); } /* Die Einrueckung IST die Gliederung — sie kommt aus `eltern`, nicht aus einer Nummer im Titel (Kapitelmodell v2). */ .kapitelleiste-zeile[data-ebene="1"] { padding-left: var(--space-6); } .kapitelleiste-zeile[data-ebene="2"] { padding-left: var(--space-8); } .kapitelleiste-zeile[data-ebene="3"] { padding-left: var(--space-9); } /* Die Nummer haelt ihren Platz auch dort, wo es keine gibt — sonst springen die Titel um ein paar Pixel gegeneinander, und die Spalte franst aus. */ /* DIE NUMMER IST DIE ORIENTIERUNG, nicht ein Beiwerk. Bis zum 26.08.2026 stand sie in `--tinte-fern` — blasser als der Titel daneben, obwohl man in einer Gliederung nach „2.3" sucht und nicht nach dem Wortlaut. Jetzt trägt sie dieselbe Tinte wie der Titel und etwas Gewicht; blass bleibt nur, was keine hat. `4ch` statt `3ch`: „2.10" ist vier Zeichen breit, und bei drei sprangen die Titel ab dem zehnten Unterkapitel gegeneinander. */ .kapitelleiste-nummer { flex: none; min-width: 4ch; color: var(--tinte-still); font-variant-numeric: tabular-nums; font-weight: 600; } .kapitelleiste-zeile.ist-aktiv .kapitelleiste-nummer { color: var(--tinte); } .kapitelleiste-nummer.ist-leer { color: var(--tinte-fern); font-weight: inherit; } /* Die Kennung (`MV-01`) stand bisher NUR im `title` — also nur für den, der mit der Maus stehen bleibt. Sie ist aber der Anker, unter dem ein Kapitel überall sonst auftaucht: in Belegen, in Satzfehlern, im Spiegelordner. Sichtbar, aber still: kleiner und blasser als alles andere in der Zeile. */ .kapitelleiste-kennung { flex: none; font: var(--type-caption); color: var(--tinte-fern); font-variant-numeric: tabular-nums; } .kapitelleiste-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kapitelleiste-zeile .ampel { flex: none; } .kapitelleiste-fuss { display: flex; } /* ---- Belege + Notizen ---- Die Notiz gehoert zur QUELLE und nicht zum Kapitel (Spez G) — deshalb eine Auswahl darueber und ein Feld darunter, und nicht zwoelf Felder untereinander. */ .arbeit-notizen { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--hairline); } .arbeit-notizen-kopf { display: flex; align-items: baseline; gap: var(--space-4); } .arbeit-notizen-kopf .lm-label { color: var(--tinte-still); } /* Der Stand des Feldes — „sichert …", „gesichert", ein Grund. Er steht NEBEN der Ueberschrift und nicht unter dem Feld: Dort sieht man ihn waehrend des Tippens. */ .arbeit-notiz-stand { margin-left: auto; font: var(--type-caption); color: var(--tinte-fern); } /* ---- Die PDF-Vorschau (Spez F4) ---- */ /* DAS PDF SO GROSS WIE DER PLATZ (26.08.2026, Florians Nachsatz: „Das PDF sollte im Schreib Editor in moeglichst grosser Groesse angezeigt werden"). Hier stand ein Kopfstreifen mit „PDF" und „Neu laden" — 28 px, und „PDF" steht schon im Reiter darueber (Kodex G3). Der eine Griff, der bleibt, schwebt jetzt in der Ecke des Rahmens. */ .arbeit-vorschau { position: relative; display: flex; flex-direction: column; min-height: 0; height: 100%; } /* Er tritt erst hervor, wenn der Zeiger in der Flaeche steht — ein Griff, der dauerhaft ueber dem Dokument liegt, ist ein Fleck darauf. */ .arbeit-vorschau-neu { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; background: var(--flaeche); box-shadow: var(--neo-auf); opacity: 0; } .arbeit-vorschau:hover .arbeit-vorschau-neu, .arbeit-vorschau-neu:focus-visible { opacity: 1; } .arbeit-vorschau-rahmen { flex: 1 1 auto; width: 100%; min-height: 320px; border: 0; border-radius: var(--radius-md); background: var(--grund); } .arbeit-vorschau-hinweis { margin: 0; padding: var(--space-6) var(--space-4); font: var(--type-small); color: var(--tinte-still); text-wrap: pretty; } /* ---- Quellen und Belege ---- Beide sind Flaechen wie die anderen drei: offen auf dem Grund, ohne eigenen Rahmen. Die INNEREN Kaesten (Kopf, Liste, Ablage) ordnen sich selbst — hier steht nur, dass sie untereinander stehen. */ .arbeit-quellen, .arbeit-belege { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .arbeit-belege-titel { margin: 0; font: var(--type-body-strong); color: var(--tinte); text-wrap: pretty; } /* ---- Die Ablage: wohin eine Quelle fällt ---- Eine MULDE, kein Kasten: Was Platz anbietet, ist eingedrückt, nicht gehoben (`--neo-ein`). Sie nimmt den Rest der Spalte ein — der Raum unter den Belegen ist nicht übrig, er ist die Fläche. Deshalb `flex:1` und keine feste Höhe: Bei zwei Belegen ist sie gross, bei zwölf ein Streifen, und beides ist richtig. */ .tisch-ablage { /* Wächst in den freien Rest der Spalte, aber nicht ins Uferlose: Eine Mulde über 400 px ist keine Ablage mehr, sondern ein Loch. */ flex: 1 1 auto; min-height: 88px; max-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6) var(--space-5); border-radius: var(--radius-sm); box-shadow: var(--neo-ein); color: var(--tinte-still); text-align: center; } .tisch-ablage-glyph { color: var(--tinte-fern); line-height: 1 } .tisch-ablage-wort { font: var(--type-small); color: var(--tinte-still); text-wrap: pretty } /* Das leere Kapitel darf mehr sagen als das volle — es ist der Zustand, in dem man nicht weiss, was zu tun ist. */ .tisch-ablage.ist-leer { min-height: 160px } /* Die ganze Flaeche ist das Ziel — Mulde und Mooskante kommen aus der allgemeinen `.ist-ziel`-Regel (ds.css), die für JEDE Ablagefläche dieser App gilt. Hier kommt nur dazu, was diese Fläche allein weiss: dass die Mulde am Fuss der Spalte die Stelle ist, an der die Karte landet. */ .arbeit-belege.ist-ziel .tisch-ablage { background: var(--moos-hauch) } .arbeit-belege.ist-ziel .tisch-ablage-wort { color: var(--moos-schrift) } /* Auf dem Schmalen gibt es keine Spalten mehr — dort steht eine Flaeche unter der anderen, und die Griffe fallen weg: Eine Breite zu ziehen, wenn es nur eine Breite gibt, ist ein Griff ins Leere. */ @media (max-width: 900px) { /* `height:auto` HIER, weil die Grundregel seit dem 26.08.2026 eine feste Höhe setzt (damit die Spalten in sich scrollen). Auf dem Schmalen steht eine Fläche UNTER der anderen — dort wäre eine Fensterhöhe für alle zusammen genau falsch. */ .arbeit-dock { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; } /* Auch die Zeilen fallen weg: Wer 400 px Breite hat, stapelt ohnehin alles untereinander — feste Höhen daneben wären ein zweites Raster über dem, das der schmale Schirm schon vorgibt. */ .dock-spalte { grid-template-rows: none; } .arbeit-griff { display: none; } .arbeit-view { padding: 0; max-height: 60vh; } .arbeit-view:not([hidden]) + .arbeit-view:not([hidden]) { padding-top: var(--space-5); border-top: var(--hairline); } } /* HIER STAND `.arbeit-ansicht` — die Pillenschiene „Schreiben | Schreibtisch" ganz links in der Werkzeugleiste. Sie ist in die Pfadleiste aufgegangen: dort heisst dieselbe Wahl `Schreibtisch ▾` und steht neben dem Weg dorthin (Kodex G3). */ /* =========================================================================== DIE SCHREIBFLÄCHE Sie war bis zum 13.08.2026 die einzige Fläche der App, die NICHT im Designsystem stand. Nicht als Absicht, sondern aus Versehen: Jede Regel hier griff auf Namen zu, die es nie gab — `--flaeche-1`, `--flaeche-2`, `--rund-2`, `--raum-4`. Acht Namen, keiner davon in `tokens.css`. Was man sah, waren durchweg die Rückfallwerte, die dahinter standen: `rgba(127,127,127,.10)`. Also überall dasselbe systemgraue Nichts. Deshalb sah die Fläche, an der die Arbeit entsteht, aus wie ein Entwurf neben einer fertigen App. Kein Geschmacksurteil — nachgezählt. Jetzt gilt hier, was überall gilt: `--platte`, `--linie`, `--tinte`, `--stempel`, die `--space-*`-Leiter und die `--radius-*`-Stufen. UND EINE HALTUNG. Drei Spalten mit je einem Rahmen sind drei gleich laute Kästen. Der Editor ist aber nicht gleich laut — er ist der Grund, warum man hier ist. Er bekommt die Platte und die Linie; Gliederung und Quellen stehen offen auf dem Grund und werden von Abstand und Haarlinie gegliedert, nicht von Rahmen. Wer schreibt, soll den Text sehen. =========================================================================== */ /* ---- Editor ---- */ .arbeit-editor { border-radius: var(--radius-lg); overflow: hidden; /* Feste Höhe statt mitwachsend: Ein Editor, der mit dem Text wächst, schiebt die Fußzeile mit dem Speicherzustand aus dem Bild — und genau die will man beim Schreiben im Auge behalten. GEMESSEN, NICHT GESCHÄTZT. Hier stand `calc(100vh - 280px)`, und die 280 waren geraten. Wirklich stehen über dem Editor 323 px. Die Fußzeile lag damit bei JEDER Fensterhöhe 95 px unter dem Rand: Der Speicherzustand, also die eine Auskunft, für die die Zeile da ist, war nie zu sehen, ohne zu scrollen. Bei 800, 900, 1000 und 1200 px nachgemessen — immer dieselben 95 px, weil ein fester Abzug den Fehler mitnimmt statt ihn auszugleichen. `--arbeit-platz` setzt die Bühne beim Aufbauen aus der tatsächlichen Lage (`schreiben.js`). Der Rückfallwert hier gilt nur für die Millisekunde davor und für den Fall, dass JavaScript nicht dazu kommt. */ height: var(--arbeit-platz, calc(100dvh - 320px)); min-height: 320px; /* SCHLICHT UND DUNKEL — die Fläche tritt zurück, der Text steht vorn. Bis zum 26.08.2026 war der Editor die einzige GEHOBENE Platte der Bühne: `--flaeche-hoch` plus Relief. Das ist die richtige Behandlung für eine Karte, die man ansieht, und die falsche für eine Fläche, in die man stundenlang schreibt — sie drängt sich vor den Text, den sie trägt. Jetzt derselbe Grund wie die Bühne, und statt des Reliefs eine Haarlinie: Sie sagt, wo das Schreibfeld aufhört, ohne es anzuheben. Im Porzellan-Licht bleibt er hell — die Tokens drehen das mit. */ background: var(--grund); border: 1px solid var(--linie); } .arbeit-editor .cm-editor { height: 100%; } /* ---- Fokus-Schreibmodus ---- `body.ist-schreibfokus` (gesetzt in `arbeit/fokus.js`, Cmd-Shift-F oder das Werkzeug mit `maximize` neben dem Spiegel): ALLE Views ausser dem Editor treten ab. Sonst nichts — die Werkzeugleiste bleibt hell, der Editor behaelt die Breite, die er hatte, die Kopfleiste bleibt stehen, und Escape fuehrt genau dorthin zurueck, wo man stand. ES IST DIE GRUPPE, DIE VERSCHWINDET, NICHT DIE VIEW. Hier stand bis zum 26.08.2026 `.arbeit-feld:not([data-flaeche="editor"]){display:none}` — eine Regel aus dem festen Raster (E-17), in dem die Felder selbst die Rasterzellen waren. Seit dem Dock (E-22) sind es die `.dock-gruppe`: Ausgeblendet wurde also nur der INHALT, und was stehenblieb, waren leere Kaesten mit Reiterleiste. Genau das hat Florian am 26.08.2026 als „der Knopf neben Spiegel ist kaputt" gemeldet. `data-hat-editor` setzt `arbeit/views.js` — nur das Dock weiss, in welcher Gruppe der Editor gerade liegt (Kodex G3). Und `views.zeigen ("editor")` holt ihn beim Einschalten nach vorn, falls er als Reiter unter einer anderen View lag. HIER STANDEN AUSSERDEM zwei Regeln, die mehr taten als ausblenden: eine dimmte die Werkzeugleiste auf 35 %, die andere zwang den Editor auf 820 px Lesebreite. Beide sind gefallen — Florians Vorgabe ist „einfach nur noch alle Module ausser der Editor ausgeblendet, sonst nichts". */ body.ist-schreibfokus .arbeit-dock { grid-template-columns: minmax(0, 1fr) } body.ist-schreibfokus .dock-gruppe:not([data-hat-editor]) { display: none } body.ist-schreibfokus .dock-gruppe[data-hat-editor] .dock-reiter { display: none } body.ist-schreibfokus .arbeit-griff { display: none } body.ist-schreibfokus .arbeit-view[data-view="editor"] { padding: 0 } /* ============================================================ RUHE (Spez E5) AUF `#arbeit` UND `#schreiben` GIBT ES KEINE CHROMKANTE UND KEINEN METALLRAND. Beide sind Zeichen fuer „das hier ist das Instrument", und sie sind sparsam eingesetzt, weil sie sonst Textur werden (`ds/effekte.js`). Auf dieser Buehne waeren sie genau das: Ein wandernder Verlauf am Setzen-Knopf zieht das Auge auf den Rand, waehrend der Blick in der Mitte des Textes stehen soll. Die eine Bewegung, die hier bleibt, ist der Denk-Orb in der Statuszeile — und der sagt etwas (Kodex Z4). `.lm-rand` bekommt seinen WebGL-Ring in `ds/effekte.js` per `querySelectorAll(".lm-rand")` nach jedem Anstrich. Ihn hier auszuschalten heisst, den Rahmen selbst unsichtbar zu machen: Der Ring liegt als `` darin, und ohne den Rahmen findet ihn niemand. UND DIE KARTEN WERDEN FLACH. Das Neo-Relief bezeichnet EBENEN, nicht Dinge (`css/tokens.css`) — auf einer Flaeche, die neben vier anderen steht, bezeichnet es gar nichts mehr und macht nur Kanten. Die eine gehobene Flaeche bleibt der Editor: Er ist der Grund, warum man hier ist. ============================================================ */ /* Der Rahmen bleibt (er traegt den Knopf), sein wandernder Verlauf geht: `.lm-rand::before` IST die Chromkante. Das 1-px-Polster faellt mit — ohne Kante waere es nur eine Fuge, die den Knopf verschiebt. */ body.ist-schreiben .lm-rand { padding: 0; } body.ist-schreiben .lm-rand::before { display: none; } /* Und der WebGL-Ring wird auf dieser Buehne gar nicht erst angelegt (`ds/effekte.js`, `metallraenderNachziehen`). Diese Zeile ist der Riegel dahinter, fuer den Fall, dass einer aus einer frueheren Buehne am selben Knoten haengengeblieben ist. */ body.ist-schreiben .metallrand { display: none; } /* Flach statt Neo-Kissen: Zitat-Chips im Text, Belegzeilen, die Ablage und die Notizflaeche. Was Struktur braucht, bekommt eine Haarlinie. */ body.ist-schreiben .zitat-chip { box-shadow: none; border: 1px solid var(--linie); } body.ist-schreiben .arbeit-dock .tisch-beleg, body.ist-schreiben .arbeit-dock .quellzeile, body.ist-schreiben .arbeit-dock .platte { box-shadow: none; } body.ist-schreiben .arbeit-dock .tisch-ablage { box-shadow: none; border: 1px dashed var(--linie); } /* Der Zitat-Chip (editor.js, zitatChips): Die Rohform `\autocite[…]{…}` wird als „Vgl. Müller 2024, S. 12" angezeigt, solange der Cursor nicht darin steht. Ein Klick stellt ihn hinein — dann klappt der Chip auf. */ .zitat-chip{ display:inline-block;padding:0 6px;margin:0 1px; border-radius:var(--radius-pill); background:var(--moos-hauch,var(--tinte-hauch)); color:var(--moos-schrift,var(--tinte)); font-size:.85em;line-height:1.5;cursor:pointer; border:0;box-shadow:var(--neo-auf); white-space:nowrap; } /* Ein Schlüssel, den der Bestand nicht kennt — dieselbe Auskunft wie die Unterschlängelung des Prüfers, nur am Chip. */ .zitat-chip.ist-fremd{ background:transparent;color:var(--ocker); border-color:currentColor;border-style:dashed; } /* Wie der Text AUSSIEHT, steht im Theme in `editor.js` und nicht hier. Zwei Quellen fuer dieselbe Eigenschaft heissen, dass die Reihenfolge im Stylesheet entscheidet — und CodeMirror haengt seine Regeln zur Laufzeit in den Kopf. Am 13.08.2026 hat eine Regel hier das `padding-bottom: 40vh` des Themes ueberschrieben; das ist die Luft, die man braucht, um den letzten Absatz in die Bildschirmmitte zu scrollen statt an den Rand. */ /* ---- Werkzeugleiste ---- */ /* Drei Zonen, eine Ebene: links Zitieren (primaer) + Bausteine + "Einfuegen", rechts der Satzstand mit Setzen und PDF. Vorher standen sechs Elemente in sechs Erscheinungsformen nebeneinander, ohne dass die Reihenfolge etwas sagte. */ /* Zitieren bleibt beschriftet — es ist das Werkzeug, das am haeufigsten greift. `.werkzeug-wort` ist sonst per ds.css bis auf 0 zusammengeschoben (nur `.ist-gewaehlt` oeffnet es); `.ist-primaer` ist die zweite, staendig offene Tuer dafuer. */ .arbeit-leiste .werkzeug.ist-primaer .werkzeug-wort{ max-width:12ch;opacity:1;padding-left:var(--space-3); } /* VIERZIG PIXEL, AUCH IN DER GRUPPE. `.werkzeuggruppe .werkzeug` ist in ds.css auf 32 px Höhe gesetzt — gemessen sind die vier Bausteinknöpfe damit 28×32, und das ist unter der Grenze, die für jede Trefferfläche dieser App gilt. Gesehen hat es niemand, weil der Layout-Wächter die Schreibfläche nicht besucht: Sie steht nicht in der Bühnenliste von `probe/durchlauf.mjs`. Gemessen am 25.08.2026 mit dem Wächter von Hand, in beiden Lichtern und beiden Breiten. Der Griff ist hier eng gesetzt und trotzdem hoch — schmal darf er bleiben (er sitzt in einer Reihe), hoch muss er sein; dieselbe Abwägung wie beim Klappknoten der Gliederung. */ .arbeit-leiste .werkzeuggruppe .werkzeug{min-height:40px} /* Die Haarlinie zwischen Zitieren und den vier Bausteinsymbolen — ein leeres Element, das nur seine linke Kante zeigt. */ .werkzeug-trenner{ align-self:stretch;flex:none;width:0; border-left:var(--hairline);padding-left:var(--space-4); } /* HIER STAND `.arbeit-leiste-ergebnis` — die rechte Gruppe der oberen Werkzeugzeile. Sie ist mit der zweiten Zeile gegangen: Was rechts steht, ordnet jetzt `.menueleiste-rechts` (`css/ds.css`). */ /* ---- Fuß ---- EINE STATUSZEILE, KEINE REIHE (26.08.2026, Florians Punkt 2.3.2: „visuell zu dick"). Sie war umbruchfaehig, hatte 16 px Abstand zwischen den Aussagen und 6 px Polster oben — bei drei Aussagen und einem schmalen Fenster wurden daraus zwei Zeilen, und die Buehne rechnete mit 56 px dafuer. Jetzt: eine Zeile, 22 px, Haarlinie oben, und was nicht passt, wird gekuerzt statt umgebrochen. `FUSS_UND_LUFT` in `arbeit/platz.js` ist mitgegangen (34). 12 px Abstand statt 16 — genug, dass „Gespeichert 14:32" und „1 Fehler" zwei Aussagen bleiben und nicht ein Satz werden. */ .arbeit-fuss { display: flex; align-items: center; gap: var(--space-5); flex-wrap: nowrap; min-height: 22px; padding-top: var(--space-2); border-top: var(--hairline); font: var(--type-caption); color: var(--tinte-still); } .arbeit-fuss > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Der Speicherstand IST ein Knopf (wie `.setzstand`), aber nur SIEHT er danach aus, wenn er auch etwas zu tun hat — ein Fehlergrund. Sonst ist er reine Auskunft: kein Rahmen, kein Zeiger, `disabled`. */ .arbeit-zustand { font: inherit; font-variant-numeric: tabular-nums; background: none; border: 0; padding: 0; margin: 0; color: var(--tinte-fern); cursor: default; } .arbeit-zustand.ton-still { color: var(--tinte-still) } .arbeit-zustand.ist-fehler { color: var(--glut-schrift); cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; } /* Der Befund: nur da, wenn n>0, und dann ein Knopf zum ersten Fund. */ .arbeit-befund { font: inherit; background: none; border: 0; padding: 0; margin: 0; color: var(--ocker-schrift); cursor: pointer; } .arbeit-befund[hidden] { display: none } /* Tabellenziffern, damit die Zahl beim Tippen nicht zappelt — sie ändert sich bei jedem Wort, und springende Ziffernbreiten zieht das Auge an. */ .arbeit-zaehler { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tinte-still); } /* HIER STAND `.arbeit-fuss-hilfe` — eine eigene Zeile mit sechs Tastenkürzeln, rechts hinter einem Trenner. Sie fiel am 25.08.2026: Die Kürzel stehen jetzt als `title` an den Werkzeugen, die sie auslösen (Zitieren, Einfügen, Setzen, Fokus, der Speicherstand selbst) — eine Fußnote, die niemand je gelesen hat, wird nicht durch eine `title`- Fußnote ersetzt, die niemand je liest, sondern durch die Auskunft am Werkzeug, wo man sie sucht. ⌘B/⌘I (Fett/Kursiv) haben kein eigenes Werkzeug in dieser Leiste — für zwei Kürzel ohne Knopf lohnt keine „?"-Übersicht (Designspez 2c: "nur wenn billig, sonst weglassen"). */ /* ---- Konflikt ---- */ .arbeit-konflikt { border:0;box-shadow:var(--neo-auf); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--flaeche-hoch); } /* Ohne diese Zeile gewinnt `display: flex` gegen `hidden`, und die Konfliktansicht steht auch dann da, wenn es keinen Konflikt gibt. */ .arbeit-konflikt[hidden] { display: none; } .arbeit-konflikt-kopf { margin: 0; font: var(--type-body-strong) } .arbeit-konflikt-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } @media (max-width: 700px) { .arbeit-konflikt-paar { grid-template-columns: 1fr; } } .arbeit-konflikt-paar h4 { margin: 0 0 var(--space-2); font: var(--type-label); letter-spacing: var(--tracking-label); color: var(--tinte-still); } .arbeit-konflikt-paar pre { margin: 0; padding: var(--space-3); max-height: 30vh; overflow: auto; background: var(--grund); border-radius: var(--radius-sm); font-size: 12px; white-space: pre-wrap; word-break: break-word; } /* ---------- Die Drive-Bibliothek ---------- Eine Zeile je Quelle: links, was sie ist und was gefunden wurde, rechts die Auswahl. KEINE Karten — es sind bis zu dreissig Zeilen, und dreissig Rahmen sind sechzig Linien, die nichts sagen. */ .drive-zeile{ display:flex;align-items:center;gap:var(--space-4); padding:var(--space-3) 0;border-bottom:var(--hairline); } .drive-zeile:last-of-type{border-bottom:0} .drive-zeile-links{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .drive-quelle{ font:var(--type-small-strong);color:var(--tinte); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /* Der Dateiname steht in der Monoschrift: Man vergleicht ihn, man liest ihn nicht — und `Mueller_2024.pdf` gegen `MuIler_2024.pdf` erkennt man nur in einer Schrift mit gleichen Breiten. */ .drive-datei{ display:flex;align-items:center;gap:var(--space-2);min-width:0; font-family:var(--font-mono);font-size:11.5px;color:var(--tinte-still); } .drive-datei>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .drive-wahl{ flex:none;max-width:14rem;min-height:36px; padding:var(--space-2) var(--space-3); border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-xs); background:var(--grund);color:var(--tinte);font:var(--type-small); } .drive-wahl:focus-visible{border-color:var(--linie-stark);outline:none} @media (max-width:700px){ .drive-zeile{flex-direction:column;align-items:stretch;gap:var(--space-2)} .drive-wahl{max-width:none} } /* ---------- Das Quellen-PDF, ohne Google ---------- Die Antwort der Quellenzeile auf eine schwebende Datei steht oben bei `.quellzeile.ist-abwurf`. Hier steht nur noch, was ANDERE Flaechen tun, die eine Datei auffangen. */ /* Dieselbe Antwort, wenn eine Markdown-Datei über einem Projekt schwebt — Karte in der Liste und Detailseite gleichermaßen (projekte.js). SIE STAND AUF `.projektkarte`, und die gab es im DOM nicht mehr: `mdZielMachen()` setzt `ist-abwurf` auf die Karte in der Liste, und die hiess erst `.projektzeile` und heisst jetzt `.pjkarte`. Der Abwurf- Zustand war damit unsichtbar — man zog eine Datei ueber ein Projekt und sah nicht, ob es sie annimmt. */ .pjkarte.ist-abwurf, .seite.ist-abwurf{ outline:2px dashed var(--stempel);outline-offset:2px; border-radius:var(--radius-lg); } /* Eine App, die per Urteil nicht als Bildschirmzeit zählt (Fassung 20) — durchgestrichen, nicht versteckt: Die Minuten sind ja gemessen. */ .appzeile.ist-ausgenommen .appzeile-name{ text-decoration:line-through;color:var(--tinte-still); } /* Das Band der KI-Vorschläge über der Schreibfläche (arbeit.js). Es gibt nur dann DOM her, wenn offene Vorschläge da sind — sonst ist es leer und trägt weder Höhe noch Rand. */ .vorschlagband:empty{display:none} .vorschlagband{ display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap; padding:var(--space-2) var(--space-4);margin-top:var(--space-2); border:0;box-shadow:var(--neo-auf);border-radius:var(--radius-lg); background:var(--tinte-hauch);color:var(--tinte-still); font:var(--type-small); } .vorschlag-text{ max-height:min(420px,50dvh);overflow:auto; padding:var(--space-4);border:0;box-shadow:var(--neo-auf); border-radius:var(--radius-md);background:var(--grund); font:12px/1.6 ui-monospace,monospace; white-space:pre-wrap;overflow-wrap:anywhere; } /* HIER STANDEN `.tisch-quelle-marke`, `-pdfweg` und `-fuss` — das Blatt vor dem Titel, der „+ PDF"-Knopf am Zeilenende und die Fusszeile darunter. Alle drei sind mit der Karte gefallen: Die Zeile traegt ihren PDF-Zustand jetzt als Spalte (`.quellzeile-pdf`), und eine Fusszeile hat sie nicht mehr, weil sie EINE Zeile ist. */ /* ============================================================ ---- Today: Planungszentrale ---- Die Blöcke des Heute-Reiters: das Prüfungsband (je aktiver Prüfungsleistung eine Zeile), die Kalenderspalte (14 Tage — Navigation UND Zieh-Ziel fürs Umplanen) und die Dran-Liste (lernbereite Themen mit einem „+ heute"-Griff). Alles aus dem vorhandenen Material — Platte, Haarlinie, Tinte — und nur mit Tokens gefärbt. ============================================================ */ /* ---------- Das Prüfungsband ---------- Zeilen wie eine Liste, aber jede Zeile ist EIN Knopf ins Modul — deshalb ein eigener Kasten statt `.liste` mit verschachtelten Griffen. */ .pruefungsband{ display:flex;flex-direction:column; background:var(--flaeche);border:0;box-shadow:var(--neo-auf); border-radius:var(--radius-md);overflow:hidden; } .pruefung{ display:flex;flex-direction:column;gap:var(--space-2); min-height:44px;padding:var(--space-4) var(--gutter-card); background:none;border:0;text-align:left;cursor:pointer; color:var(--tinte); } .pruefung+.pruefung{border-top:1px solid var(--linie)} .pruefung:hover{background:var(--tinte-hauch)} .pruefung-kopf{display:flex;align-items:baseline;gap:var(--space-3);min-width:0} .pruefung-kuerzel{flex:none;font:var(--type-body-strong);font-variant-numeric:tabular-nums} .pruefung-name{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:var(--type-small);color:var(--tinte-still); } .pruefung-countdown{flex:none;font:var(--type-caption);color:var(--tinte-still)} /* Gefärbt wird der TEXT, nie die Fläche — dieselbe Regel wie überall. */ .pruefung-countdown.ton-caution{color:var(--ocker-schrift)} .pruefung-stand{ display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap; font:var(--type-caption);color:var(--tinte-fern); } /* Der Balken ist SCHMAL und fest: Er ist ein Anteil, kein Diagramm. Als Flex-Kind ohne feste Breite kollabierte er auf null. */ .pruefung-balken{flex:0 0 72px} .pruefung-balken .balken-fuell.ton-positive{background:var(--moos)} .pruefung-zahl{font-variant-numeric:tabular-nums;color:var(--tinte-still)} .pruefung-lage{color:var(--tinte-fern)} .pruefung-lage.ton-critical{color:var(--glut-schrift)} /* HIER STAND DIE KALENDERSPALTE von Planning — vierzehn Tage untereinander als Navigation UND Zieh-Ziel. Sie ist mit dem Kalender-Umbau gefallen: Das Raster IST die Navigation, und abgelegt wird auf einer Uhrzeit statt auf einem Tag. */ /* HIER STAND DER GRIFF DER DRAN-LISTE („+ heute"). Er hat ein Thema als 45-Minuten-Posten an den heutigen Plan gehaengt — eine Vermutung ueber die Uhrzeit, die man danach von Hand korrigierte. Seit dem Kalender zieht man es dorthin, wo es hin soll. */ /* ---------- Handy ---------- Engere Polster — aber jede Tippfläche bleibt über 40 px (der Wächter misst das auf 360 px nach). */ @media (max-width: 480px){ .pruefung{padding:var(--space-4) var(--space-5)} .pruefung-kopf{flex-wrap:wrap} } /* ---------- Die Anmeldung (AP-3) ---------- Eine Karte in der Mitte, sonst nichts. Sie ist der einzige Bildschirm, den jemand sieht, bevor er angemeldet ist — also traegt sie keine Navigation, keine Leiste und keinen Tagbogen: Es gaebe nichts, wohin sie fuehren koennten. */ .anmeldung{ display:grid;place-items:center;min-height:100dvh;padding:var(--space-6); } .anmeldung-karte{ width:min(420px,100%);display:flex;flex-direction:column;gap:var(--space-5); background:var(--flaeche);border:0;box-shadow:var(--neo-auf); border-radius:var(--radius-lg);padding:var(--space-7) var(--space-6); } .anmeldung-titel{font:var(--type-display-m);color:var(--tinte);margin:0} .anmeldung-unter{font:var(--type-body);color:var(--tinte-still);margin:0;text-wrap:pretty} .anmeldung-felder{display:flex;flex-direction:column;gap:var(--space-4)} /* Die Fehlerzeile und ihr Platzhalter sind GLEICH hoch. Ohne das springt die Karte bei jeder Meldung, und der Knopf wandert unter dem Finger weg. */ .anmeldung-fehler,.anmeldung-platz{ font:var(--type-small);margin:0;min-height:1.4em; } .anmeldung-fehler{color:var(--glut-schrift)} .anmeldung-platz{visibility:hidden} /* ============================================================ 5 · WAS AUS DEM ALTEN BLATT MITKAM Vier Stellen, die in `app.css` zwischen den Abschnitten lagen und beim Aufteilen sonst durchgefallen waeren. ============================================================ */ /* HIER STANDEN DREI RESTE DER ACHSE — der Schleppgriff, der Kalenderhinweis unter dem Strahl und die Hinweiszeile. Alle drei sind mit der Achse gefallen (Fassung 25). */ .wochenspur-zeile{display:flex;align-items:center;gap:var(--space-4)} /* ---------- Die Karte am Laptop: zwei Spalten ---------- Links das Bento, rechts der Tag und das Log als Auszug. Wer sich hinsetzt, will den Ueberblick — und zwar ohne zu scrollen. */ .kartenseite-breit{display:flex;flex-direction:column;gap:var(--space-8)} .kb-karte{display:flex;flex-direction:column;gap:var(--space-6)} /* Der Platzhalter fuer die nachgeladene Reihe. Solange sie unterwegs ist, ist er leer — und ein leerer Kasten in einer Flex-Spalte mit Abstand erzeugt eine Luecke, die aussieht wie ein vergessenes Element. */ .kb-instrument:empty{display:none} .kb-seite{display:flex;flex-direction:column;gap:var(--space-5)} .kb-block{display:flex;flex-direction:column;gap:var(--space-4); padding:var(--gutter-card);background:var(--flaeche); border:0;border-radius:var(--radius-lg);box-shadow:var(--neo-auf)} .kb-block-kopf{display:flex;align-items:center;gap:var(--space-4)} .kb-block-titel{font:var(--type-subtitle);margin:0;flex:1} .kb-liste{display:flex;flex-direction:column} .kb-zeile{display:grid;grid-template-columns:46px 1fr auto;gap:var(--space-4); align-items:baseline;padding:var(--space-3) 0;font:var(--type-small)} .kb-zeile+.kb-zeile{border-top:1px solid var(--linie)} .kb-zeile.ist-erledigt .kb-titel{color:var(--tinte-fern);text-decoration:line-through; text-decoration-color:var(--linie-stark)} .kb-zeit{color:var(--tinte-fern);font-variant-numeric:tabular-nums} .kb-titel{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kb-meta{color:var(--tinte-fern);font:var(--type-caption)} @media (min-width:1100px){ .kartenseite-breit{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:var(--space-9);align-items:start} .kb-seite{position:sticky;top:calc(var(--kopf-hoehe) + var(--space-6))} /* ---- Das Band unter beiden Spalten ---- Der Beleg fuer die Woche stand bis zum 25.08.2026 IN der linken Spalte und machte sie dreimal so lang wie die rechte: 1260 px gegen 400 px, also 850 px Leere neben einem vollen Blatt. Als Band ueber die volle Breite enden die zwei Spalten fast gleichzeitig. ES LIEGT UEBER DER KLEBENDEN NEBENSPALTE, und das braucht eine Zeile: `.kb-seite` ist `position:sticky`, also POSITIONIERT, und der Browser malt positionierte Elemente nach allen statischen — die Reihenfolge im Dokument hilft da nichts. Beim Bildlauf schob sich Activity deshalb ueber das Diagramm, deckend, weil `.kb-block` einen Grund hat. */ .kb-instrument{grid-column:1/-1;position:relative;z-index:1} /* GESTAPELT, NICHT GESPALTEN (26.08.2026). Hier standen drei Grid-Zeilen und zwei Spalten: Text links, Bild rechts. Das Bild ist aber hoeher als seine drei Textzeilen, und die ueberschuessige Hoehe sammelte sich als Loch unter dem Lehrsatz — ein halber Bildschirm Leere neben einem Diagramm, das dafuer quer gezogen war. Untereinander braucht keine der beiden Haelften die Hoehe der anderen zu fuellen. */ .kb-instrument .diagramm{max-width:560px} } /* ============================================================ 6 · DIE BREITE EINER BUEHNE Sie ist eine Aussage und keine Einstellung. Die Buehne selbst ist am Laptop 1080 px breit, weil Listen und zwei Spalten das brauchen — aber nicht jeder Ort will so viel. NOW ist ein Fenster auf eine Sache. Eine Karte, die ueber 1080 px laeuft, ist keine Karte mehr, sondern ein Band: Der Blick findet keinen Anfang, und die Blende darum rahmt eine Flaeche statt eines Gegenstands. 560 px sind so breit wie ein Satz, den man in einem Zug liest. DAS BLATT ist Text und faellt damit unter dieselbe Regel wie jeder Fliesstext: ab etwa 70 Zeichen je Zeile hoert das Auge auf, den Zeilenanfang zu finden. DIE ACHSE traegt Uhrzeit, Titel und Griffe nebeneinander — sie darf breiter sein, aber nicht beliebig: Ein Titel, der 900 px vom Startgriff entfernt steht, gehoert optisch nicht mehr zu ihm. ============================================================ */ .nah{max-width:560px;width:100%;margin-inline:auto} .blatt{max-width:660px;width:100%;margin-inline:auto} .fokus{max-width:560px;width:100%;margin-inline:auto} .strahlseite{max-width:780px;width:100%;margin-inline:auto} /* ---------- Now, im Einzelnen ---------- Die Karte ist die Buehne. Was sie umgibt, ist Luft — und die ist hier kein Rest, sondern das, was die eine Sache zu einer macht. */ .nah-kern{min-width:0;width:100%} .fokus-ziel-titel{display:inline-flex;align-items:center;gap:var(--space-2)} /* Die zweite Karte auf Now IST KEINE KARTE. Zwei gehobene Flaechen nebeneinander sind zwei gleich wichtige Dinge — und Now hat genau eins. Bis zum 26.08.2026 sagte das eine Mulde ueber die ganze Kartenflaeche. Das war der falsche Weg: Eine Mulde legt einen Schatten auf ihren Fliesstext und eine Lichtkante um ihn herum — sie wurde damit lauter statt leiser, und schlechter lesbar dazu. Kein Ersatz-Material, sondern gar keins: `--senke` waere hier eine Behauptung, denn sie liegt auf einem Hundertstel genau auf dem Grund der Saeule (`--grund` 70 % + `--flaeche` 30 %) und waere schlicht unsichtbar. Was nichts bewirkt, wird nicht hingeschrieben. Was bleibt, traegt die Ueberschrift und die Luft. */ /* Und ohne Platte auch ohne deren Polster: Die Ueberschrift dieses Abschnitts gehoert an die Kante der Buehne, nicht 18 px daneben — sonst stehen zwei Bloecke untereinander auf zwei verschiedenen Fluchten. */ .nah .morgen-karte:not(.platte-rahmen){background:none;box-shadow:none;padding-inline:0} .morgen-karte{gap:var(--space-3)} .morgen-wert{margin:0} .morgen-aktionen{margin-top:var(--space-4)} .typreihe{margin:var(--space-3) 0 var(--space-2)} /* Der Vorschautext haelt seine Hoehe, damit die Karte beim Ueberfahren der Typknoepfe nicht springt — eine Karte, die unter dem Zeiger wandert, ist schwer zu treffen. */ .morgen-text{min-height:2.4em} .nah-still{margin-top:var(--space-6)} /* ---------- Overview: das Bento ---------- Eine Kachel ist eine ZAHL mit ihrem Namen und ihrem Satz. WO DER TOTRAUM SASS (bis 26.08.2026): Das Raster laesst alle Kacheln einer Reihe gleich hoch werden (`grid-auto-rows:1fr`, und das ist richtig — ein Bento mit ausgefransten Reihen ist kein Bento). Der Ueberschuss landete aber MITTEN in der Kachel, weil der Name oben klebte, der Wert direkt darunter und der Satz per `margin-top:auto` ganz unten: „0 / 2" stand auf 408 px, „2h 15 geplant" auf 488 px, und zwischen den beiden lagen achtzig leere Pixel. Jetzt ist die Kachel ein Zifferblatt: Der Name steht als Ueberschrift oben, Wert und Satz stehen ZUSAMMEN unten — sie gehoeren zusammen, also stehen sie zusammen. Der Ueberschuss faellt dahin, wo er nicht stoert, naemlich zwischen die zwei Gruppen. */ .kachel-karte{justify-content:flex-start;gap:var(--space-2)} .kachel-karte .kachel-wert{margin-top:auto} @media (min-width:900px){ .kachel-karte{min-height:126px} } /* ============================================================ 7 · DER BENTO AM LAPTOP Drei Spalten statt zwei. Die Kacheln bekommen HOEHE statt Zeilen: Eine Kachel ueber zwei Reihen war oben zu drei Vierteln leer, weil ihr Wert unten klebte — viel Flaeche fuer nichts. ============================================================ */ @media (min-width:900px){ .kacheln{grid-template-columns:repeat(3,1fr)} .kachel-karte{min-height:112px} .kachel-karte.ist-gross{grid-column:span 3;min-height:112px} } /* Im linken, breiten Teil der Uebersicht sind drei Spalten richtig; wird es enger, waeren sie je 170 px breit — und eine Zahl wie „3h 30 : 3h 32" passt darin nicht mehr in eine Zeile. */ @media (min-width:900px) and (max-width:1360px){ .kartenseite-breit .kacheln{grid-template-columns:repeat(2,1fr)} .kartenseite-breit .kachel-karte.ist-gross{grid-column:span 2} } /* ============================================================ 8 · TODAY — zwei Spalten Links DER TAG: die Tagesachse und „Als Naechstes". Rechts WAS DRUECKT: die Kalenderspalte und die Pruefungsleistungen. Am Laptop war die rechte Haelfte des Schirms sonst leer. HIER STANDEN zweite Fassungen von `.zahlenreihe`/`.tageszahl` und `.wochenleiste`/`.wl-*` — Reste eines frueheren Anstrichs, die neben den eigentlichen Regeln weiter oben lagen (Kodex G3: zwei Fassungen derselben Sache). Und darunter stand `.heuteseite`. Der Ort heisst seit Fassung 25 Kalender, und sein Abstandsmass steht bei `.kalenderseite` — dort, wo auch alles andere zu ihm steht. ============================================================ */ /* ============================================================ DIE PROJEKTKARTEN HIER STAND EINE ZEILE JE PROJEKT mit vier festen Rasterspalten (7fr 8fr auto auto) und ohne eine einzige Media Query — auf einem Handy dieselben vier. Alles, was nicht in die dritte Spalte passte, stand nur im `title`: offene Aufgaben, Termin, Module, die Zeitreihe. Ein Tooltip ist auf einem Finger nichts. Jetzt traegt jede Karte drei Baender, durch Haarlinien getrennt, und das Raster darum ist `.kartenliste` — dasselbe wie im Studium, also `auto-fill` statt fester Spalten. Es bricht von selbst um. ============================================================ */ .pjkarte{ display:flex;flex-direction:column; border-radius:var(--radius-lg); background:var(--flaeche);box-shadow:var(--neo-auf); overflow:hidden; } /* Die erste Karte einer Gruppe ist die grosse: `sortiert()` stellt das Projekt nach vorn, an dem zuletzt gearbeitet wurde. Ein Raster, in dem alles gleich gross ist, sagt, dass alles gleich wichtig ist — bei Projekten ist das nie wahr. */ .pjkarte.ist-hero{grid-column:1 / -1} .pjkarte-kopf{ display:flex;align-items:flex-start;gap:var(--space-4); padding:var(--space-5) var(--space-6); } .pjkarte-name{ flex:1;min-width:0;display:flex;flex-direction:column;gap:2px; padding:0;border:0;background:none;cursor:pointer;text-align:left; } .pjkarte-titel,.pjkarte-ziel{ display:block;min-width:0;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .pjkarte-titel{font:var(--type-subtitle);color:var(--tinte)} .pjkarte.ist-hero .pjkarte-titel{font:var(--type-title)} .pjkarte-ziel{font:var(--type-caption);color:var(--tinte-fern)} .pjkarte-name:hover .pjkarte-titel{text-decoration:underline;text-underline-offset:3px} /* Der naechste Schritt. Fehlt er, ist das Band selbst der Griff, ihn zu setzen — die Luecke schliesst sich dort, wo sie auffaellt. */ .pjkarte-schritt{ display:flex;align-items:center;gap:var(--space-3);width:100%; padding:var(--space-4) var(--space-6); border:0;border-top:var(--hairline);background:none; font:var(--type-small);color:var(--tinte-still);text-align:left; } .pjkarte-schritt>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pjkarte-schritt .schritt-symbol{flex:none;color:var(--tinte-fern)} button.pjkarte-schritt{cursor:pointer;min-height:var(--griff)} .pjkarte-schritt.ist-offen{color:var(--ocker-schrift)} .pjkarte-schritt.ist-offen .schritt-symbol{color:var(--ocker)} button.pjkarte-schritt:hover{background:var(--tinte-hauch);color:var(--tinte)} .pjkarte-fuss{ display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-5); padding:var(--space-4) var(--space-6); border-top:var(--hairline); } /* Die Spur sagt in einem Blick, was keine Zahl sagt: ob ein Projekt laeuft oder nur einmal lief. */ .pjkarte-spur{flex:none;width:120px;height:26px;color:var(--tinte-fern)} .pjkarte-lage{ flex:1;min-width:0; font:var(--type-caption);color:var(--tinte-fern); font-variant-numeric:tabular-nums; } .pjkarte-marken{display:flex;flex-wrap:wrap;gap:var(--space-4)} .pjkarte-marke{ display:inline-flex;align-items:center;gap:var(--space-2); font:var(--type-caption);color:var(--tinte-fern); } .pjkarte-marke.ist-eng{color:var(--glut-schrift)} .pjkarte-marke svg{flex:none} /* ============================================================ Die Quelle AUFGESCHLAGEN (26.08.2026) Bis dahin führte ein Klick auf eine Quellenzeile ins Bearbeiten-Formular. Wer nur nachsehen wollte, welche Publikation das war, hatte danach ein Formular offen — mit dem Risiko, versehentlich etwas zu ändern. Hier steht alles zum Lesen, und der Bearbeiten-Knopf ist ein Knopf. ============================================================ */ .quelle-blatt { display: flex; flex-direction: column; gap: var(--space-5); } /* Die Herkunft zuerst: Sie sagt, wie sehr man den Angaben darunter traut. */ .quelle-herkunft { margin: 0; font: var(--type-small); color: var(--tinte-still); } /* Zwei Spalten, weil eine Angabe aus Wort und Wert besteht und man den Wert sucht — nicht das Wort. `max-content` hält die Wörter bündig. */ .quelle-felder { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5); } .quelle-feld { display: contents; } .quelle-feld-wort { color: var(--tinte-fern); letter-spacing: var(--tracking-label); } .quelle-feld-wert { color: var(--tinte); min-width: 0; overflow-wrap: anywhere; } .quelle-url { font: var(--type-small); color: var(--akzent); overflow-wrap: anywhere; } /* Die Gruppenüberschrift in der Quellen-Seitenleiste — dieselbe Ordnung wie im Literatur-Tab, deshalb dieselbe Beschriftung wie dort. */ /* HIER STAND `.quellen-gruppe` — der Zwischenkopf INNERHALB der Liste. Er steht jetzt darueber (`.quellenliste-gruppenkopf`), und damit schneidet die Rundung der Liste ihm auch nicht mehr das erste Zeichen ab („ARTIKEL" stand als „RTIKEL" da, 26.08.2026). */ /* ============================================================ Das Notizblatt (26.08.2026) Die kleinen Felder bleiben, wo sie sind — hier steht die Zusammenschau: alles, was zu einer Quelle oder einem Kapitel notiert wurde, an einer Stelle und mit Platz. Es ist eine Ansicht, kein Speicher. ============================================================ */ .notizblatt { display: flex; flex-direction: column; gap: var(--space-5); } .notizblatt-text { margin: 0; font: var(--type-body); color: var(--tinte); white-space: pre-wrap; overflow-wrap: anywhere; } .notizblatt-liste { display: flex; flex-direction: column; gap: var(--space-4); } .notizblatt-zeile { padding-left: var(--space-4); border-left: 2px solid var(--linie); } .notizblatt-kopf { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); } .notizblatt-wort { font: var(--type-small-strong); color: var(--tinte); } .notizblatt-still { font: var(--type-caption); color: var(--tinte-fern); } /* Das grosse Feld: vierzehn Zeilen statt fünf. Es ist derselbe Text und derselbe Schreibweg wie im kleinen daneben — nur mit Platz. */ .notizblatt-feld { display: flex; flex-direction: column; gap: var(--space-2); } .notizblatt-stand { font: var(--type-caption); color: var(--tinte-fern); align-self: flex-end; } /* Der Griff, der es aufschlägt. Er sitzt im Kopf der Notizfläche, wo auch der Speicherstand steht. */ .arbeit-notizen-gross { display: flex; align-items: center; padding: var(--space-2); margin-left: auto; border: 0; background: none; border-radius: var(--radius-xs); color: var(--tinte-fern); cursor: pointer; } .arbeit-notizen-gross:hover { color: var(--tinte); background: var(--tinte-hauch); } /* ============================================================ DIE NOTIZFLAECHE (26.08.2026, Florians Punkt 4.1.1) „Es muss einen zentralen, grosszuegigen Ort fuer Notizen geben (keine reinen Mini-Felder mehr)." Sie ist die sechste Flaeche des Docks und zeigt je Kapitel und je Quelle eine Zeile mit VORSCHAU — den ersten Zeilen dessen, was wirklich drinsteht. KEINE KARTEN. Dieselbe Regel wie bei der Quellenliste: Die gehobene Flaeche ist die Liste, ihre Zeilen sind es nicht. Getrennt wird durch eine Haarlinie, markiert wird beim Zeigen. ============================================================ */ .arbeit-notizflaeche{display:flex;flex-direction:column;gap:var(--space-4)} .notizflaeche-steuer{display:flex;flex-direction:column;gap:var(--space-3)} .notizflaeche-liste{ display:flex;flex-direction:column; background:var(--flaeche); border-radius:var(--radius-md); box-shadow:var(--neo-auf); overflow:hidden; } .notizzeile{ position:relative;display:flex;flex-direction:column;gap:2px; width:100%;padding:var(--space-4) var(--space-5); border:0;border-top:var(--hairline);background:none; text-align:left;cursor:pointer; } .notizzeile:first-child{border-top:0} .notizzeile:hover{background:var(--tinte-hauch)} .notizzeile-kopf{display:flex;align-items:baseline;gap:var(--space-3)} .notizzeile-titel{ flex:1;min-width:0;font:var(--type-small-strong);color:var(--tinte); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .notizzeile-unter{font:var(--type-caption);color:var(--tinte-fern); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ZWEI ZEILEN VORSCHAU, nicht eine und nicht fuenf: Eine sagt zu wenig, um wiederzuerkennen, was man notiert hat; fuenf machen aus der Liste wieder einen Stapel. */ .notizzeile-vorschau{ margin:var(--space-2) 0 0;font:var(--type-caption);color:var(--tinte-still); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;text-wrap:pretty; } /* Ein leeres Blatt sagt, dass es leer ist — leiser als eines mit Text, aber es steht da (Kodex G1). */ .notizzeile-vorschau.ist-leer{color:var(--tinte-fern);font-style:italic} /* Der Griff sagt „hier geht es gross auf". Er tritt beim Zeigen hervor — dreissig Symbole untereinander waeren ein Muster, keine Auskunft. */ .notizzeile-griff{ position:absolute;top:var(--space-4);right:var(--space-4); color:var(--tinte-fern);opacity:0; } .notizzeile:hover .notizzeile-griff, .notizzeile:focus-visible .notizzeile-griff{opacity:1} /* ============================================================ DER UNTERSCHIED (28.08.2026) Was der Spiegelordner zeigt, bevor er fragt: die geaenderten Zeilen, links die Datei, rechts die Cloud. Sie steht in der Rueckfrage (`ds/flaechen.js bestaetigen`, `beilage`) und nirgends sonst. MONOSPACE UND NICHT DIE HAUSSCHRIFT: Es ist LaTeX-Quelltext, und die Zeilennummer daneben soll fluchten. Beides ist hier kein Stilbruch, sondern der Gegenstand. FARBE TRAEGT NICHT ALLEIN (Kodex Z1): Jede Zeile hat ihr Zeichen — `−` nur in der Datei, `+` nur in der Cloud, Leerzeichen unveraendert. Wer Glut und Moos nicht unterscheidet, liest die Zeichen. ============================================================ */ .spiegel-diff { display: flex; flex-direction: column; gap: var(--space-4); max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; } .spiegel-diff-stueck { border-radius: var(--radius-sm); background: var(--flaeche); box-shadow: var(--neo-ein); padding: var(--space-3) 0; overflow-x: auto; } .spiegel-diff-zeile { display: flex; align-items: baseline; gap: var(--space-3); padding: 0 var(--space-4); font: var(--type-caption); font-family: var(--schrift-mono); white-space: pre; min-width: max-content; } .spiegel-diff-nr { flex: none; width: 3.5ch; text-align: right; color: var(--tinte-fern); font-variant-numeric: tabular-nums; } .spiegel-diff-zeichen { flex: none; width: 1ch; color: var(--tinte-fern); } .spiegel-diff-text { min-width: 0; } .spiegel-diff-zeile.ist-gleich { color: var(--tinte-still); } .spiegel-diff-zeile.ist-nur-links { background: var(--glut-hauch); color: var(--glut-schrift); } .spiegel-diff-zeile.ist-nur-rechts { background: var(--moos-hauch); color: var(--moos-schrift); } .spiegel-diff-zeile.ist-nur-links .spiegel-diff-zeichen, .spiegel-diff-zeile.ist-nur-rechts .spiegel-diff-zeichen { color: currentColor; } /* ============================================================ DIE QUELLENZUORDNUNG (28.08.2026) Zwei Spalten: links die Dateien im Ordner `quellen/`, rechts die Einträge der Arbeit. Dazwischen passiert nichts von selbst — verbunden wird durch Anklicken beider Seiten oder durch Ziehen von links nach rechts (`formulare/zuordnung.js`). ZWEI GLEICH BREITE SPALTEN und nicht eine schmale Liste neben einer breiten: Beide Seiten sind gleich wichtig, und eine Datei, deren Name abgeschnitten ist, lässt sich nicht zuordnen. ============================================================ */ .zuordnung { display: flex; flex-direction: column; gap: var(--space-4); } .zuordnung-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); min-height: 0; } @media (max-width: 719px) { /* Am schmalen Schirm untereinander: Zwei 160-px-Spalten sind keine zwei Spalten, sondern zwei Streifen. */ .zuordnung-spalten { grid-template-columns: minmax(0, 1fr); } } .zuordnung-spalte { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .zuordnung-liste { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-sm); background: var(--flaeche); box-shadow: var(--neo-ein); padding: var(--space-2); } .zuordnung-zeile { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-xs); background: none; color: var(--tinte); cursor: pointer; text-align: left; } .zuordnung-zeile:hover { background: var(--tinte-hauch); } /* Die gewählte Seite ist EINGEDRÜCKT und nicht eingefärbt — dieselbe Sprache wie der aktive Ort in der Ortsleiste. */ .zuordnung-zeile.ist-gewaehlt { background: var(--flaeche); box-shadow: var(--neo-ein); } .zuordnung-zeile.nimmt { outline: 2px solid var(--akzent); outline-offset: -2px; } /* Verbunden trägt Farbe, weil es ein ZUSTAND ist und keine Auswahl. */ .zuordnung-zeile.ist-verbunden .zuordnung-glyph { color: var(--moos-schrift); } .zuordnung-zeile.ist-verbunden .zuordnung-unter { color: var(--moos-schrift); } .zuordnung-glyph { flex: none; display: grid; place-items: center; color: var(--tinte-fern); } .zuordnung-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; } .zuordnung-wort { font: var(--type-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zuordnung-unter { font: var(--type-caption); color: var(--tinte-fern); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zuordnung-loesen { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-xs); color: var(--tinte-fern); } .zuordnung-loesen:hover { background: var(--tinte-hauch-stark); color: var(--tinte); } .zuordnung-fuss { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } /* Der Stand steht links und schiebt die Knöpfe nach rechts — dieselbe Regel wie in der Fusszeile der Arbeitsbühne. */ .zuordnung-stand { margin-right: auto; color: var(--tinte-still); } /* ---- Die Rahmenteile in der Gliederungs-Leiste (28.08.2026) ---- Sie stehen vor dem ersten und hinter dem letzten Kapitel, weil sie dort auch im PDF stehen, und durch eine Haarlinie getrennt, weil sie keine Kapitel sind: keine Nummer, keine Ampel, kein Ablageziel für einen Beleg. Was rechts steht, ist ihre Wortzahl — „—" heisst, es gilt die Vorlage; bei einem erzeugten Verzeichnis steht dort nichts. */ .kapitelleiste-liste.ist-rahmen.ist-nach { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--hairline); } .kapitelleiste-liste.ist-rahmen.ist-vor { margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: var(--hairline); } .kapitelleiste-zeile.ist-rahmenteil .kapitelleiste-titel { color: var(--tinte-still); } .kapitelleiste-zeile.ist-rahmenteil.ist-aktiv .kapitelleiste-titel { color: var(--tinte); } /* ---- Das Ansichtsblatt: was LaTeX selbst schreibt (28.08.2026) ---- Es liegt an derselben Stelle wie der Editor und löst ihn ab, sobald ein erzeugtes Verzeichnis offen ist (`arbeit/rahmenflaeche.js`). Deshalb dieselben Masse — nur dass hier gelesen und nicht geschrieben wird. */ /* `display: contents` laesst den Rahmen aus dem Layout verschwinden — Editor und Blatt liegen damit dort, wo bisher nur der Editor lag, ohne dass eine einzige Masszahl umzieht. Die zweite Zeile ist kein Beiwerk: `hidden` wirkt ueber die Vorgabe `display: none` des Browsers, und die Zeile darueber schluege sie — ein Reiter, der nicht obenauf liegt, staende sonst trotzdem da (`arbeit/views.js`, Regel 2). */ .arbeit-editorflaeche { display: contents; } .arbeit-editorflaeche[hidden] { display: none; } .arbeit-ansichtsblatt { /* DIESELBE HOEHE WIE DER EDITOR und nicht `100%`: Die Flaeche darum ist eine Flex-Spalte mit `overflow-y:auto`, und ein `100%` darin misst sich an einer Hoehe, die es erst gibt, wenn der Inhalt steht. Wer vom Blatt zum Editor wechselt, saehe die Fusszeile sonst springen. */ height: var(--arbeit-platz, calc(100dvh - 320px)); min-height: 320px; overflow-y: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .ansichtsblatt-kopf { display: flex; flex-direction: column; gap: var(--space-2); } .ansichtsblatt-hinweis { color: var(--tinte-still); } .ansichtsblatt-liste { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .ansichtsblatt-zeile { color: var(--tinte); } /* Dieselbe Falle wie beim Rahmen darueber: `display: flex` schlaegt die Vorgabe `display: none`, die `hidden` mitbringt. */ .arbeit-ansichtsblatt[hidden] { display: none; }