/* ═══════════════════════════════════════════════════════════════════════════ BLUE HORIZON DESIGN SYSTEM — patterns/overview.css Version: 0.1.8 · Build: 2026-09-21 Benötigt: tokens.css, base.css, card.css, patterns/shell.css VENDORED — READ-ONLY. 0.1.8 — .bh-section__link war inline und brach mit einem Symbol darin immer um. Betrifft jeden Verweis, der mit einem Chevron endet. 0.1.7 — .bh-overview trennte alles mit --bh-section-gap (48px). Der Name sagt, wofür: zwischen Sektionen. Gemessen wurden in beiden Projekten aber 23 Karten und Kachelreihen gegen 4 Sektionen — der Abstand war nach dem Minderheitsfall bemessen. Karte zu Karte steht jetzt auf --bh-space-5 (24px, der Wert beider Bestände); die größere Trennung bekommt, wer sie braucht: die Sektion. 0.1.6 — .bh-stat setzt --bh-icon-box-size. Die Symbolfläche einer Kennzahl-Kachel steht neben der Zahl, nicht neben einer Zeile Text; die Vorgabe der Komponente (Bedienhöhe) trifft den zweiten Fall, nicht diesen. Der Wert ist aus der Zahl abgeleitet, nicht gemerkt. 0.1.5 — .bh-page-head gibt seinen margin-bottom ab. Der Abstand zum Inhalt gehört dem Seitenstapel; der Kopf gehört VOR das Pattern, nicht hinein. 0.1.4 — .bh-page-head__title setzt seine Schriftgröße selbst, statt sie vom h1 zu erben. Betrifft jede Seite jedes Projekts, die einen Seitenkopf trägt: breit 48px -> 32px, schmal unverändert. 0.1.3 — .bh-stat__of: Bezugsgröße neben dem Wert („4 / 900"). 0.1.2 — .bh-stats bekommt align-items: start. Ein Raster streckt seine Kinder standardmäßig auf die Zeilenhöhe; eine Kachel mit „5" stand damit genauso hoch wie eine mit zwei Zeilen Zusatz und war zu einem Drittel leer. Kennzahlen sollen sich natürlich hoch machen. 0.1.1 — .bh-stats war auf vier Spalten festgenagelt, ohne jede Steuerung. Wer drei Kennzahlen hat, und das ist der häufigere Fall, ließ ein Viertel der Zeile leer. Jetzt --bh-stats-cols (Standard 4) und --bh-stats-cols-md (Standard 2). Derselbe Bauart-Fehler wie in card.css 0.1.1: eine feste Spaltenzahl in einer Komponente, die von außen gefüllt wird. Wer nichts setzt, sieht keine Änderung. Einstiegsseite: Kennzahlen oben, Sektionen darunter. Verbindlicher Grundriss — keine freie Kachelwand. ═══════════════════════════════════════════════════════════════════════════ */ /* DER ABSTAND HÄNGT DAVON AB, WAS GETRENNT WIRD. Zwei Karten stehen enger beieinander als zwei Sektionen — eine Sektion ist eine Gruppe mit Kopf, die zwei Karten enthalten kann, und sie braucht Luft, um als Gruppe lesbar zu sein. Kein gap, sondern Ränder am Nachbarn: gap kennt nur EINEN Wert für alle Paare. Der Behälter entscheidet trotzdem — jede Regel hier ist an .bh-overview verankert, kein Kind trägt einen eigenen Abstand mit sich herum (DESIGN.md §0c). Das ist die Ausnahme, die §0c zulässt: „im Behälter" heißt beim Behälter verankert, nicht zwingend per gap. Erstes Kind bekommt nie einen Rand — der Abstand nach oben gehört dem Seitenstapel, nicht dem Pattern. */ .bh-overview { display: flex; flex-direction: column; } .bh-overview > * + * { margin-top: var(--bh-space-5); } .bh-overview > * + .bh-section, .bh-overview > .bh-section + * { margin-top: var(--bh-section-gap); } /* ── Seitenkopf ──────────────────────────────────────────────────────────── */ .bh-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bh-space-4); flex-wrap: wrap; } /* KEIN margin-bottom: der Abstand zum Inhalt kommt vom Stapel der Seite (.bh-shell__content, gap) — eine Quelle statt zweier. Bis 0.1.4 standen hier 24px, die sich zum gap des umgebenden Behälters addierten: 40px auf Listenseiten, 72px auf der Übersicht. DESIGN.md §0c. Bedingung dafür, dass das trägt: Der Kopf muss ein Kind des Seitenstapels sein, nicht eines Patterns. Er leitet die Liste ein, er gehört nicht hinein — siehe GUIDE.md, Übersicht. */ /* Die Größe wird HIER entschieden, nicht vom Tag geerbt. Bis 0.1.3 stand hier nur margin: 0 — die Größe kam damit aus base.css (h1 = --bh-text-2xl, 48px). tokens.css reserviert diesen Wert ausdrücklich für Marketingseiten und nennt --bh-text-xl den Seitentitel; jede Anwendungsseite trug also die Marketinggröße, ohne dass das je jemand entschieden hätte. Zwölf Stellen im ersten Projekt, alle zufällig gleich, alle eine Stufe zu groß. EIN Wert, keine Stufe nach unten: Zwischen --bh-text-lg (20px, Kartentitel) und --bh-text-xl (32px, Seitentitel) hat die Skala nichts. Ein Sprung auf lg machte den Seitentitel ununterscheidbar von den Kartentiteln darunter — und zwar auf genau den Schirmen, auf denen die Rangordnung am meisten trägt. Ein clamp() dazwischen erfände Werte außerhalb der sechs Stufen und öffnete eine geschlossene Skala für eine einzige Eigenschaft (DESIGN.md §4). 32px sind schmal bereits der heutige Zustand, weil base.css h1 unter 768px ohnehin auf --bh-text-xl herunterstuft. Diese Zeile ändert also nur die breite Ansicht — und zwar auf den Wert, den die Skala dafür vorsieht. */ .bh-page-head__title { margin: 0; font-size: var(--bh-text-xl); } .bh-page-head__subtitle { margin: var(--bh-space-1) 0 0; color: var(--bh-text-muted); font-size: var(--bh-text-sm); } .bh-page-head__actions { display: flex; align-items: center; gap: var(--bh-space-2); } /* ── Kennzahlen ────────────────────────────────────────────────────────── Höchstens vier. Eine Zahl, ein Label, optional eine Veränderung. Keine Diagramme in der Kachel. */ /* Höchstens vier, und die Spaltenzahl gehört zum Inhalt, nicht zur Komponente — drei Kennzahlen sind der häufigere Fall: --bh-stats-cols ab 1024px Standard 4 --bh-stats-cols-md 768–1023px Standard 2 unter 768px immer 1 nicht steuerbar Bei drei Kacheln also style="--bh-stats-cols: 3" am .bh-stats. */ .bh-stats { display: grid; grid-template-columns: repeat(var(--bh-stats-cols, 4), minmax(0, 1fr)); gap: var(--bh-space-4); /* Grid streckt Kinder standardmäßig auf die Zeilenhöhe. Bei Kennzahlen ist das falsch: eine Kachel mit einer Zahl soll nicht so hoch sein wie die mit der längsten Zusatzzeile daneben. */ align-items: start; } .bh-stat { /* Die Icon-Box folgt ihrem Nachbarn, und der Nachbar ist hier die Zahl. Eingabewert ist deshalb deren Schriftgröße, keine gemerkte Zahl: wer --bh-text-xl verschiebt, verschiebt die Fläche mit. 32 × 1.5 = 48px. Der Bestand stand bei 2× (56px neben 28px) — das wären heute 64px und damit eine größere Kachel, als je eines der Projekte hatte. */ --bh-icon-box-size: calc(var(--bh-text-xl) * 1.5); display: flex; flex-direction: column; gap: var(--bh-space-1); padding: var(--bh-space-4); border: 1px solid var(--bh-border-subtle); border-radius: var(--bh-radius-xl); background: var(--bh-surface-1); box-shadow: var(--bh-shadow-1); } /* REIHENFOLGE IM MARKUP: Wert → Label → Zusatz. Bei einer Kennzahl ist die Zahl der Inhalt, das Label nur ihre Erklärung. Wer zuerst liest „Kommende Termine" und dann „12", hat die Kachel zweimal gelesen. Die Klassen stehen hier in genau dieser Reihenfolge, damit beim Bauen keine andere naheliegt. */ .bh-stat__value { color: var(--bh-text-primary); font-size: var(--bh-text-xl); font-weight: var(--bh-weight-semibold); line-height: var(--bh-leading-tight); font-variant-numeric: tabular-nums; } .bh-stat__label { font-size: var(--bh-text-xs); font-weight: var(--bh-weight-semibold); text-transform: uppercase; letter-spacing: var(--bh-tracking-caps); color: var(--bh-text-muted); } /* Bezugsgröße neben dem Wert: „4 / 900". Der Nenner tritt zurück — er ist der Maßstab, nicht der Wert. Ohne ihn ist die Zahl daneben nicht einzuordnen (896 wovon?), mit ihm in derselben Größe wären es zwei Werte. Eine Kennzahl ohne Bezugsgröße ist ein Kanal ohne Bedeutung — DESIGN.md §0b. */ .bh-stat__of { color: var(--bh-text-muted); font-size: var(--bh-text-lg); font-weight: var(--bh-weight-regular); } .bh-stat__delta { font-size: var(--bh-text-xs); color: var(--bh-text-muted); } .bh-stat__delta--up { color: var(--bh-color-success); } .bh-stat__delta--down { color: var(--bh-color-danger); } a.bh-stat { transition: border-color var(--bh-transition), box-shadow var(--bh-transition); } a.bh-stat:hover { border-color: var(--bh-border-strong); box-shadow: var(--bh-shadow-2); } a.bh-stat:active { background: var(--bh-surface-3); } a.bh-stat:focus-visible { outline: var(--bh-focus-width) solid var(--bh-focus-color); outline-offset: var(--bh-focus-offset); } /* ── Sektionen ───────────────────────────────────────────────────────────── */ .bh-section { display: flex; flex-direction: column; gap: var(--bh-space-4); } .bh-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--bh-space-3); } .bh-section__title { margin: 0; font-size: var(--bh-text-lg); } /* inline-flex, nicht inline. base.css macht JEDES svg zu einem Block (`img, svg, video { display: block }`), und `white-space: nowrap` regelt nur den Umbruch zwischen INLINE-Inhalt — ein Block-Kind bricht trotzdem um. „Alle 20 anzeigen ›" stand dadurch zweizeilig, der Pfeil allein darunter, und zwar von Anfang an: nowrap sah nach einer Antwort aus und war keine. Jeder andere Baustein, der Text und Symbol paart, ist längst inline-flex — Button, Badge, Reiter, Brotkrume, Metazeile, Blätterlink. Dieser eine war es nicht, und er ist genau der, den man mit einem Chevron schreibt. Die Lücke muss mitkommen: In einem Flex-Behälter verschwindet der Leerraum zwischen Text und Symbol, der im Markup steht. 4px ist die Wortbreite, die vorher dort stand. Für Verweise OHNE Symbol ändert sich nichts Sichtbares: ein inline-flex-Kasten mit einem Textkind sitzt weiter auf der Grundlinie seiner ersten Zeile, und .bh-section__head richtet daran aus. */ .bh-section__link { display: inline-flex; align-items: center; gap: var(--bh-space-1); color: var(--bh-text-tertiary); font-size: var(--bh-text-sm); font-weight: var(--bh-weight-medium); white-space: nowrap; transition: color var(--bh-transition); } .bh-section__link:hover { color: var(--bh-color-accent); } .bh-section__link:active { color: var(--bh-color-accent-bright); } .bh-section__link:focus-visible { outline: var(--bh-focus-width) solid var(--bh-focus-color); outline-offset: var(--bh-focus-offset); } /* Zweispaltige Sektion: breiter Hauptblock, schmaler Nebenblock. */ .bh-section--split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--bh-space-4); align-items: start; } @media (max-width: 1023px) { .bh-stats { grid-template-columns: repeat(var(--bh-stats-cols-md, 2), minmax(0, 1fr)); } .bh-section--split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639px) { .bh-stats { grid-template-columns: 1fr; } .bh-page-head { align-items: flex-start; } .bh-page-head__actions { width: 100%; } }