/* =========================================================================== OS4 — ARBEITSBEREICH, das Blatt =========================================================================== Alles, was der dritte Reiter an Aussehen braucht, steht hier — und nur hier. os4.css gehoert Aufgabe B; zwei schreibende Besitzer an einer Datei sind in diesem Ordner schon einmal kollidiert. KEIN FESTER FARBWERT. Nicht einer. Alles kommt aus den zehn Variablen auf :root (--hintergrund --flaeche --text --gedaempft --akzent --akzent-text --rahmen --gut --warn --schlecht) und den daraus gemischten Flaechen (--flaeche-hoch --flaeche-tief --akzent-hauch --akzent-rand). os4.js setzt diese Werte zur Laufzeit als Inline-Style auf ; ein #rrggbb hier wuerde die Farbwahl des Kontos still ueberstimmen. Wo eine schwaechere Tonung noetig ist, mischt color-mix() gegen `transparent` — genau wie os4.css:45-48. BEWEGUNG NUR UEBER transform UND opacity. Beides traegt der Compositor, auch auf einem Telefon. Eine Animation auf width/height/top/left rechnet dagegen in jedem Bild das ganze Layout neu und ruckelt genau dort, wo es auffaellt. Jede Bewegung steht ausserdem unter @media (prefers-reduced-motion: reduce) ganz still — ganz unten in dieser Datei, an EINER Stelle. DIE WICHTIGSTE REGEL DIESER DATEI STEHT BEI .ab-baum: ein Dateibaum ist der klassische Ueberlaufkandidat. In os2 hat genau er die Seite auf 68.796 px Hoehe getrieben (bei 900 px Fenster, ohne Scrollbalken) und dabei die Schiene aus dem Bild geschoben. Hier scrollt er IN SICH. =========================================================================== */ /* =========================================================================== DER PLATZ WIRD GENUTZT — Owner 09.08.2026, 21:45 =========================================================================== „also ich will, dass der Platz effizient genutzt wird!" GEMESSEN, WAS HEUTE BREMST: os4.css:597 setzt `.detail-inhalt { max-width: 900px }` und hebt den Deckel nur fuer den Bereich OHNE Liste wieder auf (os4.css:634 — die Uebersicht). Der Arbeitsbereich ist zweispaltig und behielt ihn also. Auf einem 1920-px-Schirm blieben dadurch 366 px Flaeche einfach leer, waehrend der Dateibaum in 17 em stand. Genau das Bild, ueber das der Owner sich beschwert hat. ⚠️ os4.css GEHOERT EINEM ANDEREN AGENTEN und wird hier NICHT angefasst. Der Deckel wird nur fuer diesen einen Bildschirm ueberstimmt — `.detail-inhalt.arbeitsbereich` sind zwei Klassen und schlagen die eine aus os4.css. Hebt os4.css den Deckel spaeter selbst auf, kann die eine Zeile hier ersatzlos weg; sie steht deshalb allein und ist in keine andere Regel eingebaut. WARUM DER DECKEL HIER FALSCH IST UND IN DER CHATSPALTE RICHTIG BLEIBT: dort steht FLIESSTEXT, und eine Zeile mit 200 Zeichen liest niemand gern. Hier stehen ein Dateibaum, ein Quelltext-Editor, Karten und Programmausgaben — lauter Dinge, die von Breite PROFITIEREN. Der Fliesstext dieses Bereichs behaelt sein Lesemass trotzdem: die Regel dazu steht ein Stueck weiter unten bei `.hinweis p`. LESBARKEIT GEHT VOR DICHTE: hier wird NICHTS kleiner. Keine Schriftgroesse, kein Fingerziel und keine Einrueckung des Baums aendert sich durch diesen Abschnitt — es aendert sich ausschliesslich, wie viel BREITE benutzt wird. =========================================================================== */ .detail-inhalt.arbeitsbereich { max-width: none; } /* DIE ABSCHNITTE NEBENEINANDER, sobald es wirklich passt. `repeat(auto-fit, minmax(min(100%, 26em), 1fr))` ist die ganze Entscheidung — und sie braucht KEINE Medienabfrage: `auto-fit` faellt von selbst auf eine Spalte zurueck, sobald keine zweite mehr in 26 em passt. Das `min(100%, 26em)` ist die Bremse gegen den klassischen Ueberlauf: ohne sie verlangte eine Spalte auf einem 390-px-Schirm 416 px und schoebe die Seite quer. Gerechnet: 26 em sind 416 px, mit 20 px Luft stehen zwei Spalten ab rund 852 px Inhaltsbreite — auf 1440 px gerade eben, auf 1920 px bequem, auf dem Telefon nie. `align-items: start` haelt jeden Abschnitt bei seiner EIGENEN Hoehe; ohne das zoege der laengste die Nachbarspalte auf seine Laenge und erzeugte genau den grossen Leerraum, den diese Regel abschaffen soll. Die Luft steht nur waagerecht (`gap: 0 …`) — senkrecht macht das weiter `.abschnitt { margin-bottom }` aus os4.css:640, sonst zaehlte der Abstand doppelt. */ .arbeitsbereich.ab-projekt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26em), 1fr)); gap: 0 var(--luft); align-items: start; } /* Kopf und Dateien behalten die volle Breite: der Kopf ist eine Beschriftungstabelle, die Dateien sind Baum UND Blatt — beide waeren in einer halben Spalte schlechter dran als vorher. Die Klasse setzt arbeitsbereich.js, nicht `:nth-of-type` (Begruendung steht dort). */ .arbeitsbereich.ab-projekt > .ab-weit { grid-column: 1 / -1; } /* Rasterkinder haben von Haus aus `min-width: auto` und wachsen mit ihrem laengsten unteilbaren Kind — ein einziger langer Serverpfad schoebe sonst die Nachbarspalte aus dem Bild. Dieselbe Null wie bei .ab-dateien und in os4.css:148,190,191. */ .arbeitsbereich.ab-projekt > .ab-teil { min-width: 0; } /* DAS LESEMASS BLEIBT. Ein Hinweiskasten ist Fliesstext und darf nicht 1300 px breit werden, nur weil daneben Platz ist. Begrenzt wird der ABSATZ, nicht der Kasten: der Kasten bleibt in seiner Spalte und traegt seinen farbigen Rand weiter ueber die ganze Breite. 78 Zeichen sind das uebliche Lesemass. */ .arbeitsbereich .hinweis p { max-width: 78ch; } /* --------------------------------------------------------------------------- DIE ABSCHNITTE — sie kommen herein, statt da zu sein --------------------------------------------------------------------------- Ein kurzer, gestaffelter Auftritt sagt in 300 ms, wie viele Abschnitte es gibt und in welcher Reihenfolge sie stehen. Danach ist er vorbei und stoert nie wieder: `both` haelt den Endzustand, es bleibt nichts in Bewegung. --------------------------------------------------------------------------- */ @keyframes ab-herein { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } .arbeitsbereich .ab-teil { animation: ab-herein .3s cubic-bezier(.22, .7, .3, 1) both; } .arbeitsbereich .ab-teil:nth-of-type(2) { animation-delay: .045s; } .arbeitsbereich .ab-teil:nth-of-type(3) { animation-delay: .09s; } .arbeitsbereich .ab-teil:nth-of-type(4) { animation-delay: .135s; } .arbeitsbereich .ab-teil:nth-of-type(5) { animation-delay: .18s; } .arbeitsbereich .ab-teil:nth-of-type(6) { animation-delay: .225s; } .arbeitsbereich .ab-teil:nth-of-type(n + 7) { animation-delay: .27s; } /* Ein Pfad ist zum Lesen UND zum Kopieren da: er darf umbrechen, wo er will, sonst schiebt ein tiefer Ordnername die ganze Spalte auf. */ .arbeitsbereich .ab-pfad { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; overflow-wrap: anywhere; user-select: all; } /* Vorformatierter Text — Ausgabe, Doc-Rumpf, fester Kontext. Er scrollt selbst und bekommt einen Deckel: ein 8000-Zeichen-Doc darf das Detail nicht zu einer Endlosbahn machen. */ .arbeitsbereich .ab-vor { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .84em; line-height: 1.5; max-height: 22em; overflow-y: auto; overscroll-behavior: contain; } /* =========================================================================== ABSCHNITT DATEIEN =========================================================================== */ /* Ueberschrift und Umschaltung in EINER Zeile — die Umschaltung gehoert sichtbar zur Ueberschrift „Dateien", nicht als zweiter Block darunter. `flex-wrap` statt fester Breiten: bei 390 px rutscht sie von selbst unter die Ueberschrift. */ .arbeitsbereich .ab-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .arbeitsbereich .ab-kopfzeile h2 { margin: 0; } /* SERVER ODER DIESER RECHNER — welcher, muss man SEHEN. Ohne diese Regeln trug die Aussage allein `aria-pressed`: fuer ein Vorleseprogramm lesbar, fuer ein Auge nicht. Zwei gleich aussehende Knoepfe, von denen einer gilt, sind schlimmer als keine Umschaltung — man weiss dann nicht, wessen Dateien man gerade vor sich hat. Die Aussage haengt nicht an der Farbe allein: der gewaehlte Knopf steht auf der Akzentflaeche UND traegt den Rahmen. */ .arbeitsbereich .ab-quelle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--rahmen); border-radius: 99px; background: var(--flaeche-tief); padding: 2px; } .arbeitsbereich .ab-quelle button { background: transparent; border: 1px solid transparent; color: var(--gedaempft); border-radius: 99px; padding: 5px 12px; font-size: .84em; white-space: nowrap; transition: background-color .15s ease, color .15s ease; } .arbeitsbereich .ab-quelle button[aria-pressed="true"] { background: var(--akzent); color: var(--akzent-text); font-weight: 600; border-color: var(--akzent); } .arbeitsbereich .ab-quelle button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; } .arbeitsbereich .ab-appknopf { flex: 0 0 auto; font-size: .86em; } /* Die 409-Sperre steht zwischen Ueberschrift und Baum und braucht Luft nach unten, sonst klebt sie am Baumkasten und sieht aus wie dessen Kopfzeile. ⚠️ GEMESSEN: os4.css kennt `.hinweis.info` (671) und `.hinweis.schlimm` (672), aber KEIN `.hinweis.warn` — der Sperr-Kasten sah deshalb aus wie ein neutraler Hinweis, obwohl er der einzige Kasten ist, der eine Sperre meldet. Nachgetragen wird das hier und nur fuer diesen Bereich: os4.css gehoert einem anderen Agenten, und zwei schreibende Besitzer an einer Datei sind hier schon kollidiert. Wandert die Regel spaeter nach os4.css, kann diese hier ersatzlos weg. */ .arbeitsbereich .hinweis.warn { border-left-color: var(--warn); } .arbeitsbereich #ab-sperre:not(:empty) { margin: 10px 0; } .arbeitsbereich .ab-sperre p { margin: 0; } /* Zwei Spalten, beide mit minmax(0, …) — dieselbe Regel wie os4.css:148,190,191. Ohne die 0 als Minimum bekommt eine Grid-Spalte `min-width: auto`, waechst mit ihrem laengsten Kind (hier: ein langer Dateiname) und drueckt die Nachbarspalte aus dem Fenster. `align-items: start` haelt beide Kaesten bei ihrer eigenen Hoehe, statt den kuerzeren auf die Hoehe des laengeren zu ziehen. */ /* Der Baum darf auf einem breiten Schirm mitwachsen, aber nicht davonlaufen: `clamp(17em, 22%, 26em)` heisst 17 em wie bisher als Untergrenze, danach ein Fuenftel der verfuegbaren Breite, bei 26 em ist Schluss. Ein Dateibaum wird durch mehr Breite LESBARER (weniger „langer-name…js"), aber jenseits von 26 em gewinnt der Editor daneben mehr. Die Einrueckung bleibt unveraendert — „Platz nutzen" heisst hier ausdruecklich nicht, den Baum flachzuklopfen. */ .arbeitsbereich .ab-dateien { display: grid; grid-template-columns: minmax(0, clamp(17em, 22%, 26em)) minmax(0, 1fr); gap: var(--luft); align-items: start; } .arbeitsbereich .ab-baumkasten { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; } /* HIER STEHT DIE REGEL, AN DER os2 GESCHEITERT IST. `max-height` in vh, `overflow-y: auto`, `min-height: 0` — der Baum bekommt eine endliche Hoehe und scrollt darin. Er kann damit nichts mehr aus dem Bild schieben, egal ob er 12 oder 4000 Knoten hat. `overscroll-behavior: contain` verhindert zusaetzlich, dass ein Wisch am Ende des Baumes die Detailspalte dahinter mitzieht (auf dem Telefon der Unterschied zwischen „ich scrolle im Baum" und „die Seite ist mir weggerutscht"). Die untere Schranke ist bewusst klein: bei 390 x 844 mit offener Tastatur bleiben von der Detailspalte keine 300 px uebrig. */ .arbeitsbereich .ab-baum { max-height: clamp(160px, 40vh, 440px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px; } .arbeitsbereich .ab-knoten { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); font-size: .86em; line-height: 1.35; padding: 5px 6px 5px calc(6px + var(--tiefe, 0) * 13px); border-radius: 6px; /* transform statt margin/padding beim Antippen: nur der Compositor arbeitet. */ transition: background-color .13s ease, transform .13s ease; } @media (hover: hover) { .arbeitsbereich .ab-knoten:hover { background: var(--flaeche-hoch); } } .arbeitsbereich .ab-knoten:active { transform: scale(.985); } .arbeitsbereich .ab-knoten:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; } /* Die offene Datei ist markiert, und zwar nicht nur ueber Farbe: ein Balken links traegt die Aussage auch dort, wo Farben nicht unterschieden werden. */ .arbeitsbereich .ab-knoten[aria-current="true"] { background: var(--akzent-hauch); border-left-color: var(--akzent); color: var(--akzent); } .arbeitsbereich .ab-knoten[data-art="dir"] { font-weight: 550; } .arbeitsbereich .ab-pfeil { flex: 0 0 auto; width: 12px; height: 12px; display: grid; place-items: center; color: var(--gedaempft); transition: transform .16s cubic-bezier(.22, .7, .3, 1); } .arbeitsbereich .ab-knoten[data-offen="ja"] .ab-pfeil { transform: rotate(90deg); } .arbeitsbereich .ab-pfeil-leer { visibility: hidden; } .arbeitsbereich .ab-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbeitsbereich .ab-groesse { flex: 0 0 auto; font-variant-numeric: tabular-nums; } /* WAS DIE APP UEBER EINEN EINTRAG WEISS, muss man auch sehen. „geheim" markiert eine Datei, in der vermutlich Zugangsdaten stehen (nur auf dem lokalen Weg; der Server listet Symlinks gar nicht erst, workspace.routes.js:69). Ohne eigene Regel stand das Wort in derselben Schrift wie der Dateiname und war damit keine Warnung, sondern Text. Die Aussage haengt nicht an der Farbe allein — der Rahmen traegt sie mit. */ .arbeitsbereich .ab-merk { flex: 0 0 auto; font-size: .74em; line-height: 1; padding: .2em .45em; border-radius: 5px; color: var(--gedaempft); border: 1px solid var(--rahmen); } .arbeitsbereich .ab-merk-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rahmen)); background: color-mix(in srgb, var(--warn) 10%, transparent); font-weight: 600; } /* Notizen IM Baum (gekuerzter Zweig, unlesbarer Ordner). Sie stehen auf der Ebene ihrer Kinder — dieselbe Einrueckung wie .ab-knoten, sonst haengt der Satz optisch am falschen Ordner. */ .arbeitsbereich .ab-zweignotiz { margin: 0; padding: 4px 6px 4px calc(6px + var(--tiefe, 0) * 13px); color: var(--gedaempft); overflow-wrap: anywhere; } .arbeitsbereich .ab-zweig-schlecht { color: var(--schlecht); } .arbeitsbereich .ab-notiz { margin: 0; padding: 6px 10px; } .arbeitsbereich .ab-baumkasten .ab-notiz:not(:empty) { border-top: 1px solid var(--rahmen); background: color-mix(in srgb, var(--warn) 10%, transparent); } .arbeitsbereich .ab-nachladen { width: 100%; background: transparent; color: var(--akzent); border-color: var(--akzent-rand); } .arbeitsbereich .ab-leer { padding: 18px 12px; text-align: center; } /* ----- das Blatt: Kopfzeile, Textfeld, Notiz ------------------------------ */ .arbeitsbereich .ab-blatt { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche); min-width: 0; display: flex; flex-direction: column; } .arbeitsbereich .ab-blattkopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--rahmen); background: var(--flaeche-tief); border-radius: var(--radius) var(--radius) 0 0; } .arbeitsbereich .ab-blattkopf .ab-pfad { flex: 1 1 12em; min-width: 0; } .arbeitsbereich .ab-blattkopf button { flex: 0 0 auto; } /* „geaendert" pulsiert — aber ueber opacity, nicht ueber Farbe oder Groesse. Es ist die einzige dauerhafte Bewegung in dieser Datei und sie hat einen Grund: ungespeicherte Arbeit ist der teuerste Zustand dieses Bildschirms. */ @keyframes ab-pochen { 50% { opacity: .45; } } .arbeitsbereich .ab-marke-geaendert { flex: 0 0 auto; font-size: .74em; font-weight: 600; padding: .16em .5em; border-radius: 99px; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--rahmen)); animation: ab-pochen 1.8s ease-in-out infinite; } .arbeitsbereich .ab-editor { width: 100%; border: 0; border-radius: 0 0 var(--radius) var(--radius); background: transparent; color: var(--text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; line-height: 1.55; padding: 10px 12px; min-height: 14em; max-height: 46vh; resize: vertical; overflow: auto; overscroll-behavior: contain; tab-size: 2; } .arbeitsbereich .ab-editor:focus { outline: 2px solid var(--akzent); outline-offset: -2px; } .arbeitsbereich #ab-blatt-notiz:not(:empty) { border-top: 1px solid var(--rahmen); color: var(--schlecht); } /* Der eine hervorgehobene Knopf je Kasten. os4.css faerbt Knoepfe absichtlich zurueckhaltend; „Speichern" und „Ausfuehren" sind die zwei Stellen, an denen etwas wirklich passiert — die duerfen sich zeigen. */ .arbeitsbereich .ab-haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; transition: opacity .15s ease, transform .12s ease; } .arbeitsbereich .ab-haupt:disabled { opacity: .45; } .arbeitsbereich .ab-haupt:not(:disabled):active { transform: scale(.97); } /* =========================================================================== ABSCHNITT LAEUFE =========================================================================== */ /* DER AUFTRAGS-KASTEN — Feld, zwei Auswahlen, ein Knopf. Die Reihe wickelt um: bei 390 px stehen Modell, Aufwand und der Knopf untereinander, ohne dass eine Auswahl auf 4 em zusammengedrueckt wird. */ .arbeitsbereich .ab-auftrag { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .arbeitsbereich .ab-auftrag-feld { display: flex; flex-direction: column; gap: 4px; } .arbeitsbereich .ab-auftrag-feld textarea { width: 100%; resize: vertical; min-height: 4.4em; } .arbeitsbereich .ab-auftrag-reihe { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .arbeitsbereich .ab-auftrag-wahl { display: flex; flex-direction: column; gap: 4px; flex: 1 1 11em; min-width: 0; } .arbeitsbereich .ab-auftrag-wahl select { width: 100%; } .arbeitsbereich .ab-auftrag-reihe button { flex: 0 0 auto; } .arbeitsbereich #ab-run-stand:not(:empty) { margin: 0; } /* DREISSIG LAEUFE SIND EINE LISTE, KEINE SAEULE. Bisher stand jeder Lauf allein in einer Zeile und man scrollte an dreissig fast leeren Karten vorbei, waehrend rechts Platz frei war. Dasselbe Raster wie oben — `auto-fit` entscheidet, `min(100%, …)` schuetzt das Telefon. 24 em, weil eine Lauf-Karte den Auftrag (120 Zeichen) und eine Fusszeile mit Datum, Kosten und diff-Stat tragen muss. Die Karten selbst aendern sich nicht: gleiche Schrift, gleiche Polsterung. */ .arbeitsbereich #ab-laeufe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24em), 1fr)); gap: 8px; align-items: start; } /* Der Abstand kam bisher von der Nachbarschaft; im Raster macht ihn `gap`. Zwei Quellen fuer denselben Abstand ergaeben in der zweiten Spalte eine krumme Zeile. */ .arbeitsbereich #ab-laeufe .ab-lauf + .ab-lauf { margin-top: 0; } .arbeitsbereich .ab-lauf-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .arbeitsbereich .ab-lauf-titel { font-weight: 550; min-width: 0; overflow-wrap: anywhere; } .arbeitsbereich .ab-lauf-fuss { margin-top: 4px; } /* =========================================================================== ABSCHNITT CHATS =========================================================================== */ /* Die Chats des Projekts als mitwachsendes Raster statt als eine Saeule. Ein Chat-Kasten traegt Titel, Zeit und eine Fusszeile — 19 em reichen dafuer, und auf einem breiten Schirm stehen dann drei bis vier nebeneinander statt vier untereinander. `auto-fit` + `min(100%, …)`: dieselbe Entscheidung wie oben, damit es auf 390 px eine einzige Spalte bleibt. */ .arbeitsbereich .ab-chatliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19em), 1fr)); gap: 6px; align-items: start; } .arbeitsbereich .ab-chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-align: left; width: 100%; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: 9px 11px; color: var(--text); transition: border-color .15s ease, transform .13s ease, background-color .15s ease; } @media (hover: hover) { .arbeitsbereich .ab-chat:hover { border-color: var(--akzent-rand); background: var(--flaeche-hoch); } } .arbeitsbereich .ab-chat:active { transform: scale(.99); } .arbeitsbereich .ab-chat-titel { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .arbeitsbereich .ab-chat-neben { justify-self: end; white-space: nowrap; } .arbeitsbereich .ab-chat-unten { grid-column: 1 / -1; } /* =========================================================================== ABSCHNITT WISSEN =========================================================================== */ /* Die Themen-Chips duerfen umbrechen — ein Projekt kann ein Dutzend Themen tragen, und eine Reihe, die nicht umbricht, schiebt die Detailspalte quer. */ .arbeitsbereich .ab-themen { flex-wrap: wrap; } .arbeitsbereich .ab-doc:not(:empty) { margin-top: 10px; } .arbeitsbereich .ab-doc-karte { animation: ab-herein .22s cubic-bezier(.22, .7, .3, 1) both; } .arbeitsbereich .ab-doc-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; } .arbeitsbereich .ab-kontext { margin-top: 10px; } .arbeitsbereich .ab-kontext-kopf { margin-bottom: 6px; } /* =========================================================================== ABSCHNITT BEFEHL =========================================================================== */ .arbeitsbereich .ab-befehl { display: flex; flex-direction: column; gap: 10px; } .arbeitsbereich .ab-befehl-zeile { display: flex; flex-direction: column; gap: 4px; } .arbeitsbereich .ab-befehl-zeile input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .arbeitsbereich .ab-befehl-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .arbeitsbereich .ab-befehl-knoepfe span { min-width: 0; } .arbeitsbereich .ab-ausgabe { border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche-tief); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } /* Die Ausgabe kommt gesammelt am Schluss — die kurze Einblendung sagt „das ist jetzt neu", ohne dass man den Kasten sucht. Sie laeuft bei JEDEM Befehl neu an, weil arbeitsbereich.js die Klasse vorher abnimmt. */ .arbeitsbereich .ab-ausgabe.ab-neu { animation: ab-herein .26s cubic-bezier(.22, .7, .3, 1) both; } .arbeitsbereich .ab-echo { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; padding-bottom: 6px; border-bottom: 1px solid var(--rahmen); } .arbeitsbereich .ab-stderr { color: var(--schlecht); } .arbeitsbereich .ab-exit { font-size: .82em; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .arbeitsbereich .ab-exit.ab-gut { color: var(--gut); } .arbeitsbereich .ab-exit.ab-warn { color: var(--warn); } .arbeitsbereich .ab-exit.ab-schlecht { color: var(--schlecht); } /* =========================================================================== UNTERWEGS — entschieden nach BREITE und ZEIGER, nie nach Geraetenamen =========================================================================== iPadOS meldet sich im User-Agent woertlich als „Macintosh". Wer nach dem Namen fragt, haelt ein iPad fuer einen Schreibtischrechner und liefert ihm 28-px- Trefferflaechen — genau dieser Fall hat am 06.08. ein anderes Projekt erwischt. Gefragt wird deshalb ausschliesslich nach dem, was zaehlt: wie breit ist das Fenster (@media max-width) und womit wird gezeigt (@media pointer: coarse). In arbeitsbereich.js steht dazu KEINE einzige Zeile — die Frage gehoert ins Blatt, wo sie sich bei jeder Drehung des Geraets von selbst neu beantwortet. =========================================================================== */ /* Bei 860 px stellt os4.css auf die schmale Anordnung um (os4.css:496) — von dort an stehen Baum und Blatt UNTEREINANDER. Nebeneinander waeren beide zu schmal, um noch etwas zu zeigen. */ @media (max-width: 860px) { /* Untereinander darf der Baum weniger Hoehe nehmen: er teilt sie sich jetzt mit dem Editor auf demselben Bildschirm. */ .arbeitsbereich .ab-baum { max-height: clamp(150px, 32vh, 320px); } .arbeitsbereich .ab-editor { max-height: 40vh; } .arbeitsbereich .ab-vor { max-height: 16em; } } /* BAUM UND BLATT UNTEREINANDER, SOLANGE NEBENEINANDER SCHLECHTER WAERE — und das endet nicht bei 860 px, wie hier bis zum 09.08.2026 stand. NACHGERECHNET (os4.css:68,70,217,597): das Detail bekommt Fenster − 226 (Schiene) − 320 (Liste), davon gehen 2 × 30 px Polsterung ab. Bei 1000 px Fenster bleiben 394 px Inhalt; davon will der Baum 17 em (272 px), dem Editor blieben 102 px. Das ist kein Editor mehr, das ist eine Spalte mit Silben. Erst ab rund 1240 px (634 px Inhalt) bleiben ihm ueber 340 px — darunter ist die volle Breite untereinander die bessere Nutzung des Platzes. Das ist KEIN Widerspruch zur Regel „Platz nutzen": untereinander benutzt BEIDE die ganze Breite, nebeneinander benutzte sie keiner von beiden. */ @media (max-width: 1240px) { .arbeitsbereich .ab-dateien { grid-template-columns: minmax(0, 1fr); } } /* Finger statt Maus. 44 px ist die kleinste Flaeche, die ein Erwachsener sicher trifft — bei 390 px Breite ist der Dateibaum sonst unbedienbar, weil zwischen zwei Zeilen kein Platz zum Danebentippen bleibt. */ @media (pointer: coarse) { .arbeitsbereich .ab-knoten, .arbeitsbereich .ab-chat, .arbeitsbereich .ab-thema, .arbeitsbereich .ab-nachladen, .arbeitsbereich .ab-blattkopf button, .arbeitsbereich .ab-befehl-knoepfe button { min-height: 44px; } .arbeitsbereich .ab-knoten { font-size: .92em; gap: 8px; } .arbeitsbereich .ab-pfeil { width: 18px; height: 18px; } /* 16 px ist keine Geschmacksfrage: Safari auf iOS zoomt beim Hineintippen in JEDES Feld, dessen Schrift kleiner ist — danach steht die halbe Oberflaeche ausserhalb des Bildes und man muss von Hand zurueckzoomen. */ .arbeitsbereich .ab-editor, .arbeitsbereich .ab-befehl-zeile input { font-size: 16px; } } /* Sehr schmal (iPhone hochkant, 390 px und weniger): der Kopf des Blattes bricht um, damit Pfad und „Speichern" beide ganz sichtbar bleiben, statt sich gegenseitig abzuschneiden. */ @media (max-width: 430px) { .arbeitsbereich .ab-blattkopf { padding: 8px; } .arbeitsbereich .ab-blattkopf .ab-pfad { flex-basis: 100%; } .arbeitsbereich .ab-blattkopf button { margin-left: auto; } .arbeitsbereich .ab-befehl-knoepfe button { width: 100%; } } /* Ein aufgeklapptes Telefon oder ein iPad quer: viel Breite, wenig Hoehe. Dann ist die Hoehe das knappe Gut und nicht die Breite — der Baum wird flacher, damit unter ihm noch etwas anderes auf den Schirm passt. */ @media (max-height: 560px) and (min-width: 861px) { .arbeitsbereich .ab-baum { max-height: 46vh; } .arbeitsbereich .ab-editor { max-height: 46vh; } } /* =========================================================================== WER KEINE BEWEGUNG WILL, BEKOMMT KEINE =========================================================================== Nicht abgeschwaecht, sondern aus. Das gilt auch fuer das pochende „geaendert" — die Marke steht dann still da und sagt dasselbe. =========================================================================== */ @media (prefers-reduced-motion: reduce) { .arbeitsbereich .ab-teil, .arbeitsbereich .ab-doc-karte, .arbeitsbereich .ab-ausgabe.ab-neu, .arbeitsbereich .ab-marke-geaendert { animation: none !important; } .arbeitsbereich .ab-knoten, .arbeitsbereich .ab-pfeil, .arbeitsbereich .ab-chat, .arbeitsbereich .ab-haupt { transition: none !important; } .arbeitsbereich .ab-knoten:active, .arbeitsbereich .ab-chat:active, .arbeitsbereich .ab-haupt:not(:disabled):active { transform: none; } }