/* Sub-tab look is unified in review-panel.css (.status-subtab); keep only the row's side padding here (the Status tab has no outer container padding). 🔴 SEITLICH 10px -- die Hausnummer des Panels (`.wiki-sync-panel__tabs { margin: 10px 10px 8px }`, in social-hub.css als solche benannt). Bis 22.08.2026 standen hier 12px, und dieser Reiter war damit der einzige, dessen Inhalt nicht unter den Reitern darüber begann. ⚠️ Die 12px waren KEIN Ausrutscher dieser Zeile: das ganze Besucher-Dashboard darunter stand auf 12px, die Zeile war bündig dazu. Deshalb sind die drei Regeln weiter unten IM SELBEN Zug mitgewandert -- nur die Zeile zu verschieben hätte eine bestehende Bündigkeit gegen eine neue getauscht. ⚠️ Nur WAAGERECHT. Die 4px Oberluft bleiben: diese Zeile zieht ihre Trennlinie über die volle Panelbreite, die der übrigen Reiter ist um 10px eingerückt -- sie zum vollen Mitglied der geteilten Regel zu machen, änderte mehr als eine Einrückung. */ .status-subtabs { padding: 4px 10px 0; } .status-subsection { display: none; } .status-subsection.is-active { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* The dashboard fills the sub-section and scrolls when taller than the panel. */ /* Fixed time-range bar above the scroll area, like a real sub-tab row. */ /* Live presence line, directly above the time-range bar -- both belong to the fixed header over the scrolling dashboard, so they share its padding and hairline. */ .va-live { flex: 0 0 auto; padding: 10px; border-bottom: 1px solid var(--color-border); background: var(--color-panel-soft); } /* .va-live sets a display below, which would otherwise outrank the browser's own [hidden] rule and leave the line visible before any data has arrived. */ .va-live[hidden] { display: none; } .va-live__head { display: flex; align-items: center; gap: 8px; } .va-live__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-halo); } .va-live--quiet .va-live__dot { background: var(--color-text-muted); box-shadow: 0 0 0 3px var(--color-muted-halo); } .va-live__title { font-size: 13px; font-weight: 700; color: var(--color-text-strong); } .va-live__counts { margin-left: auto; font-size: 13px; color: var(--color-button-soft-text); } .va-live__counts b { font-size: 17px; font-weight: 700; } .va-live__split { margin-top: 4px; padding-left: 17px; font-size: 12px; color: var(--color-text-muted); } #visitor-pills { flex: 0 0 auto; padding: 10px; border-bottom: 1px solid var(--color-border); } #visitor-pills:empty { display: none; } /* 💣 EIN GETEILTER SELEKTOR, KEINE ZWEITE REGEL. Die Tafel scrollt nur, weil `.status-subsection` eine Flex-Spalte fester Hoehe ist und ihr Inhalt `flex: 1 1 auto` + `min-height: 0` + `overflow-y: auto` traegt. Fehlt das, laeuft der Inhalt einfach ueber und ist unerreichbar -- genau so ging der API-Reiter am 25.08.2026 live, weil er das Markup des Besucher-Reiters erbte, aber nicht dessen Regel. ⚠️ Ein Pruefgeruest findet das NICHT, wenn dort die Seite selbst scrollt: der Fehler haengt am Wirt, nicht am Bauteil. */ #visitor-dashboard, #api-dashboard { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; } .va-pills { display: flex; gap: 6px; margin-bottom: 0; } .va-geo-legend { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 8px; font-size: 11px; color: var(--color-text-muted); } .va-geo-scale { display: flex; gap: 2px; } .va-geo-scale i { width: 16px; height: 9px; display: inline-block; } .va-geo-clabel { margin-top: 12px; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--color-button-soft-text); display: flex; align-items: center; gap: 8px; } .va-geo-key { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; color: var(--color-text-muted); } .va-geo-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } .va-geo-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; } .va-geo-name { width: 108px; font-size: 12px; color: var(--color-button-soft-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .va-geo-bars { flex: 1; } .va-geo-bar { display: flex; align-items: center; gap: 6px; margin: 3px 0; } .va-geo-track { flex: 1; height: 9px; border-radius: 4px; background: var(--color-panel-muted); overflow: hidden; } .va-geo-fill { display: block; height: 100%; border-radius: 4px; } .va-geo-val { font-size: 11px; color: var(--color-text-muted); width: 30px; text-align: right; } /* Kopfzeile der Karte: Titel links, Schalter rechts. .va-card__label allein ist ein Block und traegt nichts neben sich. */ .va-cardhead { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; } .va-cardhead .va-card__label { margin: 0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .va-switch { display: inline-flex; align-items: center; gap: 5px; flex: none; white-space: nowrap; font-size: 11px; color: var(--color-text-muted); cursor: pointer; user-select: none; } /* ⚠️ Ohne accent-color faerbt der Browser das Kaestchen in seiner Standardfarbe -- unter Windows BLAU, und Blau ist in der Bedienoberflaeche die eine verbotene Farbe (AGENTS.md §12). Dieselbe Zeile steht aus demselben Grund an jedem anderen Kaestchen im Projekt. ⚠️ Im Dunkelmodus ist der Haken GRAU (--color-check-accent = #aaa598), nicht gold. Das ist ein Owner-Entscheid in tokens.css ("das Gold las sich matschig und zu gelb"), kein Fehler hier. */ .va-switch input { margin: 0; accent-color: var(--color-check-accent); cursor: pointer; } /* Die dritte Kurve: Editoren. Farbe ueber ein Token, und die STRICHART traegt die Identitaet mit -- drei Reihen in einem Bild duerfen sich nie allein durch die Farbe unterscheiden (die gerechnete Grenze der Projektpalette, siehe --color-chart-1..4 in tokens.css). Die gestrichelte Linie sagt ausserdem "andere Groessenordnung", was bei eingeschalteter rechter Skala genau stimmt. */ .va-line { fill: none; stroke-width: 2; stroke-linejoin: round; } .va-line--editors { stroke: var(--color-chart-1); stroke-dasharray: 5 3; } .va-dot--editors { fill: var(--color-chart-1); } /* Die rechte Achse steht in der Farbe IHRER Kurve -- grau liesse offen, welche der drei an ihr haengt. */ .va-axis-right { fill: var(--color-chart-1); font-size: 10px; } .va-chartlegend { display: flex; gap: 16px; justify-content: center; margin-top: 6px; font-size: 11px; color: var(--color-text-muted); } .va-chartlegend i.va-legend--dash { background: repeating-linear-gradient(90deg, var(--color-chart-1) 0 5px, transparent 5px 8px); } .va-legend__scale { opacity: 0.75; } .va-chartlegend i.va-legend--solid { background: var(--color-text-strong); } .va-chartlegend i.va-legend--avgdash { background: repeating-linear-gradient(90deg, var(--color-text-strong) 0 4px, transparent 4px 7px); } /* Verweildauer-Histogramm. Entwurf: docs/superpowers/specs/2026-08-25-verweildauer-design.md 💣 EINE Farbe fuer alle Balken, KEINE sequenzielle Leiter -- aus zwei Gruenden. Erstens traegt hier allein die Hoehe die Aussage; eine Farbleiter taeuschte eine zweite vor, die es nicht gibt. Zweitens, und das ist der harte Grund: die Hausleiter --color-accent -> -accent-strong -> -accent-brown ist NICHT themenfest. --color-accent-brown ist hell #7a5a3a (dunkelbraun) und dunkel #c9a97e (helles Tan) -- die Leiter kehrt sich um und ist im Dunkelmodus keine mehr (gemessen: rgb(207,183,103) gegen rgb(201,169,126), kein sichtbarer Unterschied). */ .va-hist__bar { fill: var(--color-accent-strong); } .va-hist__axis { stroke: var(--color-divider); stroke-width: 1; } .va-hist__tick { fill: var(--color-text-muted); font-size: 9px; } /* Die zwei Striche sind Beschriftung, keine Daten -- darum Tinte statt Gold. 💣 Ein Tintenstrich ueber einem goldenen Balken hat im DUNKLEN Thema nur 1,7:1 Kontrast, dort ist die Tinte hell und der Balken auch. Darum liegt unter jedem Strich eine breitere Linie in der Kartenfarbe: die Fassung trennt ihn vom Balken, egal welches Thema laeuft. */ .va-hist__mark-casing { stroke: var(--color-panel); stroke-width: 4; } .va-hist__mark { stroke: var(--color-text-strong); stroke-width: 1.5; } .va-hist__mark--avg { stroke-dasharray: 4 3; } .va-hist__flag { fill: var(--color-text-strong); font-size: 9.5px; font-weight: 700; } .va-note { font-size: 11px; line-height: 1.5; color: var(--color-text-muted); margin-top: 8px; } .va-chartlegend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } .va-pill { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: var(--color-panel); color: var(--color-text-muted); cursor: pointer; } .va-pill.is-active { background: var(--color-button-soft-text); color: var(--color-panel); border-color: var(--color-button-soft-text); } .va-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } /* Editoren-Linie und ihr Schalter: Mockup docs/besucherstatistik-verweildauer-mockup.html. Vier Kacheln statt drei, sobald die Editorenzahl dabei ist. Bei 400 px Panelbreite bleiben je ~66 px Innenbreite -- deshalb die Zahl eine Spur kleiner, sonst reisst ein sechsstelliger Wert (Zeitraum "Alles") aus der Kachel. */ .va-kpis--four { grid-template-columns: repeat(4, 1fr); } .va-kpis--four .va-kpi { padding: 11px 8px; } .va-kpis--four .va-kpi__value { font-size: 17px; } /* Die Verweildauer-Kacheln tragen eine EINHEIT mit ("0:45 min", "1:30 h"), nicht nur eine Zahl wie die uebrigen. Bei 20 px brach "0:45 min" in der 400 px breiten Saeule auf zwei Zeilen um -- vom Owner an der Live-Seite gemeldet, 26.08.2026. Kleiner statt umbrechend: eine Kennzahl, die ueber zwei Zeilen laeuft, liest sich als zwei. */ /* ⚠️ Und weniger Polsterung an den Seiten. Am Zeiger (400 px Panel) waere sie egal, am Telefon nicht: dort ist das Panel min(400px, 100vw - 64px), auf einem 360er also 296 px -- und dann schiebt `nowrap` die Kachelreihe ueber die Karte hinaus, weil eine Grid-Spalte mit min-width:auto nicht mehr unter ihren Text schrumpfen kann. Bei 8 px gemessen: passt bei 296, 311 und 400 px. */ .va-kpis--dauer .va-kpi { padding: 11px 8px; } .va-kpis--dauer .va-kpi__value { font-size: 15px; white-space: nowrap; } .va-kpi { background: var(--color-panel-soft); border-radius: 8px; padding: 11px; } .va-kpi__label { font-size: 12px; color: var(--color-text-muted); } .va-kpi__value { font-size: 20px; font-weight: 700; color: var(--color-button-soft-text); } .va-kpi__trend { font-size: 12px; color: var(--color-success); } .va-card { background: var(--color-panel); border: 1px solid var(--color-border-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; } .va-card__label { font-size: 13px; font-weight: 700; color: var(--color-button-soft-text); margin: 0 0 10px; } .va-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; } .va-row__name { width: 48%; color: var(--color-button-soft-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .va-row__track { flex: 1; height: 8px; background: var(--color-panel-muted); border-radius: 4px; overflow: hidden; } /* Chart-Serienfarben (#2a78d6 / #4a3aa7 …) sind eine kategoriale Datenpalette, bewusst kein UI-Token -> Designsprache-Ausnahme (Owner 2026-07-11). */ /* 💣 `display: block` ist tragend, nicht Kosmetik. .va-row__fill ist ein , und auf ein Inline-Element wirken `width` und `height` NICHT -- die Prozentbreite, die vaBars() als Inline-Style schreibt, war korrekt gerechnet und wurde vom Layout ignoriert. Alle acht Balkenlisten (Referrer, Routen, Orte, Transportmittel, ...) standen dadurch unsichtbar da, waehrend die Zahl daneben stimmte. Der Gegenbeweis ist .va-geo-fill weiter oben: dieselbe Bauart, aber mit der Zeile -- und genau diese Liste war nie kaputt. */ .va-row__fill { display: block; height: 100%; border-radius: 4px; background: #2a78d6; } .va-row__val { color: var(--color-text-muted); font-size: 12px; min-width: 34px; text-align: right; } /* „Aktivste Zeiten": 7 Zeilen zu 24 Zellen, darueber eine Stundenzeile. Die Zellfarbe bleibt als Inline-Style im Markup (sie ist datengetrieben), alles andere haengt hier an Tokens -- die Beschriftungen standen bis 2026-08-13 mit rohem #8a7355 im JS. */ .va-heat { display: flex; flex-direction: column; gap: 2px; } .va-heat__row { display: flex; gap: 2px; align-items: center; } .va-heat__day { flex: 0 0 18px; font-size: 10px; color: var(--color-text-muted); } .va-heat__cells { display: flex; gap: 2px; flex: 1; } .va-heat__cell { flex: 1; min-width: 0; height: 13px; border-radius: 2px; } .va-heat__hours { margin-bottom: 3px; } /* min-width: 0 laesst die 24 Spalten gleich breit bleiben; nur jede dritte traegt eine Zahl, die deshalb ueber ihre ~11,8 px breite Zelle hinausragen darf, ohne an eine Nachbarin zu stossen. */ .va-heat__hour { flex: 1; min-width: 0; font-size: 9px; line-height: 1; text-align: center; white-space: nowrap; color: var(--color-text-muted); } .va-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .va-storage { font-size: 12px; color: var(--color-text-muted); } .va-off { padding: 24px 12px; text-align: center; color: var(--color-text-muted); font-size: 13px; } .va-feed { display: flex; align-items: center; gap: 8px; margin: 7px 0; font-size: 12px; } .va-feed__tag { flex: none; font-size: 10px; font-weight: 700; color: var(--color-text-muted); background: var(--color-panel-muted); border-radius: 4px; padding: 2px 6px; } .va-feed__label { flex: 1; color: var(--color-button-soft-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .va-feed__meta { flex: none; color: var(--color-text-muted); font-size: 11px; } .va-more { margin-bottom: 10px; } .va-more > summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 14px; font-weight: 700; color: var(--color-button-soft-text); cursor: pointer; list-style: none; background: var(--color-panel-muted); border: 1px solid var(--color-border-strong); border-radius: 12px; } .va-more > summary:hover { background: var(--color-button-soft-hover); } .va-more[open] > summary { margin-bottom: 10px; } .va-more > summary::-webkit-details-marker { display: none; } .va-more > summary::after { content: "\25B8"; margin-left: auto; color: var(--color-text-muted); font-size: 12px; } .va-more[open] > summary::after { content: "\25BE"; } /* --- API-Tafel (Entwurf docs/superpowers/specs/2026-08-25-api-nutzung-design.md) -------------- Drei Bauteile, im Mockup docs/api-nutzung-mockup.html in hell UND dunkel gemessen. */ /* Die Statusverteilung als ein gestapelter Balken statt vier Zeilen: die Anteile sind extrem ungleich (2xx ueber 95 %), und vier Balken nebeneinander zeigten dreimal fast nichts. */ .va-stack { display: flex; height: 22px; border-radius: 5px; overflow: hidden; margin: 2px 0 9px; } .va-stack i { display: block; height: 100%; } .va-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--color-text-muted); } .va-legend span { display: inline-flex; align-items: center; gap: 5px; } .va-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; } /* Die zwei Plaketten der Fehlerliste. 🪤 DAS TOKEN HEISST `--color-warning`, NICHT `--color-warn`. Die erste Fassung schrieb `--color-warn`, und weil eine undefinierte CSS-Variable die ganze Deklaration ungueltig macht, blieb die Plakette DURCHSICHTIG: weisse Schrift auf der Karte, Kontrast 1,02 -- in hell UND dunkel. Das Mockup hatte den Fehler nicht gefunden, weil es seine Tokens SELBST definierte; dort war `--color-warn` eine Erfindung. Gemessen im Browser gegen die echte tokens.css. ⭐ Und beide nehmen ein ENTWORFENES PAAR, keine selbstgebaute Themenausnahme: tokens.css haelt `--color-warning-strong` mit `--color-warning-strong-text` und `--color-button` mit `--color-button-text` zusammen, und beide Paare sind in hell wie dunkel aufeinander abgestimmt. Der erste Versuch drehte die Schriftfarbe stattdessen per `[data-theme="dark"]` von Hand um -- das haette beim naechsten Tokenwechsel still auseinanderlaufen koennen. Die zwei Plaketten ziehen bewusst in verschiedene Richtungen (dunkle Tinte auf Gold, helle auf Braun); genau deshalb gibt es zwei Klassen und keine gemeinsame Regel. */ .va-feed__tag--warn { background: var(--color-warning-strong); color: var(--color-warning-strong-text); } .va-feed__tag--neutral { background: var(--color-button); color: var(--color-button-text); }