/* ==========================================================================
Metropole Design System v2.1 — ADDITIVER Token-Layer (Production)
==========================================================================
ZWECK
Dieser Layer ergänzt das bestehende Metropole Design System v2 (Suisse Intl,
Navy-Hierarchie, gedämpfte Semantikfarben — siehe Skill `metropole-design`)
um die im Redesign v2.1 definierten Elevation-, Tint- und Typo-Tokens.
HERKUNFT
1:1 übernommen aus dem geprüften Mockup-Token-Layer
/home/user/workspace/mockups/assets/css/tokens.css (Abschnitt "NEU (Erweiterung v2.1)")
und den Nachher-Mockups in /home/user/workspace/mockups/src/pages/*.html.
Persistiert im Repo unter design-v21/spec/tokens-v2.1.css (Referenz-/Rohfassung)
und als bereinigte, aktivierbare Fassung hier unter
v2-rebuild/public/assets/tokens-v2.1.css (diese Datei).
AKTIVIERUNG PRO AREA — KILL-SWITCH-PRINZIP (verbindlich, Backlog #1068)
Diese Datei ist so gebaut, dass sie GLOBAL geladen werden kann (ein einziger
in index.html, siehe unten), OHNE dass sich irgendein Pixel ändert,
solange kein Element im DOM eine `.v21`-Klasse trägt.
- :root { ... } Variablen-Deklarationen sind die einzige Ausnahme, die
UNGATED bleibt (reine Custom-Property-Definitionen erzeugen für sich
genommen kein Rendering, solange sie von keiner Regel referenziert
werden, die nicht ihrerseits gated ist).
- JEDE ANDERE REGEL in dieser Datei (jede Utility-Klasse, jeder Pseudo-
Selektor, jedes ::before/::after) ist hinter dem Wrapper `.v21` gated,
z. B. `.v21 .lvl2 { ... }` statt `.lvl2 { ... }`. Ohne `.v21` auf einem
Vorfahren-Element (typischerweise dem Area-Root, siehe
IMPLEMENTATION_SPEC.md Abschnitt 8.1) greift KEINE einzige Utility-Klasse
dieser Datei.
- KILL-SWITCH: Um die v2.1-Aktivierung für eine Area/einen View sofort und
vollständig rückgängig zu machen, genügt es, die Klasse `.v21` (bzw. die
spezifischere `.v21-`-Klasse gemäß IMPLEMENTATION_SPEC.md §8.1) vom
jeweiligen Root-Element zu entfernen. Kein Redeploy dieser CSS-Datei
nötig, kein Datenverlust, keine Seiteneffekte auf andere Areas.
- STATEMENTS-SCHUTZ: Da Statements-Routen niemals eine `.v21`-Klasse
erhalten (siehe IMPLEMENTATION_SPEC.md §1.1/§8.1.1), greift diese Datei
dort strukturell nicht — selbst wenn das Stylesheet global im
geladen wird.
EINBINDUNG IN DER ECHTEN APP (verbindlich)
- Diese Datei NICHT in :root der App-weiten Basis-CSS mergen. Sie wird als
EIGENSTÄNDIGE, zusätzliche CSS-Datei nach dem bestehenden Token-Stylesheet
geladen ( direkt nach dem bisherigen index-*.css in index.html).
- Alle Variablen hier sind NEU. Es wird NICHTS aus dem bestehenden v2-Token-Set
erneut definiert (kein --bg-strip, --bg-sidebar, --bg-page, --bg-card,
--bg-card-hover, --bg-active, --accent*, --red/--amber/--green/--blue/
--secondary, --text-*, --color-booking/--followup/--advancing/--contract/
--invoice/--growth/--research, --font-sans/--font-mono, --r-sm/--r-md/--r-lg).
Diese bestehenden Tokens werden hier nur REFERENZIERT (var(--bestehendes-token)),
niemals neu gesetzt.
HARTE SCOPE-REGEL — STATEMENTS BLEIBT UNANGETASTET
Diese Datei darf global geladen werden (Kill-Switch-Gating macht das
sicher), Statements-Routen erhalten aber laut Governance NIE eine
`.v21`-Klasse. Vor jedem Deploy: manueller Diff-Check, dass keine
Statements-Route eine `.v21`-Klasse im Rendered-DOM zeigt.
NAMING-KONVENTION
Alle neuen Variablen sind zusätzlich additiv und kollisionsfrei benannt
(Präfixe --bg-inset, --border-card, --elev-*, --tint-*, --t-11…--t-48,
--density-*). Neue Utility-Klassen (alle unter `.v21 …` gated): .lvl0/.lvl1/
.lvl2, .tint-red/-amber/-green/-blue, .dense-sm/.dense-xs, .section-label.
========================================================================== */
:root {
/* --------------------------------------------------------------------
HEBEL 1 — Elevation & Zoning
Ebene 0 "Inset": ruhige Sekundär-Zonen (lange Listen, Tabellen-Container)
Ebene 1 "Card": Standard — entspricht optisch dem bestehenden --bg-card,
bekommt aber jetzt einen expliziten Border-Token für konsistente Kanten.
Ebene 2 "Elevated/Hero": genau EIN Element pro Seite/View.
-------------------------------------------------------------------- */
--bg-inset: #0C1219; /* Ebene 0, borderless, dunkler als --bg-page */
--border-card: rgba(255, 255, 255, 0.06); /* Ebene 1, 1px Standard-Kante */
--elev-gradient: linear-gradient(180deg, #141d28 0%, #0f161f 100%); /* Ebene 2 Hero-Gradient, Licht von oben */
--elev-highlight: rgba(255, 255, 255, 0.05); /* Ebene 2 Top-Inner-Highlight, 1px */
--elev-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); /* Ebene 2 weicher Schatten */
/* --------------------------------------------------------------------
HEBEL 3 — Color Coding: Tint-Layer für Zeilen-/Zellen-Hintergründe
(NICHT für Text — Text nutzt weiterhin --red/--amber/--green/--blue)
10% Opacity ist der verbindliche Referenzwert aus den Mockups.
-------------------------------------------------------------------- */
--tint-red: rgba(196, 60, 60, 0.10); /* referenziert Farbwert von --red (#c43c3c) */
--tint-amber: rgba(179, 153, 63, 0.10); /* referenziert Farbwert von --amber (#b3993f) */
--tint-green: rgba(100, 166, 128, 0.10); /* referenziert Farbwert von --green (#64a680) */
--tint-blue: rgba(139, 181, 224, 0.10); /* referenziert Farbwert von --blue (#8BB5E0) */
/* --------------------------------------------------------------------
HEBEL 2 — Typo-Skala (Größen-Hierarchie)
Verbindliche Rollen-Zuordnung — gleiche Rolle = gleiche Größe überall:
--t-11 Section-Label (Uppercase, letterspaced), Footnotes, Chips
--t-13 Meta-Text, Tabellen-Sekundärspalten, Labels unter Werten
--t-15 Standard-Fließtext, Tabellenzellen, Zeilentitel
--t-20 Sub-Header, kleinere Kennzahlen in dichten Listen
--t-28 Sekundär-KPI (2-3 pro Seite)
--t-48 Hero-KPI (genau 1 pro Seite/View, Bold)
-------------------------------------------------------------------- */
--t-11: 11px;
--t-13: 13px;
--t-15: 15px;
--t-20: 20px;
--t-28: 28px;
--t-48: 48px;
/* --------------------------------------------------------------------
HEBEL 4 — Progressive Disclosure: Dichte-Utilities
Zeilenhöhen/Innenabstände für kompakte vs. Standard-Darstellung,
z. B. Sammelzeilen, kollabierte 0-Werte-Zeilen, dichte Inset-Listen.
-------------------------------------------------------------------- */
--density-standard-py: 10px; /* Standard-Zeilen-Innenabstand vertikal */
--density-sm-py: 6px; /* kompakte Zeile (z. B. Sammelzeile, leere Datensätze) */
--density-xs-py: 4px; /* sehr dichte Zeile (z. B. kollabierte Listen-Einträge) */
}
/* ==========================================================================
Elevation-Utility-Klassen (gated hinter .v21 — Kill-Switch-Schutz)
========================================================================== */
/* Ebene 0 — Inset. Für lange Listen/Tabellen-Container, keine eigene Kante. */
.v21 .lvl0 {
background: var(--bg-inset);
border: none;
border-radius: var(--r-md); /* referenziert bestehenden Radius-Token */
}
/* Ebene 1 — Card. Der Standard-Container. */
.v21 .lvl1 {
background: var(--bg-card); /* referenziert bestehenden --bg-card */
border: 1px solid var(--border-card);
border-radius: var(--r-md);
}
/* Ebene 2 — Elevated/Hero. Maximal 1× pro Seite/View verwenden. */
.v21 .lvl2 {
position: relative;
background: var(--elev-gradient);
border: 1px solid var(--border-card);
border-radius: var(--r-lg); /* referenziert bestehenden Radius-Token */
box-shadow: var(--elev-shadow);
}
.v21 .lvl2::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: var(--elev-highlight);
border-radius: var(--r-lg) var(--r-lg) 0 0;
pointer-events: none;
}
/* ==========================================================================
Tint-Utility-Klassen (Hebel 3 — Zeilen-/Zellen-Hintergrund, NIE für Nav)
Anwendung: Zeilenmarker bei Dringlichkeit, Kaskaden-Spalten (Kosten/Net
Earning), Priority-Zeilen. Kombination mit 3px-Kantenstrich (li-urgent-*)
für dreistufige Dringlichkeit, siehe IMPLEMENTATION_SPEC.md.
Alle Regeln gated hinter .v21.
========================================================================== */
.v21 .tint-red { background: var(--tint-red); }
.v21 .tint-amber { background: var(--tint-amber); }
.v21 .tint-green { background: var(--tint-green); }
.v21 .tint-blue { background: var(--tint-blue); }
/* Dreistufige Dringlichkeit — Zeilenmarker (3px linker Kantenstrich).
NIE in der Navigation verwenden (Color=Data-Regel bleibt bestehen). */
.v21 .li-urgent-overdue {
border-left: 3px solid var(--red); /* referenziert bestehenden --red */
background: var(--tint-red);
}
.v21 .li-urgent-today {
position: relative;
}
.v21 .li-urgent-today::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--amber); /* referenziert bestehenden --amber */
margin-right: 6px;
vertical-align: middle;
}
.v21 .li-urgent-planned {
/* neutral — kein Marker, keine Tint. Explizit dokumentiert damit kein
Redesign-Konsument "vergisst", dass planned bewusst unmarkiert bleibt. */
}
/* ==========================================================================
Dichte-Utilities (Hebel 4 — Progressive Disclosure). Gated hinter .v21.
========================================================================== */
/* Standard-Zeile (Referenz, meist bereits App-Default — hier nur benannt) */
.v21 .dense-standard { padding-top: var(--density-standard-py); padding-bottom: var(--density-standard-py); }
/* Kompakte Zeile — z. B. Sammelzeile "3 Artists ohne Aktivität",
leere Datensätze in Companies/Contacts, Inset-Listenzeilen. */
.v21 .dense-sm {
padding-top: var(--density-sm-py);
padding-bottom: var(--density-sm-py);
font-size: var(--t-13);
color: var(--text-secondary); /* referenziert bestehenden Text-Token */
}
/* Sehr dichte Zeile — z. B. kollabierte Sekundärlisten, "+N weitere"-Chips */
.v21 .dense-xs {
padding-top: var(--density-xs-py);
padding-bottom: var(--density-xs-py);
font-size: var(--t-11);
}
/* ==========================================================================
Section-Label (Hebel 1 — Sektionstrennung durch Whitespace statt Boxen)
Gated hinter .v21.
========================================================================== */
.v21 .section-label {
font-size: var(--t-11);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted); /* referenziert bestehenden --text-muted */
font-weight: 500;
}
/* ==========================================================================
Hover-Aktionen (Hebel 4 — Zeilen-Aktionen erst bei Hover sichtbar)
Anwendung: | … | … |
Gated hinter .v21.
========================================================================== */
.v21 .row-actions-on-hover .row-actions {
opacity: 0;
transition: opacity 0.12s ease;
pointer-events: none;
}
.v21 .row-actions-on-hover:hover .row-actions,
.v21 .row-actions-on-hover:focus-within .row-actions {
opacity: 1;
pointer-events: auto;
}
/* ==========================================================================
Chart-Dimming (Hebel 3 — Vorjahres-Dimmung in Charts)
Referenzwert: 40% Deckkraft für Vorjahresreihen/-balken (kpi-booking.html,
kpi-management.html, kpi.html). Aktuelles Jahr bleibt bei voller Deckkraft.
Gated hinter .v21.
========================================================================== */
.v21 .chart-series-prioryear {
opacity: 0.4;
}
.v21 .chart-series-current {
opacity: 1;
}
/* ==========================================================================
Tabular Numbers (bereits App-Grundregel — hier als Utility für neue
Komponenten, referenziert keine neue Farbe/Größe, nur Feature-Aktivierung)
Gated hinter .v21.
========================================================================== */
.v21 .num {
font-variant-numeric: tabular-nums;
}