/* =====================================================================
pivicon-tokens.css — gemeinsame Design-Grundlage der pivicon-Systeme
Single Point of Truth: pivicon-master/design/. Module KOPIEREN diese
Datei nach public/shared/ und wandeln sie NICHT ab.
pivicon-design-version: 2.1.0
Änderungsverlauf und Begründungen: ./CHANGELOG.md
Der Wert steht zusätzlich als Token `--pv-design-version` (unten), damit
ein Dienst zur Laufzeit prüfen kann, ob seine Kopie veraltet ist:
getComputedStyle(document.documentElement)
.getPropertyValue('--pv-design-version') // -> "2.1.0"
Dark-Mode: erzwingt Dunkel,
erzwingt Hell,
ohne data-theme = System-Präferenz (prefers-color-scheme).
===================================================================== */
:root{
/* Version des Design-/Layout-Standards (maschinell lesbar, siehe Kopf). */
--pv-design-version:"2.1.0";
/* Flächen & Text */
/* Seitenhintergrund: neutrales Hellgrau (Layout-Standard 2026-08-22, Vorbild
Hetzner/dpa). Vorher warmes Beige #FBFAF7 — das liess weisse Kopfzeile und
Inhaltsboxen nicht als eigene Ebene wirken. */
--paper:#F4F5F7; /* Seitenhintergrund (leicht grau) */
--panel:#FFFFFF; /* Karten/Tabellen/Inputs */
--ink:#17191F; /* Haupttext */
--ink-soft:#5A5E68; /* sekundärer Text, Labels */
--line:#E6E3DC; /* Rahmen */
--line-soft:#F0EEE8; /* dezente Trennlinien (Tabellenzeilen) */
/* ===================================================================
AKZENT — drei Ebenen (ab Standard 2.0.0, Vorgabe 2026-08-22)
===================================================================
Ebene 1 PLATTFORM --pv-accent* unveränderlich
Ebene 2 MANDANT --accent* Override im Inhaltsbereich
Ebene 3 EINHEIT --accent* Override im Inhaltsbereich (gewinnt
gegen den Mandanten, weil spezifischer/später)
HARTE GRENZE — Plattform-Chrom ist NICHT überschreibbar.
Kopfzeile/Appbar, Seitenleiste, Fokusringe und Systemdialoge benutzen
IMMER --pv-accent, niemals --accent. Begründung: In einem Mehr-
mandantensystem darf ein Mandant die plattformeigenen Oberflächen
nicht nachbilden können — sonst entsteht eine Täuschungsfläche
gegenüber den eigenen Benutzern (ein Mandanten-Administrator könnte
eine Plattform-Aufforderung fälschen). Salesforce, Slack und
Atlassian ziehen dieselbe Grenze.
Nur der INHALTSBEREICH nutzt den überschreibbaren Akzent.
Deshalb wirkt die Überschreibung über einen ABGEGRENZTEN BEREICH
([data-pv-scope="content"], siehe pivicon-brands.css) und NICHT über
:root — ein :root-Override würde ins Chrom lecken.
=================================================================== */
/* --- Ebene 1: Plattform (unveränderlich) --------------------------- */
/* #1A5495 ist das Blau des pivicon-Logos: mit PHP-GD aus
pivicon-logo.png und pivicon-icon.png ausgelesen, in beiden Dateien
mit Abstand die dominante Farbe (6487 px, nach Weiß).
Kontrast hell: 7,65:1 auf #FFFFFF, 7,01:1 auf --paper #F4F5F7. */
--pv-accent:#1A5495; /* Plattform-Akzent (Füllfläche) */
--pv-accent-ink:#FFFFFF; /* Text/Icon AUF der Akzentfläche (7,65:1) */
--pv-accent-text:#1A5495; /* Akzent als Text/Link auf hellem Grund */
--pv-accent-hover:#174A83; /* Interaktionszustand der Füllfläche */
/* ~8 % Tönung für aktive Navigationseinträge; als color-mix gegen
`transparent`, damit die Tönung auf jeder Fläche stimmt. */
--pv-accent-tint:color-mix(in srgb, var(--pv-accent) 8%, transparent);
/* --- Ebene 2/3: Mandant/Einheit (überschreibbar) ------------------- */
/* Diese Tokens benutzen die Inhalts-Komponenten (.btn-primary, Links,
Hervorhebungen). Standard = Plattform-Akzent. Überschrieben wird
ausschließlich innerhalb von [data-pv-scope="content"]. */
--accent:var(--pv-accent); /* Füllfläche im Inhaltsbereich */
--accent-on:var(--pv-accent-ink); /* Text/Icon auf der Füllfläche */
--accent-text:var(--pv-accent-text); /* Akzent als Text/Link */
--accent-hover:var(--pv-accent-hover);/* Hover der Füllfläche */
--accent-tint:var(--pv-accent-tint); /* ~8 % Tönung */
/* ALTBESTAND: --accent-ink hieß bisher „dunklere Akzent-Variante" und
wird so noch benutzt (z. B. pivicon-ID app.css .btn-primary:hover).
Achtung, NICHT verwechseln mit --pv-accent-ink (= Text AUF der
Fläche). Neuer Code nimmt --accent-hover bzw. --accent-on. */
--accent-ink:var(--accent-hover);
/* --- Status -------------------------------------------------------- */
/* --crit ist neu (Standard 2.0.0): „kritisch/Fehler" war vorher an die
pinke Marke gekoppelt. Mit blauem Plattform-Akzent wäre ein Fehler
blau — Status braucht daher eine eigene Farbe. 6,54:1 auf #FFFFFF,
5,99:1 auf --paper. */
--crit:#B3261E; /* kritisch / Fehler / destruktiv */
--crit-on:#FFFFFF; /* Text auf kritischer Fläche (6,54:1) */
--crit-hover:#9D211A; /* Interaktionszustand (Weiß darauf 7,88:1) */
--amber:#C9821F; /* Warnung / ausstehend */
--green:#2F7D52; /* gut / synchron / erfolgreich */
--blue:#2C5E8A; /* Info / neutral hervorgehoben */
/* ALTBESTAND: dunkle Navigation (Auftragsbuch-SPA und aeltere Ansichten).
Fuer NEUE Oberflaechen gilt der Layout-Standard mit --nav-* (siehe unten). */
--sidebar:#1A1C22;
--sidebar-ink:#A8ACB6;
/* Layout-Standard ab 2026-08-22 (siehe LAYOUT.md): weisse Kopfzeile,
helle Seitenleiste, leicht grauer Hauptbereich, weisse Inhaltsboxen. */
--bar:#FFFFFF; /* Kopfzeile */
--bar-ink:#17191F; /* Text in der Kopfzeile */
--nav:#FFFFFF; /* Seitenleiste */
--nav-ink:#5A5E68; /* Text/Icons in der Seitenleiste */
--nav-active:#17191F; /* aktiver Eintrag */
/* Typografie & Form */
--font:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--r:8px; /* Standard-Radius (Buttons, Inputs) */
--r-card:12px; /* Karten, Panels, Modals */
--r-chip:5px; /* Chips/Label-Pillen (ab 2.1.0) — bewusst kleiner als
--r: bei ~18 px Pillenhöhe wirkt 8 px kugelig. */
}
html[data-theme="dark"]{
/* Dunkelmodus bewusst NEUTRAL schwarz/weiss (kein Blaustich) — Farbe nur als Akzent. */
--paper:#0E0E0F; --panel:#171718; --ink:#F2F2F3; --ink-soft:#A0A0A3;
--line:#2A2A2C; --line-soft:#1F1F21;
/* Plattform-Akzent im Dunkelmodus: gleicher Farbton, aber aufgehellt.
#1A5495 erreicht auf --paper #0E0E0F nur 2,52:1 und ist dort
unbrauchbar; #63A1E9 erreicht 7,17:1 (auf --panel #171718 6,66:1).
Auf der hellen Füllfläche muss der Text DUNKEL sein (7,17:1),
Weiß käme nur auf 2,69:1. */
--pv-accent:#63A1E9; --pv-accent-ink:#0E0E0F;
--pv-accent-text:#63A1E9; --pv-accent-hover:#7FB2ED;
--crit:#F2857B; --crit-on:#0E0E0F; --crit-hover:#F49B93;
--amber:#E0A64A; --green:#4FB073; --blue:#5A97CE;
--sidebar:#131314; --sidebar-ink:#A0A0A3;
--bar:#171718; --bar-ink:#F2F2F3;
--nav:#131314; --nav-ink:#A0A0A3; --nav-active:#F2F2F3;
}
@media (prefers-color-scheme:dark){
html:not([data-theme="light"]):not([data-theme="dark"]){
/* Dunkelmodus bewusst NEUTRAL schwarz/weiss (kein Blaustich) — Farbe nur als Akzent. */
--paper:#0E0E0F; --panel:#171718; --ink:#F2F2F3; --ink-soft:#A0A0A3;
--line:#2A2A2C; --line-soft:#1F1F21;
/* Plattform-Akzent im Dunkelmodus: gleicher Farbton, aber aufgehellt.
#1A5495 erreicht auf --paper #0E0E0F nur 2,52:1 und ist dort
unbrauchbar; #63A1E9 erreicht 7,17:1 (auf --panel #171718 6,66:1).
Auf der hellen Füllfläche muss der Text DUNKEL sein (7,17:1),
Weiß käme nur auf 2,69:1. */
--pv-accent:#63A1E9; --pv-accent-ink:#0E0E0F;
--pv-accent-text:#63A1E9; --pv-accent-hover:#7FB2ED;
--crit:#F2857B; --crit-on:#0E0E0F; --crit-hover:#F49B93;
--amber:#E0A64A; --green:#4FB073; --blue:#5A97CE;
--sidebar:#131314; --sidebar-ink:#A0A0A3;
--bar:#171718; --bar-ink:#F2F2F3;
--nav:#131314; --nav-ink:#A0A0A3; --nav-active:#F2F2F3;
}
}
/* ---- Grundlayout ---- */
body{margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
code,kbd,pre{font-family:var(--mono)}
/* ---- Statusabzeichen (entspricht .marke m-gut/m-warn/m-krit) ----
Rezept: getönter Hintergrund ~10 %, Text = Farbe, Rahmen = Farbe ~25 %, Pille. */
.marke{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;
border-radius:999px;white-space:nowrap;border:1px solid}
.m-gut { color:var(--green); background:color-mix(in srgb,var(--green) 10%,transparent); border-color:color-mix(in srgb,var(--green) 25%,transparent) }
.m-warn{ color:var(--amber); background:color-mix(in srgb,var(--amber) 10%,transparent); border-color:color-mix(in srgb,var(--amber) 25%,transparent) }
.m-krit{ color:var(--crit); background:color-mix(in srgb,var(--crit) 10%,transparent); border-color:color-mix(in srgb,var(--crit) 25%,transparent) }
.m-info{ color:var(--blue); background:color-mix(in srgb,var(--blue) 10%,transparent); border-color:color-mix(in srgb,var(--blue) 25%,transparent) }
/* ---- Label-Pillen (Schlüssel/Wert) — ab Standard 2.1.0 ----------------
Darstellung von Ressourcen-Labels (`backup=offsite`, `gen=2`, `queue`).
Vorbild ist die Hetzner Console: eine ZWEIGETEILTE Pille — links der
Schlüssel auf grauer Fläche in fetterer, dunklerer Schrift, rechts der
Wert auf der Panel-Fläche in normaler Schrift, feine Umrandung um das
Ganze und eine Trennlinie dazwischen.
Warum zweigeteilt und nicht „k=v" in einem Chip: Schlüssel und Wert sind
unterschiedliche Dinge. Wer eine Zeile überfliegt, sucht nach dem
Schlüssel; der Wert ist erst danach interessant. Die Zweiteilung macht
den Schlüssel ohne Farbe (also barrierefrei) zum Ankerpunkt.
Aufbau:
backupoffsite
queue
…Chevron-SVG…
Regeln:
* Label OHNE Wert: das Element .pv-label__v einfach WEGLASSEN — es gibt
dann keine leere weiße Hälfte (Hetzner macht es genauso).
* Überlauf: die Pillenzeile scrollt IN SICH (nie die Seite). Sobald rechts
mehr kommt, setzt das Modul per JS `data-pv-overflow="true"`; dann
erscheinen Ausblendung und Chevron. Reines CSS kann „ist überlaufen"
nicht erkennen, deshalb das Attribut als Schnittstelle.
* Farben ausschließlich aus den Tokens; im Dunkelmodus sind --line-soft
(Schlüsselhälfte) und --panel (Werthälfte) gespiegelt, die Zweiteilung
bleibt dadurch sichtbar, ohne feste Grauwerte zu wiederholen.
* Sitzt die Zeile nicht auf --panel (z. B. auf einer getönten Unterzeile),
bekommt .pv-labels lokal `--pv-labels-bg:`, damit die
Ausblendung zur richtigen Farbe verläuft. */
.pv-labels{position:relative;min-width:0;max-width:100%}
.pv-labels__scroll{
display:flex;align-items:center;gap:4px;
overflow-x:auto;overflow-y:hidden;
/* Die Bildlaufleiste würde in einer 18-px-Zeile mehr stören als helfen —
der Hinweis auf mehr Inhalt ist die Ausblendung samt Chevron. */
scrollbar-width:none;-ms-overflow-style:none;
padding:1px 0; /* Rahmen der Pillen nicht anschneiden */
}
.pv-labels__scroll::-webkit-scrollbar{display:none}
.pv-labels__leer{color:var(--ink-soft)}
.pv-label{
display:inline-flex;align-items:stretch;flex:0 0 auto;max-width:100%;
border:1px solid var(--line);border-radius:var(--r-chip);overflow:hidden;
font-family:var(--mono);font-size:11px;line-height:16px;white-space:nowrap;
}
.pv-label__k{padding:1px 6px;background:var(--line-soft);color:var(--ink);font-weight:700}
.pv-label__v{padding:1px 6px;background:var(--panel);color:var(--ink-soft);font-weight:400;
border-left:1px solid var(--line);overflow:hidden;text-overflow:ellipsis}
/* Überlauf-Hinweis: Ausblendung zum rechten Rand + Chevron. */
.pv-labels[data-pv-overflow="true"]::after{
content:"";position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
background:linear-gradient(to right,transparent,var(--pv-labels-bg,var(--panel)) 65%);
}
.pv-labels__more{
position:absolute;top:50%;right:0;transform:translateY(-50%);
display:none;pointer-events:none;color:var(--ink-soft);
/* Ueber der Ausblendung: das ::after wird als letztes gezeichnet und wuerde
den Chevron sonst verdecken. */
z-index:1}
.pv-labels[data-pv-overflow="true"] .pv-labels__more{display:block}
.pv-labels__more svg{display:block;width:14px;height:14px}
/* ---- Schaltflächen ---- */
.btn{border-radius:var(--r);font-size:14px;font-weight:600;padding:9px 16px;cursor:pointer;
display:inline-flex;align-items:center;gap:8px;border:none;line-height:1}
/* Inhaltsbereich → überschreibbarer Akzent. Die Textfarbe ist NICHT fest
weiß, sondern folgt der Helligkeit der Akzentfläche (--accent-on). */
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-danger{background:var(--crit);color:var(--crit-on)}
.btn-primary:disabled{background:var(--ink-soft);cursor:default}
.btn-ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);font-weight:500;padding:9px 14px}
/* ---- Formularelemente ---- */
.field,input,select,textarea{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;
border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;background:var(--panel);
color:var(--ink);outline:none}
/* Fokusring = Plattform-Chrom → IMMER --pv-accent, nie mandantenfähig. */
.field:focus,input:focus,select:focus,textarea:focus{border-color:var(--pv-accent)}
:focus-visible{outline:2px solid var(--pv-accent);outline-offset:2px}
label{font-size:12px;color:var(--ink-soft)}
/* ---- Karten/Kacheln ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:16px}
/* ---- Tabellen ---- */
table{width:100%;border-collapse:collapse;background:var(--panel);
border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
th{padding:10px 12px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
color:var(--ink-soft);white-space:nowrap;text-align:left}
td{padding:10px 12px;border-top:1px solid var(--line-soft);font-size:14px}
/* ---- Meldungen/Flash ---- */
.flash{border-radius:var(--r);padding:10px 14px;font-size:13.5px;border:1px solid var(--line);
background:var(--panel);color:var(--ink)}
.flash-gut { border-color:color-mix(in srgb,var(--green) 40%,var(--line)); background:color-mix(in srgb,var(--green) 8%,var(--panel)) }
.flash-warn{ border-color:color-mix(in srgb,var(--amber) 40%,var(--line)); background:color-mix(in srgb,var(--amber) 8%,var(--panel)) }
.flash-krit{ border-color:color-mix(in srgb,var(--crit) 40%,var(--line)); background:color-mix(in srgb,var(--crit) 8%,var(--panel)) }
/* ---- Navigation (linke Sidebar, immer dunkel) ----
ALTBESTAND, aber Plattform-Chrom → --pv-accent, nicht überschreibbar. */
.nav{background:var(--sidebar);color:var(--sidebar-ink);min-height:100vh;padding:12px;
display:flex;flex-direction:column;gap:2px;width:220px;box-sizing:border-box}
.nav a{color:var(--sidebar-ink);padding:8px 12px;border-radius:var(--r);font-size:14px;font-weight:500}
.nav a.active,.nav a[aria-current="page"]{color:var(--pv-accent-ink);background:var(--pv-accent)}
.nav a:hover{color:#fff}
/* Kopfbereich: Titel + angemeldeter Nutzer/Abmelden */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.topbar .user{font-size:12px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px}