/* =========================================================================== AGORA — Blatt für den Bereich „Übersicht" =========================================================================== EIGENE DATEI, nicht ein Anhang an agora.css: an agora.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 agora.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 agora.css (Block „BALKEN UND RINGE", ab Zeile 659), weil an der Fassung mehrere Hände gleichzeitig arbeiteten und agora.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 agora.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 agora.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. Der Weisston des Produkts wird hier dieselbe Deckung auf var(--text), damit die Spur auch auf einem HELLEN Thema noch eine Spur ist und nicht ein heller Fleck auf hellem Grund. Auf dem dunklen Thema ist der Unterschied gegen --text rechnerisch nicht sichtbar. 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 gegen --hintergrund (WCAG 2.1, dieselbe Formel wie AGORA.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) allein) → 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: var(--luft); 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 % — EIN RASTER, DREI GESCHWISTER (Owner 03.09.2026): Anthropic links, xAI daneben oben, OpenRouter neben xAI. Die alte Flex-Reihe (`flex: 0 1 auto`) liess den Anthropic-Block als Block-Element die volle Breite nehmen — xAI und OpenRouter fielen darunter, rechts neben Anthropic blieb die Breite leer. `repeat(auto-fit, minmax(min(100%, var(--karten-min)), 1fr))` — dieselbe Form wie die Kennzahlen-Kacheln. Drei Blöcke nebeneinander, solange `--karten-min` dreimal in die Karte passt; darunter in der Reihenfolge Anthropic → xAI → OpenRouter. Überschriften auf einer Linie (`align-items: start`). =========================================================================== */ .ub-anbieter-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--karten-min)), 1fr)); align-items: start; gap: var(--luft); margin: 0 0 var(--luft); } .ub-anbieter { 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(--raster-abstand); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 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: var(--linie) solid var(--rahmen); border-radius: var(--radius); padding: var(--karte-innen); } .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-family: var(--serif); font-size: 1.6em; font-weight: 600; 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