/* ============================================================================
VIVASECUR UI-Theme · v1.0.0 · 2026-07-10
Single Source of Truth: c:\test_cs\VivasecurStyleguide (STYLEGUIDE.md)
CI-Basis: VIVASECUR Styleguide (IDS_1903, Juni 2019) + gelieferte RGB-Logos
Petrol #00839C (Akzent; auf Dunkel aufgehellt)
Grau #707173 (Neutralton-Familie)
Schrift Nunito (Variable Font, selbst gehostet)
Dunkel ist Standard; Hell via (theme-toggle.js).
========================================================================== */
/* ---- Hausschrift (Variable Font 200–1000; wir nutzen 300/400/600/700) ---- */
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('fonts/nunito-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito';
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url('fonts/nunito-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---- Design-Tokens: Dunkel = Standard -------------------------------------
Neutraltöne aus der CI-Grau-Familie (#707173) abgeleitet, bewusst neutral
(kein Blaustich). Akzent auf Dunkel aufgehellt, damit Text/Fokus lesbar bleibt. */
:root {
--vs-bg: #141618;
--vs-panel: #1e2124;
--vs-panel2: #2a2e32;
--vs-line: #3d4247;
--vs-text: #e8eaec;
--vs-muted: #9a9ea3;
--vs-accent: #14a5c4; /* Petrol, für Dunkel aufgehellt */
--vs-accent-contrast: #06171b; /* Text AUF Akzentflächen */
/* Funktionsfarben (abgeleitet, nicht CI-offiziell – zurückhaltend einsetzen) */
--vs-ok: #3fae62;
--vs-warn: #d1a437;
--vs-danger: #e05252;
--vs-font: 'Nunito', system-ui, 'Segoe UI', Roboto, sans-serif;
--vs-radius: 10px;
--vs-radius-sm: 6px;
--vs-shadow: 0 4px 16px rgba(0, 0, 0, .35);
color-scheme: dark;
}
/* ---- Hell (Option; Umschalten via theme-toggle.js) ---- */
:root[data-theme="light"] {
--vs-bg: #f2f3f4;
--vs-panel: #ffffff;
--vs-panel2: #e9ebec;
--vs-line: #cfd3d6;
--vs-text: #26292b;
--vs-muted: #707173; /* CI-Grau */
--vs-accent: #00839c; /* CI-Petrol unverändert */
--vs-accent-contrast: #ffffff;
--vs-ok: #2e8c4e;
--vs-warn: #a37f17;
--vs-danger: #c23838;
--vs-shadow: 0 4px 16px rgba(0, 0, 0, .12);
color-scheme: light;
}
/* ---- Logo (beide Varianten einbinden; CSS blendet passend um) ----
Freiraum-Regel der CI (Buchstabenhöhe rundum) steckt im Header-Padding. */
.vs-logo { height: 20px; display: block; }
.vs-logo-light { display: none; }
:root[data-theme="light"] .vs-logo-dark { display: none; }
:root[data-theme="light"] .vs-logo-light { display: block; }
/* ---- Basisbausteine (opt-in über Klassen bzw. body.vs-app) ---- */
.vs-app {
margin: 0;
font-family: var(--vs-font);
font-size: 14px;
background: var(--vs-bg);
color: var(--vs-text);
line-height: 1.5;
}
/* Kopfzeile: Logo links (mit CI-Freiraum), App-Name, Aktionen rechts */
.vs-header {
padding: 14px 24px;
background: var(--vs-panel);
border-bottom: 1px solid var(--vs-line);
display: flex;
align-items: center;
gap: 20px;
position: sticky;
top: 0;
z-index: 10;
}
.vs-header h1 { font-size: 17px; font-weight: 600; margin: 0; }
.vs-header .vs-spacer { flex: 1; }
.vs-card {
background: var(--vs-panel);
border: 1px solid var(--vs-line);
border-radius: var(--vs-radius);
padding: 16px;
margin-bottom: 14px;
}
/* Formularelemente + Buttons für Seiten, die body.vs-app setzen */
.vs-app button, .vs-btn {
cursor: pointer;
border: 1px solid var(--vs-line);
background: var(--vs-panel2);
color: var(--vs-text);
padding: 8px 14px;
border-radius: var(--vs-radius-sm);
font-size: 13px;
font-family: var(--vs-font);
}
.vs-app button:hover, .vs-btn:hover { border-color: var(--vs-accent); }
.vs-app button.primary, .vs-btn-primary {
background: var(--vs-accent);
color: var(--vs-accent-contrast);
border-color: var(--vs-accent);
font-weight: 700;
}
.vs-app button.danger, .vs-btn-danger { color: var(--vs-danger); }
.vs-app button.small, .vs-btn-small { padding: 4px 10px; font-size: 12px; }
.vs-app input, .vs-app select, .vs-app textarea {
width: 100%;
padding: 8px 10px;
background: var(--vs-panel2);
color: var(--vs-text);
border: 1px solid var(--vs-line);
border-radius: var(--vs-radius-sm);
font-size: 13px;
font-family: inherit;
}
.vs-app input:focus, .vs-app select:focus, .vs-app textarea:focus {
outline: 2px solid var(--vs-accent);
border-color: transparent;
}
.vs-app input[type="checkbox"], .vs-app input[type="radio"] {
width: auto;
accent-color: var(--vs-accent);
}
.vs-app label { display: block; font-size: 12px; color: var(--vs-muted); margin-bottom: 4px; }
.vs-hint { font-size: 12px; color: var(--vs-muted); margin: 4px 0 0; }
.vs-toast {
position: fixed;
bottom: 24px;
right: 24px;
padding: 12px 18px;
border-radius: 8px;
font-size: 14px;
opacity: 0;
transform: translateY(10px);
transition: all .2s;
pointer-events: none;
max-width: 420px;
box-shadow: var(--vs-shadow);
}
.vs-toast.show { opacity: 1; transform: translateY(0); }
.vs-toast.ok { background: var(--vs-ok); color: #fff; }
.vs-toast.err { background: var(--vs-danger); color: #fff; }
/* Theme-Umschalter (Button-Inhalt: ◐) */
.vs-theme-btn { min-width: 36px; }