/* =========================================================================== OS4 — Blatt für den Bereich „Übersicht" =========================================================================== EIGENE DATEI, nicht ein Anhang an os4.css: an os4.css wird parallel gearbeitet (die Karten aus os3), und zwei Agenten, die dieselbe 35-KB-Datei neu schreiben, verlieren gegenseitig ihre Arbeit. src/fassungen.js liest die Dateiliste einer Fassung aus den Verweisen der index.html (REF_RE), es gibt also keine zweite Stelle, an der eine neue Datei angemeldet werden müsste. KEIN EINZIGER FESTER FARBWERT — dieselbe Regel wie in os4.css. Alles hängt an den zehn Variablen aus src/oberflaeche.js; wer sein Thema auf Papier stellt, soll auch hier Papier sehen und nicht ein dunkles Loch. Deckkraft statt rgba(255,255,255,…): ein fester Weisston ist auf einem hellen Thema unsichtbar. =========================================================================== */ /* =========================================================================== BALKEN UND RINGE — Owner 09.08.2026: „kacke farbe, sieht man schlecht, mach das anders" =========================================================================== ZUSAMMENGELEGT AM 09.08.2026. Diese Regeln standen kurzzeitig in os4.css (Block „BALKEN UND RINGE", ab Zeile 659), weil an der Fassung mehrere Hände gleichzeitig arbeiteten und os4.css das einzige Blatt war, das der Thema- Aufgabe offenstand. Dort mussten sie die Gewichtung mit doppelt genannten Klassen anheben (`.ub-balken.ub-balken.warn`), weil uebersicht.css NACH os4.css geladen wird (index.html:57-59) und bei gleicher Gewichtung sonst das spätere Blatt gewinnt. Jetzt wohnen sie dort, wo das Bauteil wohnt — und damit fällt beides weg: die zweite Kopie UND der Gewichtungstrick. Kein !important; in os4.css spricht keine Regel mehr über `.ub-*`. „Zwei Kopien, die auseinanderlaufen" ist genau der Fehler, wegen dem diese Welle läuft — die Palette lag dreifach herum, und deshalb war der Akzent noch blau. VORLAGE ist das lebende Produkt, nicht eine neue Erfindung — ui/style.css: 260-265 die Diagnose des Owners (5 px hoch, Spur bei 8 % Deckung, immer derselbe Warmton) und die drei Gegenmassnahmen 266-267 Höhe 8px · Spur rgba(255,240,234,.16) · inset 0 0 0 1px …,.10) 268-269 Füllung als Verlauf, grün 270 Verlauf amber 271 Verlauf rot ÜBERSETZT, NICHT ABGESCHRIEBEN: dieses Blatt trägt keinen festen Farbwert. rgba(255,240,234,…) ist der Weisston des Produkts; hier steht dieselbe Deckung auf var(--text), damit die Spur auch auf einem HELLEN Thema noch eine Spur ist und nicht ein weisser Fleck auf Weiss. Auf dem dunklen Thema ist der Unterschied rechnerisch nicht sichtbar: #fff0ea gegen --text #f3efec. WARUM DIE SPUR DAS EIGENTLICHE BAUTEIL IST: bei 0 % ist die Füllung 0 px breit. Bleibt die Spur unsichtbar, sieht ein leeres Fenster aus wie ein fehlender Balken — „ich weiss es gerade nicht" wäre nicht von „hier ist etwas kaputt" zu unterscheiden. Genau das war die Beschwerde. Gerechnet auf --hintergrund #0a0909 (WCAG 2.1, dieselbe Formel wie OS4.kontrast): Spur allein rgb(47,46,45) → 1,47:1 mit Randlinie rgb(67,65,64) → 1,96:1 ← die Kante, die man sieht vorher (var(--rahmen) #272524, rgb(39,37,36)) → 1,30:1 UND DIE GEGENPROBE, damit „voll" von „leer" zu unterscheiden ist — die Füllung gegen die Spur, nicht nur gegen den Hintergrund: grün 6,55:1 … 8,48:1 amber 7,19:1 … 9,05:1 rot 4,35:1 … 6,85:1 =========================================================================== */ :root { --balken-spur: color-mix(in srgb, var(--text) 16%, transparent); --balken-spur-rand: color-mix(in srgb, var(--text) 10%, transparent); --balken-hoehe: 8px; /* ui/style.css:266 — vorher 5 px, das war der Tadel */ } /* ---------- Ringe ---------------------------------------------------------- */ .ub-ringe { display: flex; flex-wrap: wrap; gap: calc(var(--luft) * 1.5); align-items: flex-start; margin: 0 0 var(--luft); } .ub-ring { width: 108px; text-align: center; } .ub-ring-bild { position: relative; width: 80px; height: 80px; margin: 0 auto 6px; } /* Der Bogen beginnt oben, nicht rechts: gedreht wird das BILD, damit die Winkelrechnung im JS bei 0 anfangen darf. */ .ub-ring-bild svg { transform: rotate(-90deg); display: block; } /* Ein SVG-Strich kann keinen inset-Schatten tragen; das Bett hat also nur die Spur selbst — dafür ist es 8 px dick auf 80 px Durchmesser, ein weit grösseres Feld als der 8-px-Balken. Dieselbe Spur wie dort: 1,47:1 statt 1,31:1 vorher. */ .ub-bett { fill: none; stroke: var(--balken-spur); stroke-width: 8; } /* GRÜN AUS DER BASISREGEL, nicht aus einer `.akzent`-Regel: artVon() (uebersicht.js:209) liefert unter 70 % „akzent", und der Akzent ist die Farbe der Knöpfe. Ein freier Ring in Knopffarbe sagt nichts; grün sagt „da ist noch Luft". Amber und Rot überschreiben es unten, sie wiegen eine Klasse mehr. */ .ub-bogen { fill: none; stroke: var(--gut); stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray var(--einfach) linear; } .ub-ring.warn .ub-bogen { stroke: var(--warn); } .ub-ring.schlecht .ub-bogen { stroke: var(--schlecht); } .ub-ring-wert { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; } .ub-ring.warn .ub-ring-wert { color: var(--warn); } .ub-ring.schlecht .ub-ring-wert { color: var(--schlecht); } .ub-ring-titel { font-size: .82em; font-weight: 600; line-height: 1.25; } .ub-ring-unten { line-height: 1.3; margin-top: 2px; } /* ---------- Konto-Kopf, Hinweise ------------------------------------------- */ .ub-konto { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: var(--luft) 0 .5em; } .ub-konto:first-child { margin-top: 0; } .ub-konto b { font-size: .98em; } /* „Auslastung geht aktuell nicht" — bewusst KRÄFTIGER als eine gedämpfte Zeile. Der Satz ersetzt eine Zahl; wer ihn überliest, hält den leeren Ring für eine 0. */ .ub-aus { margin: -4px 0 var(--luft); } .ub-aus-t { color: var(--warn); font-weight: 650; font-size: .92em; } .ub-hinw { font-size: .84em; color: var(--gedaempft); line-height: 1.45; border-left: 2px solid var(--rahmen); padding-left: 10px; margin: 4px 0 0; } /* =========================================================================== ANBIETER UND KONTEN — der Aufbau, den der Owner hingemalt hat (09.08.2026) =========================================================================== AUSLASTUNG Claude Magnus-Privat Herm&Herm 5h 0 % 7d 100 % 5h 23 % 7d 23 % GPT Grok 7d 0 % — ZWEI FLEX-REIHEN, MEHR IST ES NICHT — und genau deshalb ist es richtig: `.ub-anbieter-reihe` die Anbieter nebeneinander (Claude · GPT · Grok) `.ub-konten` die Konten EINES Anbieters nebeneinander NIRGENDS STEHT EINE SPALTENZAHL. Jeder Anbieter ist so breit wie seine Konten; Claude mit zwei Konten ist breit, GPT und Grok sind schmal und landen deshalb von allein nebeneinander — genau die Skizze. Kommt ein drittes Claude-Konto dazu, wächst die Reihe weiter und bricht um, ohne dass hier eine Zeile nachgezogen werden müsste. Auf dem Handy fällt alles untereinander, weil `flex-wrap` genau das tut, wenn kein Platz mehr ist. `align-items: flex-start` in beiden Reihen: sonst zöge die höchste Karte alle anderen auf ihre Höhe und deren Grund-Zeilen stünden mitten im Leeren. =========================================================================== */ .ub-anbieter-reihe { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--luft) calc(var(--luft) * 2.5); margin: 0 0 var(--luft); } /* `flex: 0 1 auto` — so breit wie der Inhalt, aber schrumpffähig. Kein `1 1 auto`: das zöge Grok („—") auf dieselbe Breite wie Claude mit zwei Konten und risse genau den Leerraum auf, den der Owner nicht mehr sehen will. */ .ub-anbieter { flex: 0 1 auto; min-width: 0; } .ub-anbieter > h3 { margin-top: 0; } .ub-konten { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--luft) calc(var(--luft) * 2); } .ub-konto-karte { flex: 0 1 auto; min-width: 0; } /* „—" statt einer Zahl. Es nimmt die Höhe eines Ringsatzes NICHT ein: ein leeres Feld in Ringgrösse sähe aus wie ein Ring, der nicht geladen hat. Der Strich ist gross genug, um als Aussage gelesen zu werden, und der Grund steht darunter. */ .ub-kein-wert { display: flex; flex-direction: column; gap: 2px; max-width: 22em; } .ub-kein-wert > b { font-size: 1.6em; font-weight: 700; line-height: 1.1; color: var(--gedaempft); } /* ---------- Kennzahlen ----------------------------------------------------- */ .ub-kacheln { display: grid; gap: var(--luft); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* 🔴 REPARIERT 10.08.2026 (Owner: „die Woerter gehen aus Boxen raus und co"). Die drei Teile einer Kachel sind - also INLINE. Ohne Spaltenrichtung flossen sie ineinander: „GESAMT$538.8851alles zusammen" statt drei Zeilen. Verraeterisch war `.ub-k-v { margin: .1em 0 }` direkt darunter: ein senkrechter Rand ist auf einem Inline-Element wirkungslos - die Regeln waren fuer ein Block-Layout geschrieben, das es hier nie gab. `min-width: 0` gehoert dazu: die Kachel ist ein Grid-Kind, und ohne diese Zeile weigert es sich zu schrumpfen, sobald ein Betrag laenger wird als die Spalte - dann waechst die Kachel ueber ihren Kasten hinaus statt umzubrechen. */ .ub-kachel { display: flex; flex-direction: column; min-width: 0; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); padding: var(--luft); } .ub-kachel > * { min-width: 0; } /* Lange Betraege brechen um, statt die Kachel aufzureissen. */ .ub-k-v { overflow-wrap: anywhere; } .ub-k-k { font-size: .74em; letter-spacing: .08em; text-transform: uppercase; color: var(--gedaempft); font-weight: 700; } .ub-k-v { font-size: 1.6em; font-weight: 700; line-height: 1.2; margin: .1em 0; font-variant-numeric: tabular-nums; } .ub-k-s { line-height: 1.3; } /* ---------- KACHELN, DIE EIN TOR SIND -------------------------------------- `kachel(..., ziel)` in uebersicht.js macht aus der Kachel ein