/*
* ════════════════════════════════════════════════════════════════
* CompliOS · base.css · Design-System v3.1 · Hybrid C+
* Stand: Mai 2026 — Polish-Update
* ════════════════════════════════════════════════════════════════
*/
/* ══════════════════════════════════════════════════════════════
1. DESIGN-TOKENS
══════════════════════════════════════════════════════════════ */
:root {
--paper: oklch(0.975 0.008 70);
--paper-2: oklch(0.96 0.010 65);
--card: oklch(0.99 0.005 70);
--ink: oklch(0.18 0.008 60);
--graphite: oklch(0.20 0.008 60);
--soft: oklch(0.50 0.010 60);
--muted: oklch(0.65 0.010 60);
--rule: oklch(0.88 0.010 65);
--rule-soft: oklch(0.93 0.008 65);
--forest: oklch(0.36 0.11 150);
--forest-hi: oklch(0.46 0.13 150);
--forest-soft: oklch(0.94 0.05 150);
--oxblood: oklch(0.39 0.13 25);
--oxblood-hi: oklch(0.48 0.16 25);
--oxblood-soft: oklch(0.94 0.05 25);
--gold: oklch(0.72 0.13 80);
--gold-soft: oklch(0.94 0.06 80);
--font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
--font-sans: "Manrope", system-ui, sans-serif;
--font-serif: "Instrument Serif", Georgia, serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 18px;
--radius-full: 9999px;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.05);
--shadow-md: 0 4px 16px rgba(0,0,0,0.07);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.09);
--sidebar-width: 240px;
--content-padding: 40px;
}
/* ══════════════════════════════════════════════════════════════
2. RESET & BASIS
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.55;
color: var(--ink);
background: var(--paper);
min-height: 100vh;
width: 100%;
overflow-x: hidden;
}
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
/* ══════════════════════════════════════════════════════════════
3. TYPOGRAFIE
══════════════════════════════════════════════════════════════ */
/* Google Fonts — in basis.html einfügen:
*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--ink);
}
p { color: var(--soft); line-height: 1.55; }
.page-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1.05;
}
.label-tag {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.label-tag.forest { color: var(--forest); }
.label-tag.oxblood { color: var(--oxblood); }
.text-accent { font-family: var(--font-serif); font-style: italic; }
.text-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.text-muted { color: var(--muted); }
.text-soft { color: var(--soft); }
.text-forest { color: var(--forest); }
.text-oxblood { color: var(--oxblood); }
.text-gold { color: var(--gold); }
/* ══════════════════════════════════════════════════════════════
4. LAYOUT
══════════════════════════════════════════════════════════════ */
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
min-height: 100vh;
width: 100%;
}
/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
background: var(--paper-2);
border-right: 1px solid var(--rule);
display: flex;
flex-direction: column;
padding: 20px 12px;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.sidebar-brand {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--ink);
padding: 10px 12px 18px;
border-bottom: 1px solid var(--rule);
margin-bottom: 12px;
line-height: 1;
}
.sidebar-brand-sub {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-top: 4px;
}
.sidebar-section-label {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
padding: 6px 12px 4px;
margin-top: 14px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
gap: 1px;
flex: 1;
}
.sidebar-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
color: var(--soft);
text-decoration: none;
transition: background 120ms, color 120ms;
border: 1px solid transparent;
}
.sidebar-item:hover {
background: var(--card);
color: var(--ink);
text-decoration: none;
}
.sidebar-item.active {
background: var(--card);
color: var(--ink);
font-weight: 600;
border-color: var(--rule);
box-shadow: var(--shadow-sm);
}
.sidebar-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--rule);
flex-shrink: 0;
transition: background 120ms;
}
.sidebar-item:hover .sidebar-dot { background: var(--muted); }
.sidebar-item.active .sidebar-dot { background: var(--forest); }
.sidebar-footer {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--rule);
}
/* ── Haupt-Inhalt ─────────────────────────────────────────── */
.main-content {
padding: var(--content-padding);
min-height: 100vh;
width: 100%;
min-width: 0;
}
.page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
margin-bottom: 32px;
}
.page-header-text .page-title { margin-bottom: 4px; }
.page-header-text p { font-size: 13px; color: var(--muted); }
/* ══════════════════════════════════════════════════════════════
5. BUTTONS
══════════════════════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 18px;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background 130ms, color 130ms, box-shadow 130ms, transform 80ms;
white-space: nowrap;
line-height: 1;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--forest);
color: var(--paper);
border-color: var(--forest);
}
.btn-primary:hover {
background: var(--forest-hi);
border-color: var(--forest-hi);
box-shadow: 0 4px 12px oklch(0.36 0.11 150 / 0.28);
color: var(--paper);
}
.btn-secondary {
background: var(--card);
color: var(--ink);
border-color: var(--rule);
}
.btn-secondary:hover {
background: var(--paper-2);
border-color: oklch(0.78 0.010 65);
color: var(--ink);
}
.btn-danger {
background: var(--oxblood);
color: var(--paper);
border-color: var(--oxblood);
}
.btn-danger:hover {
background: var(--oxblood-hi);
border-color: var(--oxblood-hi);
box-shadow: 0 4px 12px oklch(0.39 0.13 25 / 0.28);
color: var(--paper);
}
.btn-ghost {
background: transparent;
color: var(--soft);
border-color: transparent;
}
.btn-ghost:hover {
background: var(--paper-2);
color: var(--ink);
}
.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { padding: 13px 26px; font-size: 15px; border-radius: var(--radius-lg); }
/* ══════════════════════════════════════════════════════════════
6. PILLS / STATUS-BADGES
══════════════════════════════════════════════════════════════ */
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.pill-dot {
width: 5px;
height: 5px;
border-radius: 50%;
flex-shrink: 0;
}
.pill-active { background: var(--forest-soft); color: var(--forest); }
.pill-active .pill-dot { background: var(--forest); }
.pill-pending { background: var(--gold-soft); color: oklch(0.48 0.12 75); }
.pill-pending .pill-dot { background: var(--gold); }
.pill-critical { background: var(--oxblood-soft); color: var(--oxblood); }
.pill-critical .pill-dot { background: var(--oxblood); }
.pill-draft { background: var(--rule-soft); color: var(--soft); }
.pill-draft .pill-dot { background: var(--muted); }
/* ══════════════════════════════════════════════════════════════
7. CARDS
══════════════════════════════════════════════════════════════ */
.card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
padding: 24px 28px;
box-shadow: var(--shadow-sm);
}
.card-sm {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 16px 20px;
}
.card-forest { border-top: 3px solid var(--forest); }
.card-oxblood { border-top: 3px solid var(--oxblood); }
.card-gold { border-top: 3px solid var(--gold); }
.card-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 4px;
}
.card-desc {
font-size: 13px;
color: var(--soft);
line-height: 1.55;
}
/* ══════════════════════════════════════════════════════════════
8. TABELLEN
══════════════════════════════════════════════════════════════ */
.table-wrapper {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.table thead tr {
background: var(--paper-2);
border-bottom: 1px solid var(--rule);
}
.table th {
padding: 12px 20px;
text-align: left;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.table td {
padding: 14px 20px;
color: var(--ink);
border-bottom: 1px solid var(--rule-soft);
vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: oklch(0.975 0.006 68); }
/* Nummer-Spalte (№) */
.table-num {
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted);
font-weight: 500;
}
/* Titel + Untertitel in Tabellenzeile */
.table-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--ink);
}
.table-subtitle {
font-size: 12px;
color: var(--soft);
margin-top: 2px;
}
/* Vollständigkeits-Bar in Tabelle */
.completeness-bar {
min-width: 100px;
}
.completeness-value {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
margin-bottom: 4px;
}
.completeness-track {
height: 3px;
background: var(--rule-soft);
border-radius: 2px;
overflow: hidden;
}
.completeness-fill {
height: 100%;
border-radius: 2px;
}
.completeness-fill.high { background: var(--forest); }
.completeness-fill.medium { background: var(--gold); }
.completeness-fill.low { background: var(--oxblood); }
/* Aktionslinks */
.table-action {
font-size: 12px;
font-weight: 600;
color: var(--forest);
text-decoration: none;
padding: 4px 8px;
border-radius: var(--radius-sm);
transition: background 120ms;
}
.table-action:hover { background: var(--forest-soft); text-decoration: none; }
.table-action-danger {
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
padding: 4px 8px;
border-radius: var(--radius-sm);
transition: background 120ms, color 120ms;
}
.table-action-danger:hover {
background: var(--oxblood-soft);
color: var(--oxblood);
text-decoration: none;
}
/* ══════════════════════════════════════════════════════════════
9. FORMULARE
══════════════════════════════════════════════════════════════ */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.form-label {
font-size: 13px;
font-weight: 600;
color: var(--ink);
}
.form-control {
width: 100%;
padding: 9px 14px;
background: var(--paper-2);
border: 1px solid var(--rule);
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
color: var(--ink);
transition: border-color 150ms, box-shadow 150ms, background 150ms;
outline: none;
}
.form-control::placeholder { color: var(--muted); }
.form-control:hover { background: var(--card); border-color: oklch(0.78 0.010 65); }
.form-control:focus {
background: var(--card);
border-color: var(--forest);
box-shadow: 0 0 0 3px oklch(0.36 0.11 150 / 0.10);
}
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 96px; }
.form-control.is-invalid { border-color: var(--oxblood); }
.form-control.is-invalid:focus {
box-shadow: 0 0 0 3px oklch(0.39 0.13 25 / 0.10);
}
.form-error { font-size: 12px; color: var(--oxblood); font-weight: 500; }
.form-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* Formular mit max-width und zwei Spalten */
.form-body { max-width: 780px; }
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
.form-section {
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid var(--rule-soft);
}
.form-section-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 16px;
}
.form-check {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 10px 0;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 16px;
height: 16px;
accent-color: var(--forest);
cursor: pointer;
}
/* ══════════════════════════════════════════════════════════════
10. FRIST-BAR
══════════════════════════════════════════════════════════════ */
.frist-bar {
height: 5px;
background: var(--rule-soft);
border-radius: 3px;
overflow: hidden;
}
.frist-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 600ms ease;
}
.frist-bar-fill.safe { background: var(--forest); }
.frist-bar-fill.warning { background: var(--gold); }
.frist-bar-fill.critical { background: var(--oxblood); }
/* ══════════════════════════════════════════════════════════════
11. CIRCLE-TIMER
══════════════════════════════════════════════════════════════ */
.circle-timer { position: relative; flex-shrink: 0; }
.circle-timer-label {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.circle-timer-number {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--oxblood);
letter-spacing: -0.02em;
line-height: 1;
}
.circle-timer-unit {
font-size: 10px;
color: var(--soft);
font-weight: 600;
margin-top: 2px;
}
/* ══════════════════════════════════════════════════════════════
12. STAT-CARDS (Dashboard)
══════════════════════════════════════════════════════════════ */
.stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
/* Responsive */
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: var(--radius-xl);
padding: 18px 22px 16px;
box-shadow: var(--shadow-sm);
overflow: hidden;
position: relative;
}
.stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.stat-number-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 12px;
}
.stat-value {
font-family: var(--font-display);
font-size: 40px;
font-weight: 700;
letter-spacing: -0.04em;
color: var(--ink);
line-height: 1;
}
.stat-delta {
font-size: 12px;
font-weight: 600;
font-family: var(--font-sans);
}
.stat-delta.positive { color: var(--forest); }
.stat-delta.negative { color: var(--oxblood); }
.stat-delta.neutral { color: var(--muted); }
/* Sparkline SVG — automatisch unten */
.stat-sparkline {
width: 100%;
height: 32px;
display: block;
margin-top: 4px;
}
/* Farbige linke Kante */
.stat-card-forest { border-left: 3px solid var(--forest); }
.stat-card-oxblood { border-left: 3px solid var(--oxblood); }
.stat-card-gold { border-left: 3px solid var(--gold); }
.stat-card-forest .stat-value { color: var(--ink); }
.stat-card-oxblood .stat-value { color: var(--oxblood); }
.stat-card-gold .stat-value { color: var(--gold); }
/* ══════════════════════════════════════════════════════════════
13. ALERTS
══════════════════════════════════════════════════════════════ */
.alert {
display: flex;
gap: 16px;
padding: 14px 18px;
border-radius: var(--radius-lg);
font-size: 14px;
line-height: 1.55;
margin-bottom: 20px;
}
.alert-info { background: var(--forest-soft); border-left: 3px solid var(--forest); color: var(--forest); }
.alert-warning { background: var(--gold-soft); border-left: 3px solid var(--gold); color: oklch(0.45 0.12 75); }
.alert-critical { background: var(--oxblood-soft); border-left: 3px solid var(--oxblood); color: var(--oxblood); }
.alert-neutral { background: var(--paper-2); border-left: 3px solid var(--rule); color: var(--soft); }
.alert strong { font-weight: 700; }
/* ══════════════════════════════════════════════════════════════
14. UTILITY
══════════════════════════════════════════════════════════════ */
/* Flexbox */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
/* Grid */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
/* Margin */
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
/* Trennlinien */
.divider { border: none; border-top: 1px solid var(--rule); margin: 24px 0; }
.divider-soft { border: none; border-top: 1px solid var(--rule-soft); margin: 16px 0; }
/* Texttrunkierung */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Avatar */
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--forest);
color: var(--paper);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
text-transform: uppercase;
font-family: var(--font-sans);
}
.avatar-oxblood { background: var(--oxblood); }
.avatar-graphite { background: var(--graphite); }
.avatar-sm { width: 24px; height: 24px; font-size: 10px; }
/* Gefahrenzone */
.danger-zone {
background: var(--oxblood-soft);
border: 1px solid oklch(0.82 0.05 25);
border-radius: var(--radius-lg);
padding: 20px 24px;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 64px 24px;
color: var(--muted);
}
.empty-state-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
letter-spacing: -0.025em;
color: var(--soft);
margin-bottom: 10px;
}
.empty-state p {
font-size: 14px;
max-width: 360px;
margin: 0 auto 24px;
}
/* Timestamp */
.timestamp {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
}
/* Sidebar Badges */
.sidebar-badge {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--soft);
background: var(--paper-2);
border: 1px solid var(--rule);
padding: 1px 7px;
border-radius: var(--radius-full);
margin-left: auto;
}
.sidebar-badge-critical {
color: var(--paper);
background: var(--oxblood);
border-color: var(--oxblood);
}