/* ==========================================================================
tokens.css — Zentrales Design-System (Single Source of Truth)
--------------------------------------------------------------------------
Phase 1 des Startseiten-/Site-Refactors. REINE ERGAENZUNG:
Es werden nur NEUE, kanonische Token-Namen definiert. Bestehende Variablen
(--site-*, --accent, --green, --radius ...) bleiben unberuehrt, damit
nichts bricht. Neue/refaktorierte Styles nutzen ab jetzt diese Tokens;
die Alt-Variablen werden in spaeteren Phasen schrittweise migriert.
Werte sind aus dem Ist-Zustand abgeleitet (site.css / index.css), damit
diese Datei allein KEINE sichtbare Aenderung verursacht.
Migrationskarte (alt -> kanonisch):
--site-green (#087a55) -> --color-primary
--site-green-bright (#18c787) -> --color-primary-bright
--site-green-soft (#e4f7ef) -> --color-primary-soft
--site-navy (#13231e) -> --color-navy
--site-ink (#101820) -> --color-text
--site-muted (#64706a) -> --color-text-muted
--site-surface (#fff) -> --color-surface
--site-bg (#f3f6f4) -> --color-bg
--site-line (#dce4df) -> --color-border
--site-radius (20px) -> --radius-lg
--red (#dc2626) -> --color-danger
HINWEIS Marken-Gruen: Es existieren aktuell drei Gruentoene (#087a55 tief,
#0f9f6e mittel, #18c787 hell). Kanonisch = #087a55 (entspricht der
). Die Vereinheitlichung erfolgt bewusst erst in
einer spaeteren Phase mit Vorher/Nachher-Kontrolle.
========================================================================== */
:root {
/* --- Farben: Marke ---------------------------------------------------- */
--color-primary: #087a55; /* LagerAlarm-Gruen (Marke, theme-color) */
--color-primary-strong: #066345; /* Hover/aktiv, dunkler */
--color-primary-bright: #18c787; /* heller Akzent (Highlights, Grafik) */
--color-primary-soft: #e4f7ef; /* Flaeche/Chip-Hintergrund */
--color-primary-contrast:#ffffff;/* Text auf Primaerflaeche */
/* --- Farben: Dunkel/Neutral ------------------------------------------ */
--color-navy: #13231e; /* tiefes Anthrazit-Gruen (dunkle CTA) */
--color-navy-strong: #0c1712;
--color-text: #101820; /* Haupttext */
--color-text-muted: #64706a; /* Sekundaertext/Metadaten */
--color-text-subtle: #8a938d; /* sehr dezent */
--color-surface: #ffffff; /* Karten/Container */
--color-surface-raised: #ffffff;
--color-bg: #f3f6f4; /* Seitenhintergrund (sehr helles Grau) */
--color-bg-subtle: #eef2f0;
--color-border: #dce4df; /* dezente Rahmen */
--color-border-strong: #c4cfc9;
/* --- Farben: Status (immer mit Text/Icon kombinieren, nie nur Farbe) -- */
--color-success: #087a55; /* Verfuegbar */
--color-success-soft: #e4f7ef;
--color-warning: #b26a08; /* Begrenzt verfuegbar (echtes Orange) */
--color-warning-soft: #fbefd9;
--color-neutral: #64706a; /* Ausverkauft (neutrales Grau) */
--color-neutral-soft: #eef1ef;
--color-danger: #dc2626; /* Fehler/nicht pruefbar (sparsam) */
--color-danger-soft: #fee2e2;
--color-info: #0f6f9f; /* neutrale Hinweise */
--color-info-soft: #e3f1f8;
/* --- EU-Energieklassen (nur für belegte Daten + sichtbaren Text) ----- */
--energy-class-a: #168443;
--energy-class-b: #4e9d3a;
--energy-class-c: #a4b82f;
--energy-class-d: #e3b621;
--energy-class-e: #dc8522;
--energy-class-f: #cf4e2a;
--energy-class-g: #b52f31;
/* --- Radien ----------------------------------------------------------- */
--radius-sm: 12px; /* Buttons, Filter-Chips */
--radius-md: 16px; /* Karten */
--radius-lg: 20px; /* grosse Container */
--radius-xl: 24px; /* Hero/Panels */
--radius-pill: 999px; /* Badges */
/* Verschachtelter Radius: innen = aussen minus Innenabstand (16 - 3).
Ohne diese Korrektur wirkt ein 16px-Radius auf einem 32px hohen Element
wie eine Pille (Radius = halbe Hoehe), obwohl der Token stimmt.
REGEL: Radius nie groesser als die halbe Elementhoehe. */
--radius-nested: 13px;
/* Radius-Staffel nach Elementhoehe (ca. 36 % der Hoehe), damit nichts
unbeabsichtigt zur Pille wird:
>= 44px Hoehe -> --radius-md (16px) Karten, Buttons, Felder
32-40px -> --radius-nested (13px) Chips, Segmente, kleine Buttons
< 32px -> --radius-xs (10px) Badges, Status, Zaehler */
--radius-xs: 10px;
/* --- Schatten (weich, dezent) ---------------------------------------- */
--shadow-sm: 0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.05);
--shadow-md: 0 8px 24px rgba(16,24,32,.08);
--shadow-lg: 0 20px 60px rgba(16,24,32,.09);
/* --- Abstaende (4px-Raster) ------------------------------------------ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 48px;
--space-10: 64px;
/* --- Typografie ------------------------------------------------------- */
/* Marken-Schrift Manrope (Variable Font). In PRODUKTION selbst-hosten:
frontend/static/fonts/manrope-var.woff2 via @font-face + font-display:swap
+ im . KEIN Google-Fonts-CDN (DSGVO/CSP/CWV).
Fallback bis geladen: Inter/System. */
--font-sans: "Manrope", "Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
--font-numeric: "tnum" 1, "lnum" 1; /* tabellarische Ziffern fuer Preise */
--weight-heading: 750; /* Ueberschriften (Manrope Variable), tracking -.035em */
/* Kleinskala px-genau: die Seite nutzte 154 verschiedene Groessen,
davon ~120 zwischen 10,4 und 14,4px. Fuenf Stufen decken das ab.
--text-xs/--text-sm bleiben als Alias erhalten (components.css). */
--text-11: 0.6875rem; /* 11px Mikro-Labels, Zaehler */
--text-12: 0.75rem; /* 12px Metadaten (nicht kleiner) */
--text-13: 0.8125rem; /* 13px Sekundaertext, Chips */
--text-14: 0.875rem; /* 14px Fliesstext klein, Buttons */
--text-15: 0.9375rem; /* 15px Fliesstext */
--text-xs: var(--text-12);
--text-sm: var(--text-14);
--text-base: 1rem; /* 16px Fliesstext */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.75rem; /* 28px H2 */
--text-3xl: 2.5rem; /* 40px H1 */
--text-4xl: 3.25rem; /* 52px Hero-H1 */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.55;
--leading-relaxed: 1.7;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* --- Layout ----------------------------------------------------------- */
--content-max: 1520px; /* max. Inhaltsbreite Desktop */
--content-gutter: clamp(16px, 4vw, 40px);
--header-height: 64px;
/* --- Bedienelement-Hoehen (Touch-Ziel >= 44px) ----------------------- */
--control-height: 44px;
--control-height-sm: 36px;
--control-height-lg: 52px;
/* --- Uebergaenge ------------------------------------------------------ */
--transition-fast: 120ms ease;
--transition-base: 200ms ease;
--transition-slow: 320ms ease;
/* --- z-index-Stufen --------------------------------------------------- */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-drawer: 400;
--z-modal: 600;
--z-toast: 800;
}
/*
Breakpoints (Media Queries koennen keine CSS-Variablen nutzen — hier als
verbindliche Referenz fuer alle neuen/refaktorierten Styles):
sm >= 641px (ab Tablet hochkant)
md >= 769px (Tablet quer)
lg >= 1025px (Desktop)
xl >= 1281px (grosser Desktop)
*/
@media (prefers-reduced-motion: reduce) {
:root {
--transition-fast: 0ms;
--transition-base: 0ms;
--transition-slow: 0ms;
}
}