/* ============================================================ StickTo Design Tokens ============================================================ Single Source of Truth fuer Colors, Typografie, Spacing, Border-Radius, Shadows, Animation auf der StickTo-Website. Eingefuehrt Mai 2026 als Loesung fuer: - 24+ unterschiedliche font-size-Werte in main.css - 85x hardcoded #99cc33 + 108x #fff/#ffffff (Drift) - h1-h6 alle auf font-size:40px + weight:400 (Bug-Magnet) - .btn 4px vs moderne 8-12px Radius - 22x !important (sollten reduziert werden) Regel: NEUE Sektionen MUESSEN var(--token) verwenden, nicht hardcodete Werte. Bestehende Stellen werden in der Migration Schritt fuer Schritt umgestellt. Reihenfolge im HTML : 1. variables.css <-- diese Datei zuerst 2. bootstrap.min.css 3. animate.css / weitere Plugins 4. main.css 5. responsive.css Skill-Doc: stickto-design Abschnitt 2.x (TBD) Trello: https://trello.com/c/ppb0kdWQ ============================================================ */ :root { /* ======================================================== COLORS ======================================================== */ /* Primary -- StickTo-Gruen (Brand) */ --color-primary: #99cc33; --color-primary-dark: #7a9c30; /* Hover, active states */ --color-primary-soft: rgba(153, 204, 51, 0.1); /* Dark -- einziger dunkler Brand-Ton (Visitenkarten-Dark) */ --color-dark: #1f2730; /* Accent -- Koralle fuer sekundaere CTAs / Highlights */ --color-accent: #ff704f; /* Info -- Blau fuer Links / Hinweise */ --color-info: #3c9cfd; /* Neutrals */ --color-white: #ffffff; --color-surface: #f8f9fa; /* Sektion-Hintergruende, alternate rows */ --color-surface-alt: #f9f9f9; /* Text-Farben */ --color-text: #6b7280; /* Default Body (WCAG AA 4.83:1 auf weiss) */ --color-text-strong: #1f2730; /* Headings, betonter Text */ --color-text-muted: #666666; /* Sekundaere Labels */ /* Borders & Divider */ --color-border: #dddddd; --color-border-light: #eeeeee; /* Shadows (RGBA werden in den --shadow-* Tokens unten verwendet) */ --color-shadow-soft: rgba(96, 94, 94, 0.17); /* Button drop-shadows, 13x im Bestand */ --color-shadow-card: rgba(0, 0, 0, 0.08); --color-shadow-strong: rgba(31, 39, 48, 0.18); /* ======================================================== TYPOGRAFIE -- Type Scale (8 Stufen + 1 fuer Mega-Hero) ======================================================== */ /* Font Family */ --font-family-base: 'Poppins', sans-serif; /* Type Scale -- Werte nah am Ist-Stand, Drift reduziert. Mapping aus Audit: - text-xs: alte 10/12/13 -> 12 - text-sm: alte 14/15 -> 14 - text-base: alte 16/17 -> 16 - text-lg: alte 18/19/20 -> 18 - text-xl: alte 22/24/25 -> 24 - text-2xl: alte 28/30 -> 28 (User-Bestand 28 dominant) - text-3xl: alte 32/34/35/36 -> 35 (Section-Title, sehr haeufig) - text-4xl: alte 40/42 -> 40 (Hero h1, sehr haeufig) - text-5xl: alte 50/52/60 -> 50 (Special: Blog-Hero) */ --text-xs: 12px; /* Caption, Meta */ --text-sm: 14px; /* Buttons, Small Labels */ --text-base: 16px; /* Default Body */ --text-lg: 18px; /* Lead Paragraph */ --text-xl: 24px; /* Card-Title (h4) */ --text-2xl: 28px; /* Subhead (h3) */ --text-3xl: 35px; /* Section-Title (h2) */ --text-4xl: 40px; /* Hero-Title (h1) */ --text-5xl: 50px; /* Mega-Hero (Blog-Hero, Spezialfaelle) */ /* Line Heights */ --leading-tight: 1.2; /* Headlines */ --leading-snug: 1.35; /* Subtitles, Card-Titles */ --leading-base: 1.5; /* Body */ --leading-relaxed: 1.75; /* Long-form copy */ /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ======================================================== BORDER-RADIUS ======================================================== */ /* Mapping aus Audit: - 4px (Legacy-Buttons) -> radius-sm (8px, modernisiert) - 8-12px -> radius-button (12px, User-Wunsch fuer Buttons) - 16px -> radius-md - 20px -> radius-lg (Standard-Card) - 24px -> radius-xl (Premium-Card, Video-Frame) - 30px -> radius-pill (Subtitle-Buttons) - 50% -> radius-circle (Avatars, Icon-Bubbles) */ --radius-sm: 8px; --radius-button: 12px; /* Standard fuer alle Buttons (User-Wunsch) */ --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 30px; --radius-full: 9999px; --radius-circle: 50%; /* ======================================================== SHADOWS ======================================================== */ --shadow-sm: 0 2px 4px var(--color-shadow-soft); --shadow-md: 0 4px 12px var(--color-shadow-card); --shadow-lg: 0 8px 25px var(--color-shadow-card); --shadow-xl: 0 20px 28px var(--color-shadow-strong); --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.08); /* ======================================================== MOTION / ANIMATION ======================================================== */ --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 500ms; /* Custom Easing-Kurven (Emil-Pattern). Built-in Easings sind zu schwach. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* ======================================================== LAYOUT-CONSTANTS ======================================================== */ --container-max: 1200px; --container-narrow: 800px; } /* ============================================================ Sinnvolle Defaults fuer Heading-Hierarchie ------------------------------------------------------------ ALT: h1, h2, h3, h4, h5, h6 { font-size: 40px; font-weight: 400; } -- alle Headings gleich, weight zu leicht. Jede Klasse musste font-size + weight selbst setzen -> 24+ Drift-Werte. NEU: Jeder Heading-Level hat sinnvollen Default, der mit --text-* + --weight-* Tokens arbeitet. Bestehende Klassen-Overrides bleiben gueltig (Specificity-Sieg). ============================================================ */ h1 { font-family: var(--font-family-base); font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-strong); } h2 { font-family: var(--font-family-base); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); color: var(--color-text-strong); } h3 { font-family: var(--font-family-base); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text-strong); } h4 { font-family: var(--font-family-base); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text-strong); } h5 { font-family: var(--font-family-base); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text-strong); } h6 { font-family: var(--font-family-base); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text-strong); }