Adminator
f22c5ebbfe
- PHP/MySQL Backend (XAMPP + Produktionsserver) - Front-Controller, API-Endpunkte, Session-Management - Flussmanagement-Simulation (Echtzeit, Punkt-basierter Fluss) - Stadt & Raumplanung (Prototyp, Top-Down Kachelsystem) - Klimawaechter 3D: Deiche kleiner, Baeume kippen, Budget angepasst - persistence.ts: Dualer Speicher (localStorage + Server-API) - 6 Unit-Test-Dateien fuer bestehende Simulationen Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
91 lines
2.6 KiB
CSS
91 lines
2.6 KiB
CSS
/* ========================================
|
|
GeoGraSim Design Tokens
|
|
Stil: Scandinavian Minimal
|
|
======================================== */
|
|
|
|
:root {
|
|
/* --- Farben: Gedeckte Naturpalette --- */
|
|
--color-bg: #fafaf8;
|
|
--color-bg-warm: #f5f3ef;
|
|
--color-surface: #ffffff;
|
|
--color-surface-alt: #f0eeea;
|
|
|
|
--color-text: #1a1a1a;
|
|
--color-text-secondary: #5a5a5a;
|
|
--color-text-muted: #8a8a8a;
|
|
|
|
/* Akzentfarben — gedeckt, natürlich */
|
|
--color-fjord: #4a7c8a; /* Petrol/Fjord-Blau */
|
|
--color-fjord-light: #dae8ec;
|
|
--color-moss: #5a8a5e; /* Moos-Grün */
|
|
--color-moss-light: #dceadd;
|
|
--color-sand: #c4a35a; /* Sandstein */
|
|
--color-sand-light: #f2eacc;
|
|
--color-coral: #c07a6b; /* Gedecktes Korall */
|
|
--color-coral-light: #f2ddd8;
|
|
--color-slate: #6a6a7a; /* Schiefer */
|
|
--color-slate-light: #e2e2e8;
|
|
|
|
/* Klassen-Farben */
|
|
--color-k1: #4a7c8a; /* 1. Klasse: Fjord */
|
|
--color-k2: #5a8a5e; /* 2. Klasse: Moos */
|
|
--color-k3: #c4a35a; /* 3. Klasse: Sand */
|
|
--color-k4: #c07a6b; /* 4. Klasse: Korall */
|
|
|
|
/* Feedback */
|
|
--color-success: #5a8a5e;
|
|
--color-warning: #c4a35a;
|
|
--color-error: #b55a4a;
|
|
--color-info: #4a7c8a;
|
|
|
|
/* --- Typografie --- */
|
|
--font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
--font-size-xs: 0.75rem;
|
|
--font-size-sm: 0.85rem;
|
|
--font-size-base: 0.95rem;
|
|
--font-size-md: 1.1rem;
|
|
--font-size-lg: 1.4rem;
|
|
--font-size-xl: 2rem;
|
|
--font-size-xxl: 3rem;
|
|
|
|
--font-weight-normal: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-bold: 600;
|
|
--font-weight-black: 800;
|
|
|
|
--line-height: 1.65;
|
|
--letter-spacing: -0.01em;
|
|
|
|
/* --- Spacing --- */
|
|
--space-xs: 0.25rem;
|
|
--space-sm: 0.5rem;
|
|
--space-md: 1rem;
|
|
--space-lg: 1.5rem;
|
|
--space-xl: 2.5rem;
|
|
--space-xxl: 4rem;
|
|
|
|
/* --- Radien --- */
|
|
--radius-sm: 6px;
|
|
--radius-md: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-full: 999px;
|
|
|
|
/* --- Schatten --- */
|
|
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
|
|
--shadow-md: 0 4px 12px rgba(0,0,0,0.06);
|
|
--shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
|
|
--shadow-card: 0 2px 8px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
|
|
|
|
/* --- Animation --- */
|
|
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 300ms;
|
|
--duration-slow: 600ms;
|
|
--duration-scenic: 20s; /* Für Deko-Animationen */
|
|
|
|
/* --- Layout --- */
|
|
--max-width: 1140px;
|
|
--nav-height: 60px;
|
|
}
|