init: Shared Branding-Tokens, Logo-Assets und Schriftart

Single Source of Truth für alle Hammerpreis-Projekte:
- tokens.css: CSS Custom Properties (Farben, Spacing, Radien, Schatten, Typo)
- base.css: Google Fonts Import (Jost + JetBrains Mono)
- Logo-SVGs: Symbol, Vollversion, Favicon, OG-Image

Made-with: Cursor

README.md

@@ -0,0 +1,47 @@
+# Hammerpreis Branding
+
+Shared Design-Tokens und Logo-Assets für alle Hammerpreis-Projekte.
+
+## Einbindung als Git-Submodul
+
+```bash
+git submodule add https://git.michael-hermann.de/michaelhermannadmin/branding_hammerpreis.git branding
+```
+
+### CSS importieren
+
+```css
+@import '../branding/base.css';   /* Font-Import (Jost + JetBrains Mono) */
+@import '../branding/tokens.css'; /* Alle CSS Custom Properties */
+```
+
+## Farbpalette
+
+| Rolle | Variable | Hex |
+|---|---|---|
+| **Primary** | `--color-primary` | `#071635` |
+| Primary Light | `--color-primary-light` | `#1B2A49` |
+| Primary Dark | `--color-primary-dark` | `#040d20` |
+| **Accent** | `--color-accent` | `#FF6B35` |
+| Accent Light | `--color-accent-light` | `#ff8a5c` |
+| Accent Dark | `--color-accent-dark` | `#e55a24` |
+| **Kunde** | `--color-customer` | `#4DBEEE` |
+| **Handwerker** | `--color-craftsman` | `#6B7FA9` |
+
+## Schriftart
+
+**Jost** (Google Fonts) -- importiert via `base.css`.
+
+## Logo-Assets
+
+| Datei | Verwendung |
+|---|---|
+| `logo-symbol.svg` | 3-Hausdach-Symbol, fuer Header und kleine Kontexte |
+| `logo-full.svg` | Vollstaendiges Logo mit Schriftzug (weiss auf dunkel) |
+| `favicon.svg` | 32x32 Favicon |
+| `og-image.svg` | 1200x630 Open-Graph-Bild |
+
+## Branding aktualisieren
+
+1. Aenderungen hier committen und pushen
+2. In jedem UI-Repo: `git submodule update --remote branding && git add branding && git commit -m "chore: branding update" && git push`

base.css

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=JetBrains+Mono:wght@400;500&display=swap');

favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+  <rect width="32" height="32" rx="6" fill="#071635"/>
+  <path d="M21.3 27V8.5L16 4L10.7 8.5V27H21.3Z" fill="#4DBEEE"/>
+  <path d="M10.7 27V8.5L5.3 4L0 8.5V27H10.7Z" transform="translate(3.5, 0)" fill="#FF6B35"/>
+  <path d="M10.7 27V8.5L5.3 4L0 8.5V27H10.7Z" transform="translate(17.8, 0)" fill="#6B7FA9"/>
+</svg>

logo-symbol.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 220" fill="none">
+  <path d="M239.745 219.62V56.69L179.805 9.8L119.875 56.69V219.62H239.745Z" fill="#4DBEEE"/>
+  <path d="M119.88 219.62V56.69L59.94 9.8L0 56.69V219.62H119.88Z" fill="#FF6B35"/>
+  <path d="M359.62 219.62V56.69L299.69 9.8L239.75 56.69V219.62H359.62Z" fill="#6B7FA9"/>
+  <path d="M296.19 159.84L241.23 57.86C240.64 56.31 238.86 56.31 238.27 57.86L183.31 159.84C182.79 161.19 183.59 162.75 184.79 162.75H235.05V182.29C231.03 184.53 228.23 189.55 228.23 195.39V219.62H251.28V195.39C251.28 189.55 248.48 184.54 244.46 182.29V162.75H294.72C295.92 162.75 296.71 161.19 296.2 159.84Z" fill="#fff"/>
+  <path d="M165.06 47.58H145.18C143.53 47.58 142.19 49.25 142.19 51.3V56.08H119.97C90.51 56.08 66.22 83.01 62.82 117.74C62.57 120.3 65.14 121.67 66.48 119.71C78.5 102.23 93.05 92.84 108.1 89.46V219.62H131.31V87.97H142.19V93.16C142.19 95.21 143.53 96.88 145.18 96.88H165.06C166.71 96.88 168.05 95.21 168.05 93.16V51.31C168.05 49.26 166.71 47.59 165.06 47.59Z" fill="#fff"/>
+  <path d="M37.84 199.02V137.28C37.84 136.81 37.98 136.35 38.25 135.96L46.98 123.14C47.46 122.44 47.66 121.58 47.55 120.73L41.72 76.1C41.62 75.37 41 74.83 40.27 74.83H24.61C23.87 74.83 23.25 75.38 23.16 76.1L17.32 120.79C17.21 121.59 17.41 122.41 17.87 123.08L26.63 135.95C26.89 136.34 27.04 136.8 27.04 137.27V199.01C22.4 201.59 19.17 207.37 19.17 214.11V219.62H45.73V214.11C45.73 207.38 42.49 201.59 37.86 199.01Z" fill="#fff"/>
+  <path d="M348.12 74.83C348.61 74.83 348.99 75.27 348.92 75.75L342.28 122.02C341.85 125.1 339.7 127.35 337.19 127.35H337.02C336.98 131.43 335.49 134.72 333.67 134.72H330.46C329.74 134.72 329.15 135.45 329.15 136.35V219.62H318.34V136.35C318.34 135.45 317.76 134.72 317.03 134.72H313.82C311.99 134.72 310.51 131.44 310.47 127.35H310.3C307.79 127.35 305.64 125.1 305.21 122.02L298.64 75.74C298.57 75.25 298.95 74.82 299.44 74.82H329.68V80.23L332.44 74.82H337.87V84.09L342.57 74.82H348.11Z" fill="#fff"/>
+</svg>

