/* ============================================================ GuniWeb Design System — guniweb.css (v1.0.0) ------------------------------------------------------------ CSS Custom Properties + Basis-Komponenten der Marke GuniWeb. Kanonische Werte: tokens.json (einzige Quelle der Wahrheit). Abgeleitet aus guniweb.de + GuniWeb-Logo. Dark Mode: - automatisch via @media (prefers-color-scheme: dark) - manuell via bzw. data-theme="light" (das Attribut gewinnt immer gegen die Systemeinstellung) Keine externen Abhängigkeiten. Schrift Inter bitte im Projekt selbst einbinden (z. B. fonts.bunny.net oder Google Fonts). ============================================================ */ /* ---------- 1. Tokens: modusunabhängig ---------- */ :root { /* Akzent (GuniWeb-Orange, in hell UND dunkel identisch) */ --gw-accent: #EA8E41; --gw-accent-dark: #C0701F; --gw-accent-light: #F0B87A; --gw-accent-muted: #D4782E; /* Marken-Verlauf (aus dem Logo): accentLight → accentDark */ --gw-gradient-accent: linear-gradient(135deg, #F0B87A 0%, #C0701F 100%); /* Spacing (px) */ --gw-space-xs: 4px; --gw-space-sm: 8px; --gw-space-md: 12px; --gw-space-lg: 16px; --gw-space-xl: 24px; --gw-space-xxl: 32px; --gw-space-view: 28px; /* viewPadding: Außenabstand ganzer Ansichten */ --gw-space-card: 18px; /* cardPadding: Innenabstand von Karten */ /* Radien (px) — immer weiche Rundung */ --gw-radius-badge: 4px; --gw-radius-sm: 8px; --gw-radius-md: 12px; --gw-radius-lg: 16px; /* Schatten */ --gw-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.10); --gw-shadow-lifted: 0 6px 16px rgba(0, 0, 0, 0.15); /* Typografie */ --gw-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --gw-type-hero-number: 700 48px/1.05 var(--gw-font); --gw-type-large-number: 700 30px/1.1 var(--gw-font); --gw-type-title: 700 32px/1.2 var(--gw-font); --gw-type-headline: 600 17px/1.35 var(--gw-font); --gw-type-body: 400 15px/1.55 var(--gw-font); --gw-type-caption: 500 12px/1.4 var(--gw-font); } /* ---------- 2. Tokens: heller Modus (Default) ---------- */ :root, [data-theme="light"] { color-scheme: light; --gw-background: #FAF7F2; --gw-surface: #F5F3F0; --gw-surface-elevated: #FFFFFF; --gw-border: #E8E4DF; --gw-text-primary: #1C1C1E; --gw-text-secondary: #6B6560; --gw-text-tertiary: #9A9690; --gw-success: #2F9E44; --gw-error: #D9403A; --gw-warning: #D9A514; } /* ---------- 3. Tokens: dunkler Modus (automatisch) ---------- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --gw-background: #111110; --gw-surface: #1C1C1E; --gw-surface-elevated: #26241F; --gw-border: rgba(245, 243, 240, 0.08); --gw-text-primary: #F5F3F0; --gw-text-secondary: #9A9690; --gw-text-tertiary: #6B6560; --gw-success: #51CF66; --gw-error: #F2555A; --gw-warning: #F5C518; } } /* Manueller Override gewinnt gegen die Systemeinstellung */ [data-theme="light"] { color-scheme: light; --gw-background: #FAF7F2; --gw-surface: #F5F3F0; --gw-surface-elevated: #FFFFFF; --gw-border: #E8E4DF; --gw-text-primary: #1C1C1E; --gw-text-secondary: #6B6560; --gw-text-tertiary: #9A9690; --gw-success: #2F9E44; --gw-error: #D9403A; --gw-warning: #D9A514; } [data-theme="dark"] { color-scheme: dark; --gw-background: #111110; --gw-surface: #1C1C1E; --gw-surface-elevated: #26241F; --gw-border: rgba(245, 243, 240, 0.08); --gw-text-primary: #F5F3F0; --gw-text-secondary: #9A9690; --gw-text-tertiary: #6B6560; --gw-success: #51CF66; --gw-error: #F2555A; --gw-warning: #F5C518; } /* ---------- 4. Basis ---------- */ .gw-base, body.gw-base { margin: 0; background: var(--gw-background); color: var(--gw-text-primary); font: var(--gw-type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- 5. Typo-Klassen ---------- */ .gw-hero-number { font: var(--gw-type-hero-number); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .gw-large-number { font: var(--gw-type-large-number); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .gw-title { font: var(--gw-type-title); letter-spacing: -0.015em; } .gw-headline { font: var(--gw-type-headline); } .gw-body { font: var(--gw-type-body); } .gw-caption { font: var(--gw-type-caption); } .gw-text-primary { color: var(--gw-text-primary); } .gw-text-secondary { color: var(--gw-text-secondary); } .gw-text-tertiary { color: var(--gw-text-tertiary); } .gw-text-accent { color: var(--gw-accent-muted); } /* Text im Marken-Verlauf (z. B. Hero-Kennzahlen) */ .gw-gradient-text { background: var(--gw-gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- 6. Card ---------- */ .gw-card { background: var(--gw-surface-elevated); border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg); box-shadow: var(--gw-shadow-soft); padding: var(--gw-space-card); } .gw-card--lifted { box-shadow: var(--gw-shadow-lifted); } .gw-card--flat { box-shadow: none; background: var(--gw-surface); } /* ---------- 7. Buttons ---------- */ .gw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gw-space-sm); padding: 10px var(--gw-space-lg); border: 1px solid var(--gw-border); border-radius: var(--gw-radius-md); background: var(--gw-surface-elevated); color: var(--gw-text-primary); font: var(--gw-type-headline); font-size: 15px; cursor: pointer; text-decoration: none; transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .gw-btn:hover { border-color: var(--gw-accent); } .gw-btn:active { transform: translateY(1px); } .gw-btn:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; } .gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; } /* Primär: Marken-Verlauf, Hover = accentDark */ .gw-btn--primary { background: var(--gw-gradient-accent); /* Verlauf bis zur Border-Box zeichnen — sonst zeigt die 1px transparente Border einen hellen Streifen am rechten/unteren Rand (Fringe). */ background-origin: border-box; border-color: transparent; color: #FFFFFF; box-shadow: var(--gw-shadow-soft); } .gw-btn--primary:hover { background: var(--gw-accent-dark); border-color: transparent; } .gw-btn--primary:disabled:hover { background: var(--gw-gradient-accent); } /* Leise Variante: Akzent nur als Text */ .gw-btn--quiet { background: transparent; border-color: transparent; color: var(--gw-accent-muted); } .gw-btn--quiet:hover { background: var(--gw-surface); } /* ---------- 8. Badges ---------- */ .gw-badge { display: inline-block; padding: 2px var(--gw-space-sm); border-radius: var(--gw-radius-badge); font: var(--gw-type-caption); letter-spacing: 0.02em; background: color-mix(in srgb, var(--gw-accent) 16%, transparent); color: var(--gw-accent-muted); } .gw-badge--solid { background: var(--gw-accent); color: #FFFFFF; } .gw-badge--success { background: color-mix(in srgb, var(--gw-success) 16%, transparent); color: var(--gw-success); } .gw-badge--error { background: color-mix(in srgb, var(--gw-error) 16%, transparent); color: var(--gw-error); } .gw-badge--warning { background: color-mix(in srgb, var(--gw-warning) 18%, transparent); color: var(--gw-warning); } /* ---------- 9. Input ---------- */ .gw-input { display: block; width: 100%; box-sizing: border-box; padding: 9px var(--gw-space-md); border: 1px solid var(--gw-border); border-radius: var(--gw-radius-sm); background: var(--gw-surface-elevated); color: var(--gw-text-primary); font: var(--gw-type-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .gw-input::placeholder { color: var(--gw-text-tertiary); } .gw-input:focus { outline: none; border-color: var(--gw-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gw-accent) 22%, transparent); } .gw-input:disabled { background: var(--gw-surface); opacity: 0.6; } .gw-input--error { border-color: var(--gw-error); } /* ---------- 10. Metric-Card (wie im App-Dashboard) ---------- */ .gw-metric { background: var(--gw-surface-elevated); border: 1px solid var(--gw-border); border-radius: var(--gw-radius-lg); box-shadow: var(--gw-shadow-soft); padding: var(--gw-space-card); display: flex; flex-direction: column; gap: var(--gw-space-xs); } .gw-metric__label { font: var(--gw-type-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gw-text-secondary); } .gw-metric__value { font: var(--gw-type-large-number); font-variant-numeric: tabular-nums; background: var(--gw-gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .gw-metric__value--hero { font: var(--gw-type-hero-number); } .gw-metric__hint { font: var(--gw-type-caption); color: var(--gw-text-tertiary); } /* ---------- 11. Divider ---------- */ .gw-divider { border: 0; border-top: 1px solid var(--gw-border); margin: var(--gw-space-xl) 0; }