/* BSTools Design-Kern — kern.css
Eine Quelle für alle Verbraucher: Produktseiten (bstools.de, companydisplay.de),
Betreiber-Backend, Registry-Oberfläche, Kunden-Frontends.
Entscheidungen Stefan 02./03.09.2026:
- Systemschrift, keine Web-Fonts, keine selbst gehosteten Schriften
- Radius 0 überall — der Kern ist eckig
- Dunkelmodus folgt prefers-color-scheme, zusätzlich [data-theme] manuell
- Farbwelten NICHT hier: siehe farbwelten.css
- FAST MONOCHROM (03.09.2026): farbstichfreie Graustufen, viel Weißraum,
dünne Linien STATT Schatten, kräftige Typografie und GENAU EIN Akzent.
Orange steht nur für Handlung und Zustand — Hauptknopf, Link, aktiver
Reiter, Fokusring. Nie als Fläche, ein Hauptknopf je Bildschirm.
Die Kopfleiste ist hell und trägt eine Linie, keine Farbe.
Die Ampel (gut/warn/alarm) ist davon ausgenommen: sie ist eine
Wertung, keine Marke.
Keine Abhängigkeiten. Kein Framework. Keine externe Datei.
Diese Datei nur ergänzen, nie in einem Verbraucher kopieren und ändern.
*/
/* =============================================================== Tokens */
:root {
/* Marke — je Verbraucher/Kunde überschreibbar (siehe farbwelten.css) */
--anthrazit: #31393F;
--anthrazit-hell: #4A545C;
--orange: #EE7F00;
--orange-hell: #FDF2E6;
/* Schrift AUF der Akzentfläche (Hauptknopf, Kopf-Fahne). Weiß auf Orange
erreicht nur 2,74 — deshalb ein dunkler Ton (4,55). Je Welt gerechnet,
siehe farbwelten.json. */
--auf-akzent: #502B00;
/* ERZEUGT von werkzeug/farbwelten_bauen.py — nicht von Hand aendern */
/* Schrift AUF einer vollflaechigen Farbe. Gerechnet, nicht
geraten: der naechstgelegene Ton, der das Ziel noch erreicht.
--auf-dunkel gilt fuer die Auslieferung; je Welt steht der
eigene Wert in farbwelten.css. */
--auf-dunkel: #C3CAD0; /* auf #31393F — Kontrast 7.09 */
--auf-gut: #000000; /* auf #00A550 — Kontrast 6.50 */
--auf-warn: #110F0E; /* auf #F57C00 — Kontrast 7.07 */
--auf-alarm: #FFFFFF; /* auf #E30613 — Kontrast 4.88 */
/* ENDE ERZEUGT */
/* Wertung (Ampel). Kräftig, nicht gedeckt — muss im Laden aus zwei Metern
ohne Nachdenken lesbar sein. Diese Werte sind ab jetzt die eine Quelle. */
--gut: #00A550;
--gut-hell: #E7F7EC;
--warn: #F57C00;
--warn-hell: #FEF3E2;
--alarm: #E30613;
--alarm-hell: #FDECEA;
/* Vollton = Fläche, Balken, Kante. Text-Ton = Schrift.
Der Vollton hat als SCHRIFT auf seiner hellen Fläche zu wenig Kontrast
(gemessen 02.09.2026: gut 2.91, warn 2.46 — Ziel mind. 4.5).
Deshalb je Wertung ein eigener Text-Ton. Die Volltöne bleiben unverändert. */
--gut-text: #00803D;
--warn-text: #AB5500;
--alarm-text: #BE000F;
--orange-text: #A95A00;
/* Fläche und Linie */
--papier: #FFFFFF;
--karte: #F4F4F5;
--linie: #E4E4E7;
--kopf: #FFFFFF;
--kopf-text: #18181B;
--chip: #F4F4F5;
/* Schrift */
--text: #18181B;
/* Leiser Ton. ABWEICHUNG von der Vorgabe #6B7280: der erreicht auf der
Kartenfläche nur 4,40 (Ziel 4,5) und hat mit 21 Punkten Farbabstand
einen sichtbaren Blaustich — beides gegen die Vorgabe „farbstichfrei,
mind. 4,5". #6A6A73 ist neutraler (9) und misst 5,35 auf Weiß,
4,87 auf der Karte. Gemessen 03.09.2026. */
--text-leise: #6A6A73;
--font: "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, Consolas, "Courier New", monospace;
/* Form — eckig. Die drei Radien bleiben als Tokens bestehen, damit
Verbraucher nichts umschreiben müssen, falls sich das je ändert. */
--radius: 0;
--radius-knopf: 0;
--radius-pille: 0;
--schatten: none; /* Linie statt Schatten */
/* Maß */
--kopf-hoehe: 62px; /* Höhe der Kopfleiste, KEINE Rundung */
--seite-max: 1440px;
/* Drei Brüche. @media kann keine Variablen lesen — die Zahlen stehen dort
fest. Diese Tokens sind die verbindliche Liste, an die sich jeder
Verbraucher hält:
bis 720px Handy (eine Spalte, Menü statt Reiterreihe)
bis 1024px Tablet (zwei Spalten, Reiter sichtbar)
ab 1025px Desktop (volles Raster) */
--bruch-handy: 720px;
--bruch-tablet: 1024px;
/* Kleinstes Tippziel — Finger, nicht Maus. Nie unterschreiten. */
--tippziel: 44px;
--leiste: 232px; /* Breite der Seitenleiste im Backend */
--summe-breite: 300px; /* Breite der Summenspalte im Rechner */
/* Text-Maß */
--schrift-grund: 15px;
--zeile: 1.5;
/* Der Browser zeichnet Auswahlfelder, Ankreuzfelder und Rollbalken
selbst. Ohne color-scheme malt er sie hell — auch auf schwarzem
Grund. Gemessen am 03.09.2026 in WebKit: das Auswahlfeld
"Warenwirtschaft" stand als weisser Block im Dunkelmodus, obwohl
background: var(--papier) gesetzt war. Der berechnete Wert war
richtig, das Bild nicht. */
color-scheme: light;
--pfeil: url("data:image/svg+xml;utf8,");
}
/* Dunkel — automatisch nach Systemeinstellung, außer der Nutzer hat
ausdrücklich hell gewählt. Nur Flächen, Linien und Textfarben werden
getauscht; Marken- und Ampel-Volltöne bleiben unverändert. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="hell"]) {
color-scheme: dark;
--pfeil: url("data:image/svg+xml;utf8,");
--papier: #0B0B0C;
--karte: #161618;
--linie: #27272A;
--kopf: #0B0B0C;
--kopf-text: #F4F4F5;
--chip: #1F1F22;
--text: #F4F4F5;
--text-leise: #A1A1AA;
--anthrazit-hell: #B7BEC5;
--orange-hell: #392714;
--gut-hell: #173324;
--warn-hell: #3A2A14;
--alarm-hell: #3A1C1C;
--gut-text: #4ED08B;
--warn-text: #FFB259;
--alarm-text: #FF8A80;
--orange-text: #EE7F00;
--schatten: none;
}
}
/* Dunkel — vom Nutzer gewählt. Muss auch dann gelten, wenn das System hell
steht, deshalb steht derselbe Satz ein zweites Mal. */
:root[data-theme="dunkel"] {
color-scheme: dark;
--pfeil: url("data:image/svg+xml;utf8,");
--papier: #0B0B0C;
--karte: #161618;
--linie: #27272A;
--kopf: #0B0B0C;
--kopf-text: #F4F4F5;
--chip: #1F1F22;
--text: #F4F4F5;
--text-leise: #A1A1AA;
--anthrazit-hell: #B7BEC5;
--orange-hell: #392714;
--gut-hell: #173324;
--warn-hell: #3A2A14;
--alarm-hell: #3A1C1C;
--gut-text: #4ED08B;
--warn-text: #FFB259;
--alarm-text: #FF8A80;
--orange-text: #EE7F00;
--schatten: none;
}
/* ============================================================= Grundlage */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Der Hintergrund gehört an html: sprengt irgendwo eine feste Breite den
Körper, endet er sonst am Fensterrand und die Schrift steht auf Weiß. */
html { background: var(--papier); overflow-x: hidden; }
body {
font-family: var(--font);
background: var(--papier);
color: var(--text);
font-size: var(--schrift-grund);
line-height: var(--zeile);
-webkit-font-smoothing: antialiased;
/* Deutsch baut lange Wörter. „(Angemessenheitsbeschluss/Standardvertrags-
klauseln)" sprengte die Seite bei 320 px auf 459 px (gemessen 03.09.2026).
Ohne diese Zeile trifft das jede Seite, die einen Fachbegriff enthält. */
overflow-wrap: break-word;
}
h1 { font-size: 28px; font-weight: 650; letter-spacing: -.4px; }
h2 { font-size: 19px; font-weight: 650; letter-spacing: -.2px; }
h3 { font-size: 15px; font-weight: 650; }
/* Abschnittsmarke: klein, Versalien, in Akzentfarbe. */
.abschnitt {
font-size: 12px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--orange-text); margin: 0 0 8px;
}
.leise { color: var(--text-leise); }
.notiz { font-size: 12.5px; color: var(--text-leise); }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.zahl { font-variant-numeric: tabular-nums; }
/* Was auf dem Handy keinen Platz hat, wird weggelassen — nicht umgebrochen. */
@media (max-width: 720px) { .nur-gross { display: none !important; } }
/* Links tragen den Akzent — er ist die einzige Farbe für Handlung. */
a { color: var(--orange-text); }
a:hover { text-decoration-thickness: 2px; }
/* Ein sichtbarer Fokus, überall gleich. Nie wegnehmen. */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* Seitenbreite */
.seite { max-width: var(--seite-max); margin: 0 auto; padding: 22px 28px 60px; }
/* ================================================================= Kopf */
.kopf {
background: var(--kopf); color: var(--kopf-text);
padding: 0 28px; position: sticky; top: 0; z-index: 50;
/* Helle Kopfleiste, abgesetzt durch eine Linie — nicht durch eine Fläche.
(Vorgabe Stefan 03.09.2026) */
border-bottom: 1px solid var(--linie);
}
.kopf-innen {
max-width: var(--seite-max); margin: 0 auto;
display: flex; align-items: center; gap: 18px;
height: var(--kopf-hoehe); flex-wrap: nowrap;
}
/* Das Logo (Weltkugel, Orange-Verlauf und Marineblau) bleibt unverändert und
ist der einzige mehrfarbige Fleck der Oberfläche. Sein Blau kommt NICHT in
die Tokens. KEIN filter:invert. */
.kopf-logo img { height: 38px; display: block; }
.kopf-marke { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.kopf-marke b { font-size: 22px; font-weight: 650; letter-spacing: -.2px; }
.kopf-marke small { color: var(--text-leise); font-size: 12px; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px;
font-size: 12.5px; color: var(--text-leise); }
.kopf-rechts b { color: var(--text); font-weight: 600; }
/* Marke im Kopf, orange hinterlegt (z. B. „Web", „Demo") */
/* Die Fahne im Kopf ist eine Marke, keine Handlung — also KEINE Akzentfläche.
Sie steht als feiner Umriss neben dem Namen (Vorgabe: Orange nur für
Handlung und Zustand, Hauptknopf ausgenommen). */
.kopf-fahne {
background: none; color: var(--text-leise); border: 1px solid var(--linie);
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 9px; border-radius: var(--radius-pille);
}
/* Menüknopf — nur auf dem Handy sichtbar, dort klappt er die Reiter auf. */
.kopf-menue {
display: none; background: none; border: 1px solid var(--linie);
color: var(--text); font: inherit; cursor: pointer; border-radius: var(--radius);
width: var(--tippziel); height: var(--tippziel);
align-items: center; justify-content: center; flex: none; padding: 0;
}
.kopf-menue span, .kopf-menue span::before, .kopf-menue span::after {
display: block; width: 18px; height: 2px; background: var(--text); position: relative;
}
.kopf-menue span::before, .kopf-menue span::after { content: ""; position: absolute; left: 0; }
.kopf-menue span::before { top: -6px; }
.kopf-menue span::after { top: 6px; }
/* ============================================================== Reiter */
.reiter {
display: flex; gap: 6px; padding: 14px 28px 0;
border-bottom: 1px solid var(--linie); background: var(--papier); flex-wrap: wrap;
}
.reiter button {
background: none; border: 0; border-bottom: 3px solid transparent;
padding: 8px 14px 10px; font: inherit; font-weight: 600;
color: var(--text-leise); cursor: pointer; border-radius: var(--radius);
min-height: var(--tippziel);
}
.reiter button:hover { color: var(--text); }
/* Text im Akzent-TEXT-Ton, Kante im Vollton: der Vollton erreicht als Schrift
auf Papier nur 2,51 (BSTools) bis 4,45 (Wald) — gemessen 02.09.2026. */
.reiter button[aria-selected="true"] { color: var(--orange-text); border-bottom-color: var(--orange); }
/* ======================================================= Karte / Kachel */
.karte {
background: var(--karte); border-radius: var(--radius);
border: 1px solid var(--linie); box-shadow: var(--schatten);
padding: 16px 18px; margin-bottom: 18px; min-width: 0;
}
.karte > h3 { margin: 0 0 10px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px; margin-bottom: 22px; }
.kachel {
background: var(--karte); border-radius: var(--radius);
border: 1px solid var(--linie); box-shadow: var(--schatten); padding: 14px 16px;
}
.kachel .l { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-leise); font-weight: 600; }
.kachel .z { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
margin: 4px 0 2px; letter-spacing: -.3px; }
.kachel .n { font-size: 12.5px; color: var(--text-leise); }
/* ------------------------------------------------- Kachel im Griff
Nur die OPTIK des Verschiebens. Die Logik (Pointer Events, Trefferzonen,
Reihenfolge speichern) baut das jeweilige Produkt.
.kachel--griff die Kachel, die am Finger/Zeiger hängt
.kachel--luecke die Lücke, die sie an ihrer alten Stelle lässt
.einfuegen die Markierung am Ziel, wo sie landen würde
Kein HTML5-Drag (auf iOS ohne Wirkung) — Pointer Events. */
.griff-an { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.griff-an:active { cursor: grabbing; }
.kachel--griff {
position: fixed; z-index: 900; pointer-events: none;
width: 120px; height: 80px; padding: 8px 10px; overflow: hidden;
background: var(--papier); border-radius: var(--radius);
border: 1px solid var(--linie);
/* Die einzige Stelle mit Schatten: was am Zeiger hängt, schwebt wirklich. */
box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: .98;
display: flex; flex-direction: column; justify-content: center;
}
.kachel--griff .l { font-size: 10.5px; }
.kachel--griff .z { font-size: 18px; margin: 2px 0 0; }
.kachel--griff .n { display: none; }
/* Die Wertung wandert mit: der 3-px-Strich bleibt auch am Zeiger sichtbar. */
.kachel--griff.gut { border-top: 3px solid var(--gut); }
.kachel--griff.warn { border-top: 3px solid var(--warn); }
.kachel--griff.alarm { border-top: 3px solid var(--alarm); }
/* Die Lücke: gestrichelter Umriss, nichts drin — das Raster darf nicht
zusammenspringen, sonst springt die ganze Seite. */
.kachel--luecke {
background: transparent; box-shadow: none;
border: 1px dashed var(--linie); border-top-width: 1px;
}
.kachel--luecke > * { visibility: hidden; }
/* Die Einfüge-Markierung am Ziel: ein Strich in Akzentfarbe. */
.einfuegen { position: relative; }
.einfuegen::before {
content: ""; position: absolute; top: 0; bottom: 0; left: -7px;
width: 3px; background: var(--orange);
}
.einfuegen--quer::before { left: 0; right: 0; top: -7px; bottom: auto; width: auto; height: 3px; }
/* Wertung einer Kennzahl: 3-px-Strich über der Kachel */
.kachel.gut { border-top: 3px solid var(--gut); }
.kachel.warn { border-top: 3px solid var(--warn); }
.kachel.alarm { border-top: 3px solid var(--alarm); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Ohne min-width:0 sprengt breiter Inhalt (Tabelle, langes Wort) die Spalte
und die ganze Seite scrollt waagrecht. Gilt für jedes Raster im Kern. */
.zwei > *, .kacheln > * { min-width: 0; }
/* ============================================================= Tabelle */
.scroll { overflow-x: auto; max-width: 100%; }
.tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tab th {
text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-leise); font-weight: 600; padding: 8px 10px;
border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.tab td { padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tab tbody tr:last-child td { border-bottom: 0; }
.tab .r, .tab th.r { text-align: right; }
.tab .k { font-weight: 600; }
.tab tfoot td { font-weight: 700; border-top: 2px solid var(--linie); border-bottom: 0; }
/* ================================================================ Chip */
.chip {
display: inline-block; padding: 2px 9px; border-radius: var(--radius-pille);
font-size: 12px; font-weight: 600; background: var(--chip); color: var(--text);
white-space: nowrap;
}
.chip.gut { background: var(--gut-hell); color: var(--gut-text); }
.chip.warn { background: var(--warn-hell); color: var(--warn-text); }
.chip.alarm { background: var(--alarm-hell); color: var(--alarm-text); }
.chip.orange { background: var(--orange-hell); color: var(--orange-text); }
/* Platzhalter: etwas ist nicht gemessen. Leer heißt leer, nicht null. */
.chip.platzhalter {
background: transparent; color: var(--text-leise);
border: 1px dashed var(--linie); font-weight: 500;
}
/* =============================================================== Knopf */
/* Auch ein kann ein Knopf sein — dann ohne Unterstreichung, sonst sieht
der Knopf aus wie ein Textlink in einem Kasten (gemessen 03.09.2026). */
.knopf {
font: inherit; font-weight: 600; padding: 8px 16px; text-decoration: none;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border-radius: var(--radius-knopf); border: 1px solid var(--linie);
background: var(--papier); color: var(--text); cursor: pointer;
}
.knopf.haupt { background: var(--orange); border-color: var(--orange); color: var(--auf-akzent); }
.knopf.gefahr { background: var(--alarm); border-color: var(--alarm); color: var(--auf-alarm); }
/* EINE Hover-Regel fuer JEDE Knopfart. Vorher waren es drei Antworten von
sehr verschiedener Staerke — im Browser gemessen am 05.09.2026:
.knopf wechselte den Rahmen (deutlich), .knopf.haupt hatte nur
filter: brightness(1.06) (kaum zu sehen), .knopf.gefahr hatte GAR
KEINEN — das Bild war byteidentisch.
Warum ein innerer Ring und kein Schleier auf der Flaeche: ein Schleier
verschiebt den Untergrund und damit den Kontrast der Schrift. Gerechnet
ueber alle elf Welten faellt schon ein Schleier von 8 % bei BSTools auf
3,89 und bei Gold auf 3,91 — unter das Mindestmass. Der Ring in
currentColor laesst die Flaeche in Ruhe: er traegt immer die Farbe der
Beschriftung, hat also in JEDER Art denselben Kontrast wie sie, und
verschiebt nichts im Aufbau (outline statt Rahmenbreite). */
.knopf:hover:not([disabled]),
.wahl button:hover:not([disabled]),
.seitenleiste .punkt:hover {
outline: 2px solid currentColor; outline-offset: -3px;
}
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf.klein { padding: 5px 11px; font-size: 13px; }
/* Finger statt Maus: auf Touch-Geräten hat jedes Bedienelement volles Maß. */
@media (pointer: coarse) {
.knopf, .schalter, .reiter button { min-height: var(--tippziel); }
.knopf.klein { padding: 8px 14px; font-size: 14px; }
}
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
/* ========================================================== Formularzeile */
.feld { margin: 0 0 12px; max-width: 420px; }
.feld > label {
display: block; font-size: 11.5px; font-weight: 700; color: var(--text-leise);
text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px;
}
.feld input, .feld select, .feld textarea {
width: 100%; font: inherit; color: var(--text);
background: var(--papier); border: 1px solid var(--linie);
border-radius: var(--radius); padding: 8px 11px;
}
.feld textarea { resize: vertical; min-height: 72px; }
/* WebKit zeichnet