og-image.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" fill="none">
+  <!-- Background -->
+  <rect width="1200" height="630" fill="#071635"/>
+  <rect width="1200" height="630" fill="url(#grad)" opacity="0.6"/>
+  <defs>
+    <linearGradient id="grad" x1="0" y1="0" x2="1200" y2="630">
+      <stop offset="0%" stop-color="#071635"/>
+      <stop offset="100%" stop-color="#0d1f3d"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Logo: 3 house/roof shapes (Font: Jost from Google Fonts - not embeddable in SVG) -->
+  <g transform="translate(480,100) scale(3.5)">
+    <path d="M21.3 27V8.5L16 4L10.7 8.5V27H21.3Z" fill="#4DBEEE"/>
+    <path d="M10.7 27V8.5L5.3 4L0 8.5V27H10.7Z" transform="translate(3.5, 0)" fill="#FF6B35"/>
+    <path d="M10.7 27V8.5L5.3 4L0 8.5V27H10.7Z" transform="translate(17.8, 0)" fill="#6B7FA9"/>
+  </g>
+
+  <!-- Text (Font: Jost - add via CSS @import when used in HTML context) -->
+  <text x="600" y="380" text-anchor="middle" font-family="Jost, system-ui, -apple-system, sans-serif" font-size="64" font-weight="800" fill="#ffffff">Hammerpreis</text>
+  <text x="600" y="430" text-anchor="middle" font-family="Jost, system-ui, -apple-system, sans-serif" font-size="24" font-weight="400" fill="rgba(255,255,255,0.7)">KI-gest<73>tzte Angebotserstellung f<>r Bauprojekte</text>
+
+  <!-- Bottom accent -->
+  <rect y="610" width="1200" height="20" fill="#FF6B35"/>
+</svg>

tokens.css

@@ -0,0 +1,75 @@
+:root {
+  /* Brand Colors */
+  --color-primary: #071635;
+  --color-primary-light: #1B2A49;
+  --color-primary-dark: #040d20;
+
+  --color-accent: #FF6B35;
+  --color-accent-light: #ff8a5c;
+  --color-accent-dark: #e55a24;
+
+  /* Semantic Colors */
+  --color-success: #059669;
+  --color-success-light: #10b981;
+  --color-warning: #d97706;
+  --color-warning-light: #f59e0b;
+  --color-error: #dc2626;
+  --color-error-light: #ef4444;
+
+  /* Surface Colors */
+  --color-bg: #f8fafc;
+  --color-bg-elevated: #ffffff;
+  --color-bg-muted: #f1f5f9;
+  --color-border: #e2e8f0;
+  --color-border-light: #f1f5f9;
+
+  /* Text Colors */
+  --color-text: #1e293b;
+  --color-text-secondary: #64748b;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #ffffff;
+
+  /* Role Colors */
+  --color-customer: #4DBEEE;
+  --color-customer-light: #7dd1f3;
+  --color-craftsman: #6B7FA9;
+  --color-craftsman-light: #8e9ec0;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-full: 9999px;
+
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 250ms ease;
+  --transition-slow: 350ms ease;
+
+  /* Typography */
+  --font-sans: 'Jost', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+}