/* =========================================================================== KUPA · Die Bausteine — jedes Ding genau einmal =========================================================================== Setzt `token.css` voraus. Benutzt AUSSCHLIESSLICH Token, keinen einzigen festen Wert — wer hier eine Zahl oder Farbe direkt hinschreibt, hebelt den Dunkelmodus aus und baut die Unruhe wieder auf, die gerade weggeräumt wird. --------------------------------------------------------------------------- WOFÜR ES DIESE DATEI GIBT Am 09.09.2026 gab es im Template acht Fassungen für „Kasten mit Inhalt" (.bipro-box .desc-box .hinweis-box .meldung-box .rueck-box .person-card .vb-karte .kpi) und vier für „Tabelle". Keine davon ist falsch; jede ist für ihren Fall gebaut. Zusammen ergeben sie das Unruhige, das man sieht, ohne es benennen zu können: Dieselbe Sache sieht an drei Stellen anders aus, und das Auge sucht nach einem Unterschied, den es nicht gibt. Sieben Bausteine ersetzen das: .karte ein Kasten mit Inhalt (ersetzt die acht Fassungen) .tabelle eine Tabelle (ersetzt die vier) .marke Etikett mit Zustand (aus .badge weiterentwickelt) .chip Filter/Umschalter zum Klicken (aus .chip weiterentwickelt) .balken Anteil oder Verlauf .klappe auf- und zuklappbarer Bereich .leiste Reihe von Bedienelementen Sie stehen NEBEN den alten Klassen, nicht an ihrer Stelle. Umgestellt wird Ansicht für Ansicht (Schritt 1.2 und 1.3); erst danach fallen die alten weg. =========================================================================== */ /* --------------------------------------------------------------------------- GRUNDLAGE --------------------------------------------------------------------------- */ .kupa { font-family: var(--schrift); font-size: var(--t3); line-height: var(--zh); color: var(--text); } /* =========================================================================== 1 · KARTE — ein Kasten mit Inhalt =========================================================================== 🔴 Die Trennung kommt aus dem ABSTAND, nicht aus der Linie. Das ist der eine Griff, der eine Oberfläche ruhig macht: Wo heute ein Rahmen steht, steht künftig Weißraum. Ein Rahmen ist erst nötig, wenn zwei Flächen mit derselben Farbe aneinanderstoßen — und dann reicht die leiseste Linie. =========================================================================== */ .karte { background: var(--flaeche); border-radius: var(--r3); padding: var(--a4); box-shadow: var(--h1); /* Kein `border`. Der Schatten trennt schon; beides zusammen ist die Doppelkante, die Oberflächen billig aussehen lässt. */ } .karte + .karte { margin-top: var(--a3); } /* Der Kopf einer Karte: Titel links, Zahl oder Knopf rechts. */ .karte-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a3); margin-bottom: var(--a3); } .karte-titel { font-size: var(--t5); font-weight: var(--fett-halb); } /* Die Unterzeile erklärt den Titel. Sie steht NICHT in Klammern hinter ihm — ein Titel, der eine Klammer braucht, ist zu kurz geraten. */ .karte-sub { font-size: var(--t2); color: var(--text-leise); line-height: var(--zh-eng); margin-top: var(--a1); } /* Anhebbar: nur für Karten, die man wirklich anklicken kann. */ .karte.klickbar { cursor: pointer; transition: box-shadow var(--anim), transform var(--anim); } .karte.klickbar:hover { box-shadow: var(--h2); transform: translateY(-1px); } .karte.klickbar:active { transform: none; box-shadow: var(--h1); } /* Betont: die eine Karte, auf die es gerade ankommt. Höchstens eine je Bild. */ .karte.betont { box-shadow: var(--h2); } /* Ein Hinweis IN einer Karte — getönt, nicht umrandet. */ .karte-hinweis { background: var(--gelb-flaeche); color: var(--gelb); border-radius: var(--r2); padding: var(--a3); font-size: var(--t2); line-height: var(--zh-weit); margin-bottom: var(--a3); } /* Ein Raster aus Karten. `auto-fit` statt `auto-fill`: Bei nur einer Karte nimmt sie die volle Breite, statt in einer Spalte von 300 px zu stehen. Genau daran ist am 09.09.2026 ein 79-zeiliges Blatt zerbrochen. */ .karten { display: grid; gap: var(--a3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .karten.breit { grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); } /* Eine Karte, die aus der Reihe tanzen darf, weil ihr Inhalt breit ist. */ .karte.voll { grid-column: 1 / -1; } /* =========================================================================== 2 · ZAHL — eine Kennzahl, die allein steht =========================================================================== 🔴 Eine Zahl erscheint nie allein (Regel aus dem brain\). Deshalb hat dieser Baustein drei Teile, und zwei davon sind Pflicht: was sie zählt, und woran man sie einordnet. =========================================================================== */ .zahl { display: flex; flex-direction: column; gap: var(--a1); } .zahl-wert { font-size: var(--t7); font-weight: var(--fett); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; /* große Zahlen wirken sonst auseinandergezogen */ } .zahl-was { font-size: var(--t2); color: var(--text-leise); } .zahl-bezug { font-size: var(--t1); color: var(--text-still); } .zahl.rot .zahl-wert { color: var(--rot); } .zahl.gelb .zahl-wert { color: var(--gelb); } .zahl.gruen .zahl-wert { color: var(--gruen); } /* =========================================================================== 3 · MARKE — Etikett mit Zustand =========================================================================== Trägt einen Zustand, ist nicht klickbar. Wer klicken können soll, nimmt `.chip`. Der Unterschied muss sichtbar sein, sonst klickt man ins Leere — der Fehler, der am 09.09.2026 dreimal gemeldet wurde. =========================================================================== */ .marke { display: inline-flex; align-items: center; gap: var(--a1); padding: 2px var(--a2); border-radius: var(--r1); font-size: var(--t1); font-weight: var(--fett); line-height: 1.45; white-space: nowrap; background: var(--grau-flaeche); color: var(--grau); } .marke.rot { background: var(--rot-flaeche); color: var(--rot); } .marke.gelb { background: var(--gelb-flaeche); color: var(--gelb); } .marke.gruen { background: var(--gruen-flaeche); color: var(--gruen); } .marke.blau { background: var(--blau-flaeche); color: var(--blau); } .marke.ruhe { background: var(--ruhe-flaeche); color: var(--ruhe); } .marke.park { background: var(--park-flaeche); color: var(--park); } /* Mit Kante nur dort, wo die Marke auf einer getönten Fläche sitzt und sonst darin verschwände. */ .marke.kante { border: 1px solid var(--grau-kante); } .marke.rot.kante { border-color: var(--rot-kante); } .marke.gelb.kante { border-color: var(--gelb-kante); } .marke.gruen.kante { border-color: var(--gruen-kante); } .marke.blau.kante { border-color: var(--blau-kante); } /* 🆕 06.10.2026 · Voll gefüllt - wo eine Marke auffallen soll („Rückmeldung liegt vor"). --auf-signal ist für genau diese Paare gemessen (token.css). */ .marke.blau.voll { background: var(--blau); color: var(--auf-signal); } /* In einer Kompass-Kachel erbt jede span die Größe der Überschrift - eine Marke bleibt klein und links. */ .kompass .metric .marke { font-size: var(--t1); align-self: flex-start; } /* 🆕 05.10.2026 · „Automatisierung" - eine Marke mit Blitz an jeder Stelle, an der ein Programm oder die KI Arbeit vorbereitet, die ein Mensch freigibt. Makro `automatisierung()` in plattform/vorlagen/_format.html. Nur Tokens: dieselben Paare wie die KI-Marke am Vorgang, in Hell und Dunkel. */ .auto-marke { display: inline-flex; align-items: center; gap: var(--a1); padding: 2px var(--a2) 2px 3px; border-radius: var(--rund); font-size: var(--t1); font-weight: var(--fett); letter-spacing: .04em; text-transform: uppercase; line-height: 1.45; white-space: nowrap; vertical-align: middle; color: var(--akzent-text); background: var(--akzent-leise); border: 1px solid color-mix(in srgb, var(--akzent) 35%, transparent); } .auto-marke svg { width: 1.25em; height: 1.25em; padding: 3px; border-radius: 50%; box-sizing: border-box; fill: var(--flaeche); background: var(--akzent); flex: none; } /* =========================================================================== 4 · CHIP — zum Klicken =========================================================================== Immer ein