/* Clever Laden V8 Typography aus Figma
 * 
 * Diese Fonts sind ursprünglich für Mobile Apps (clever-laden/clever-tanken) konzipiert.
 * Werte wurden für Web angepasst (px → rem, 16px = 1rem Basis)
 * DSGVO-konforme lokale Font-Integration
 */

/*
|Name|Font Family|Font Weight|Font Style|Font Size (Mobile)| Beschreibung|
|----|-----------|-----------|-----------|------------------|------------|
|Headline 1|Roboto|Light|-|72px|used for big max. 3 Digit Numbers like Payment/Station Selection|
|Headline 2|Roboto|Light|-|36px|used for numbers displayed in cards|
|Headline 3|Roboto|Black|-|32px|used for Prices|
|Headline 4|Roboto|Light|-|24px|used for titles on screens such as opt-in Views|
|Headline 5|Roboto|Bold|-|18px|Used for station-Titles and other titles within core application|
|Body      |Roboto|Light|-|14px|Default Font Size|
|Subtitle 1|Roboto|Light|-|12px|used for Address in List View and other comparable Usecases|
|Subtitle 2|Roboto|Light|-|9px|used for the timestamp|
|Button    |Roboto|Bold|-|18px|Default Button|
|Link 1|Roboto|Light|-|21px|Used for bigger borderless Buttons, ex. "Zahlungsmittel hinzufügen"|
|Link 2|Roboto|Light|-|14px|Used for smaller borderless Buttons, ex "Als Standard festlegen"|
*/

/* ============================================
   Roboto Fonts - Lokal gehostet (DSGVO-konform)
   ============================================ */

/* Roboto Light (300) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/roboto/roboto-light.woff2') format('woff2');
}

/* Roboto Regular (400) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/roboto/roboto-regular.woff2') format('woff2');
}

/* Roboto Bold (700) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../assets/fonts/roboto/roboto-bold.woff2') format('woff2');
}

/* Roboto Black (900) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../assets/fonts/roboto/roboto-black.woff2') format('woff2');
}

/* ============================================
   Font Awesome 6 Pro - Lokal gehostet (DSGVO-konform)
   ============================================ */

/* Font Awesome 6 Pro Light (300) */
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../assets/fonts/fontawesome/fa-light-300.woff2') format('woff2');
}

/* Font Awesome 6 Pro Regular (400) */
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/fontawesome/fa-regular-400.woff2') format('woff2');
}

/* Font Awesome 6 Pro Solid (900) */
@font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../assets/fonts/fontawesome/fa-solid-900.woff2') format('woff2');
}

/* Font Awesome 6 Brands Regular (400) */
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../assets/fonts/fontawesome/fa-brands-400.woff2') format('woff2');
}

/* Font Weights:
 * Light:   300
 * Regular: 400
 * Bold:    700
 * Black:   900
 */

/* ============================================
   CSS Custom Properties - Clever Laden V8 Fonts
   ============================================ */

:root {
    /* ============================================
       FONT FAMILIES
       ============================================ */
    
    /* Primary Font Stack - Roboto (DSGVO-konform) */
    --cl-v8-font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Secondary Font Stack - Headings (Roboto) */
    --cl-v8-font-heading: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Monospace Font Stack */
    --cl-v8-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Icon Font Stacks - Font Awesome 6 Pro */
    --cl-v8-font-icon: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', sans-serif;
    --cl-v8-font-icon-brands: 'Font Awesome 6 Brands', 'Font Awesome 6 Free', sans-serif;
    
    /* ============================================
       FONT WEIGHTS
       ============================================ */
    
    --cl-v8-font-weight-light: 300;
    --cl-v8-font-weight-regular: 400;
    --cl-v8-font-weight-medium: 500;
    --cl-v8-font-weight-semibold: 600;
    --cl-v8-font-weight-bold: 700;
    --cl-v8-font-weight-extrabold: 800;
    
    /* ============================================
       FONT SIZES - Desktop First
       ============================================ */
    
    /* Display Sizes */
    --cl-v8-font-size-display-2xl: 4.5rem;    /* 72px - Hero Headlines */
    --cl-v8-font-size-display-xl: 3.75rem;    /* 60px - Large Headlines */
    --cl-v8-font-size-display-lg: 3rem;       /* 48px - Section Headlines */
    --cl-v8-font-size-display-md: 2.25rem;    /* 36px - Subsection Headlines */
    --cl-v8-font-size-display-sm: 1.875rem;   /* 30px - Card Headlines */
    
    /* Heading Sizes */
    --cl-v8-font-size-h1: 2.25rem;            /* 36px - H1 */
    --cl-v8-font-size-h2: 1.875rem;           /* 30px - H2 */
    --cl-v8-font-size-h3: 1.5rem;             /* 24px - H3 */
    --cl-v8-font-size-h4: 1.25rem;            /* 20px - H4 */
    --cl-v8-font-size-h5: 1.125rem;           /* 18px - H5 */
    --cl-v8-font-size-h6: 1rem;               /* 16px - H6 */
    
    /* Body Text Sizes */
    --cl-v8-font-size-xl: 1.25rem;            /* 20px - Large Body */
    --cl-v8-font-size-lg: 1.125rem;           /* 18px - Large Body */
    --cl-v8-font-size-base: 1rem;             /* 16px - Base Body (Figma MCP) */
    --cl-v8-font-size-sm: 0.875rem;           /* 14px - Small Body */
    --cl-v8-font-size-xs: 0.75rem;            /* 12px - Extra Small */
    
    /* ============================================
       LINE HEIGHTS
       ============================================ */
    
    --cl-v8-line-height-tight: 1.25;          /* Tight - Headlines */
    --cl-v8-line-height-snug: 1.375;          /* Snug - Subheadings */
    --cl-v8-line-height-normal: 1.5;          /* Normal - Body Text */
    --cl-v8-line-height-relaxed: 1.625;       /* Relaxed - Large Text */
    --cl-v8-line-height-loose: 2;             /* Loose - Long Form */
    
    /* ============================================
       LETTER SPACING
       ============================================ */
    
    --cl-v8-letter-spacing-tighter: -0.05em;
    --cl-v8-letter-spacing-tight: -0.025em;
    --cl-v8-letter-spacing-normal: 0em;
    --cl-v8-letter-spacing-wide: 0.025em;
    --cl-v8-letter-spacing-wider: 0.05em;
    --cl-v8-letter-spacing-widest: 0.1em;
    
    /* ============================================
       CLEVER LADEN V8 TYPOGRAPHY (aus Figma)
       ============================================ */
    
    /* CSS font shorthand: [weight] [size]/[line-height] [family] */
    
    /* Headline 1 - für große 3-stellige Zahlen (Payment/Station Selection) */
    /* Light 72px → 4.5rem */
    --cl-v8-h1: 300 4.5rem/1.2 var(--cl-v8-font-primary);
    
    /* Headline 2 - für Zahlen in Cards */
    /* Light 36px → 2.25rem */
    --cl-v8-h2: 300 2.25rem/1.2 var(--cl-v8-font-primary);
    
    /* Headline 3 - für Preise/kWh-Preise */
    /* Black 32px → 2rem */
    --cl-v8-h3: 900 2rem/1.2 var(--cl-v8-font-primary);
    
    /* Headline 4 - für Screen-Titel (Opt-In Views) */
    /* Light 24px → 1.5rem */
    --cl-v8-h4: 300 1.5rem/1.3 var(--cl-v8-font-primary);
    
    /* Headline 5 - für Ladesäulen-Titel */
    /* Bold 18px → 1.125rem */
    --cl-v8-h5: 700 1.125rem/1.4 var(--cl-v8-font-primary);
    
    /* Body - Standard Font */
    /* Light 16px → 1rem (Figma MCP: 16px) */
    --cl-v8-body: 300 1rem/1.5 var(--cl-v8-font-primary);
    
    /* Subtitle 1 - für Adressen in List View */
    /* Light 12px → 0.75rem */
    --cl-v8-subtitle1: 300 0.75rem/1.4 var(--cl-v8-font-primary);
    
    /* Subtitle 2 - für Zeitstempel */
    /* Light 9px → 0.5625rem */
    --cl-v8-subtitle2: 300 0.5625rem/1.4 var(--cl-v8-font-primary);
    
    /* Button - Standard Button */
    /* Bold 18px → 1.125rem, Line Height 1.1 (Figma MCP) */
    --cl-v8-button: 700 1.125rem/1.1 var(--cl-v8-font-primary);
    
    /* Link 1 - für größere borderless Buttons */
    /* Light 21px → 1.3125rem */
    --cl-v8-link1: 300 1.3125rem/1.4 var(--cl-v8-font-primary);
    
    /* Link 2 - für kleinere borderless Buttons */
    /* Light 14px → 0.875rem */
    --cl-v8-link2: 300 0.875rem/1.4 var(--cl-v8-font-primary);
    
    /* ============================================
       FIGMA MCP TYPOGRAPHY (Desktop - 5)
       ============================================ */
    
    /* Button Text - wie in Figma MCP (16px, Light, Line Height 1.1) */
    --cl-v8-button-text: 300 1rem/1.1 var(--cl-v8-font-primary);
    
    /* Search Placeholder - wie in Figma MCP (16px, Light) */
    --cl-v8-search-placeholder: 300 1rem/1.1 var(--cl-v8-font-primary);
    
    /* User Greeting - wie in Figma MCP (16px, Light, Line Height 1.1) */
    --cl-v8-user-greeting: 300 1rem/1.1 var(--cl-v8-font-primary);
    
    /* ============================================
       ADDITIONAL TYPOGRAPHY (Web-optimiert)
       ============================================ */
    
    /* Display Typography */
    --cl-v8-display-2xl: var(--cl-v8-font-weight-bold) var(--cl-v8-font-size-display-2xl)/var(--cl-v8-line-height-tight) var(--cl-v8-font-heading);
    --cl-v8-display-xl: var(--cl-v8-font-weight-bold) var(--cl-v8-font-size-display-xl)/var(--cl-v8-line-height-tight) var(--cl-v8-font-heading);
    --cl-v8-display-lg: var(--cl-v8-font-weight-bold) var(--cl-v8-font-size-display-lg)/var(--cl-v8-line-height-tight) var(--cl-v8-font-heading);
    --cl-v8-display-md: var(--cl-v8-font-weight-semibold) var(--cl-v8-font-size-display-md)/var(--cl-v8-line-height-snug) var(--cl-v8-font-heading);
    --cl-v8-display-sm: var(--cl-v8-font-weight-semibold) var(--cl-v8-font-size-display-sm)/var(--cl-v8-line-height-snug) var(--cl-v8-font-heading);
    
    /* Additional Heading Typography */
    --cl-v8-h6: var(--cl-v8-font-weight-medium) var(--cl-v8-font-size-h6)/var(--cl-v8-line-height-snug) var(--cl-v8-font-heading);
    
    /* Body Typography */
    --cl-v8-body-xl: var(--cl-v8-font-weight-regular) var(--cl-v8-font-size-xl)/var(--cl-v8-line-height-relaxed) var(--cl-v8-font-primary);
    --cl-v8-body-lg: var(--cl-v8-font-weight-regular) var(--cl-v8-font-size-lg)/var(--cl-v8-line-height-relaxed) var(--cl-v8-font-primary);
    --cl-v8-body-sm: var(--cl-v8-font-weight-regular) var(--cl-v8-font-size-sm)/var(--cl-v8-line-height-normal) var(--cl-v8-font-primary);
    --cl-v8-body-xs: var(--cl-v8-font-weight-regular) var(--cl-v8-font-size-xs)/var(--cl-v8-line-height-normal) var(--cl-v8-font-primary);
    
    /* Button Typography */
    --cl-v8-button-lg: var(--cl-v8-font-weight-semibold) var(--cl-v8-font-size-lg)/var(--cl-v8-line-height-tight) var(--cl-v8-font-primary);
    --cl-v8-button-sm: var(--cl-v8-font-weight-medium) var(--cl-v8-font-size-sm)/var(--cl-v8-line-height-tight) var(--cl-v8-font-primary);
    
    /* Caption Typography */
    --cl-v8-caption: var(--cl-v8-font-weight-regular) var(--cl-v8-font-size-xs)/var(--cl-v8-line-height-normal) var(--cl-v8-font-primary);
    --cl-v8-caption-bold: var(--cl-v8-font-weight-semibold) var(--cl-v8-font-size-xs)/var(--cl-v8-line-height-normal) var(--cl-v8-font-primary);
}

/* ============================================
   RESPONSIVE TYPOGRAPHY - Mobile First
   ============================================ */

@media (max-width: 768px) {
    :root {
        /* Mobile Font Sizes */
        --cl-v8-font-size-display-2xl: 2.5rem;    /* 40px */
        --cl-v8-font-size-display-xl: 2.25rem;    /* 36px */
        --cl-v8-font-size-display-lg: 2rem;       /* 32px */
        --cl-v8-font-size-display-md: 1.75rem;    /* 28px */
        --cl-v8-font-size-display-sm: 1.5rem;     /* 24px */
        
        --cl-v8-font-size-h1: 1.875rem;           /* 30px */
        --cl-v8-font-size-h2: 1.5rem;             /* 24px */
        --cl-v8-font-size-h3: 1.25rem;            /* 20px */
        --cl-v8-font-size-h4: 1.125rem;           /* 18px */
        --cl-v8-font-size-h5: 1rem;               /* 16px */
        --cl-v8-font-size-h6: 0.875rem;           /* 14px */
        
        --cl-v8-font-size-xl: 1.125rem;           /* 18px */
        --cl-v8-font-size-lg: 1rem;               /* 16px */
        --cl-v8-font-size-base: 0.875rem;         /* 14px */
        --cl-v8-font-size-sm: 0.75rem;            /* 12px */
        --cl-v8-font-size-xs: 0.6875rem;          /* 11px */
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Clever Laden V8 Typography Classes */
.cl-v8-h1 { font: var(--cl-v8-h1); }
.cl-v8-h2 { font: var(--cl-v8-h2); }
.cl-v8-h3 { font: var(--cl-v8-h3); }
.cl-v8-h4 { font: var(--cl-v8-h4); }
.cl-v8-h5 { font: var(--cl-v8-h5); }
.cl-v8-body { font: var(--cl-v8-body); }
.cl-v8-subtitle1 { font: var(--cl-v8-subtitle1); }
.cl-v8-subtitle2 { font: var(--cl-v8-subtitle2); }
.cl-v8-button { font: var(--cl-v8-button); }
.cl-v8-link1 { font: var(--cl-v8-link1); }
.cl-v8-link2 { font: var(--cl-v8-link2); }

/* Display Classes */
.cl-display-2xl { font: var(--cl-v8-display-2xl); }
.cl-display-xl { font: var(--cl-v8-display-xl); }
.cl-display-lg { font: var(--cl-v8-display-lg); }
.cl-display-md { font: var(--cl-v8-display-md); }
.cl-display-sm { font: var(--cl-v8-display-sm); }

/* Additional Heading Classes */
.cl-h1 { font: var(--cl-v8-h1); }
.cl-h2 { font: var(--cl-v8-h2); }
.cl-h3 { font: var(--cl-v8-h3); }
.cl-h4 { font: var(--cl-v8-h4); }
.cl-h5 { font: var(--cl-v8-h5); }
.cl-h6 { font: var(--cl-v8-h6); }

/* Body Classes */
.cl-body-xl { font: var(--cl-v8-body-xl); }
.cl-body-lg { font: var(--cl-v8-body-lg); }
.cl-body { font: var(--cl-v8-body); }
.cl-body-sm { font: var(--cl-v8-body-sm); }
.cl-body-xs { font: var(--cl-v8-body-xs); }

/* Button Classes */
.cl-button-lg { font: var(--cl-v8-button-lg); }
.cl-button { font: var(--cl-v8-button); }
.cl-button-sm { font: var(--cl-v8-button-sm); }

/* Caption Classes */
.cl-caption { font: var(--cl-v8-caption); }
.cl-caption-bold { font: var(--cl-v8-caption-bold); }

/* Weight Classes */
.cl-font-light { font-weight: var(--cl-v8-font-weight-light); }
.cl-font-regular { font-weight: var(--cl-v8-font-weight-regular); }
.cl-font-medium { font-weight: var(--cl-v8-font-weight-medium); }
.cl-font-semibold { font-weight: var(--cl-v8-font-weight-semibold); }
.cl-font-bold { font-weight: var(--cl-v8-font-weight-bold); }
.cl-font-extrabold { font-weight: var(--cl-v8-font-weight-extrabold); }

/* Size Classes */
.cl-text-2xl { font-size: var(--cl-v8-font-size-display-2xl); }
.cl-text-xl { font-size: var(--cl-v8-font-size-display-xl); }
.cl-text-lg { font-size: var(--cl-v8-font-size-display-lg); }
.cl-text-md { font-size: var(--cl-v8-font-size-display-md); }
.cl-text-sm { font-size: var(--cl-v8-font-size-display-sm); }
.cl-text-base { font-size: var(--cl-v8-font-size-base); }
.cl-text-xs { font-size: var(--cl-v8-font-size-xs); }

/* Line Height Classes */
.cl-leading-tight { line-height: var(--cl-v8-line-height-tight); }
.cl-leading-snug { line-height: var(--cl-v8-line-height-snug); }
.cl-leading-normal { line-height: var(--cl-v8-line-height-normal); }
.cl-leading-relaxed { line-height: var(--cl-v8-line-height-relaxed); }
.cl-leading-loose { line-height: var(--cl-v8-line-height-loose); }

/* Letter Spacing Classes */
.cl-tracking-tighter { letter-spacing: var(--cl-v8-letter-spacing-tighter); }
.cl-tracking-tight { letter-spacing: var(--cl-v8-letter-spacing-tight); }
.cl-tracking-normal { letter-spacing: var(--cl-v8-letter-spacing-normal); }
.cl-tracking-wide { letter-spacing: var(--cl-v8-letter-spacing-wide); }
.cl-tracking-wider { letter-spacing: var(--cl-v8-letter-spacing-wider); }
.cl-tracking-widest { letter-spacing: var(--cl-v8-letter-spacing-widest); }

/* ============================================
   COMPONENT-SPECIFIC TYPOGRAPHY
   ============================================ */

/* Header Typography */
.cl-header-logo {
    font: var(--cl-v8-display-lg);
    letter-spacing: var(--cl-v8-letter-spacing-wide);
}

.cl-header-nav {
    font: var(--cl-v8-button);
}

/* Button Typography */
.cl-btn-primary {
    font: var(--cl-v8-button);
}

.cl-btn-secondary {
    font: var(--cl-v8-button);
}

.cl-btn-sm {
    font: var(--cl-v8-button-sm);
}

.cl-btn-lg {
    font: var(--cl-v8-button-lg);
}

/* Card Typography */
.cl-card-title {
    font: var(--cl-v8-h4);
}

.cl-card-subtitle {
    font: var(--cl-v8-body-sm);
    color: var(--cl-v8-text-secondary);
}

.cl-card-body {
    font: var(--cl-v8-body);
}

/* Form Typography */
.cl-form-label {
    font: var(--cl-v8-button-sm);
    color: var(--cl-v8-text-primary);
}

.cl-form-input {
    font: var(--cl-v8-body);
}

.cl-form-help {
    font: var(--cl-v8-caption);
    color: var(--cl-v8-text-secondary);
}

.cl-form-error {
    font: var(--cl-v8-caption);
    color: var(--cl-v8-error);
}

/* Figma MCP Typography Classes */
.cl-button-text {
    font: var(--cl-v8-button-text);
}

.cl-search-placeholder {
    font: var(--cl-v8-search-placeholder);
}

.cl-user-greeting {
    font: var(--cl-v8-user-greeting);
}

/* ============================================
   FONT AWESOME 6 PRO UTILITY CLASSES
   ============================================ */

/* Icon Base Classes */
.cl-icon {
    font-family: var(--cl-v8-font-icon);
    font-weight: var(--cl-v8-font-weight-regular);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cl-icon-brands {
    font-family: var(--cl-v8-font-icon-brands);
    font-weight: var(--cl-v8-font-weight-regular);
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Icon Weights */
.cl-icon-light {
    font-weight: var(--cl-v8-font-weight-light);
}

.cl-icon-regular {
    font-weight: var(--cl-v8-font-weight-regular);
}

.cl-icon-solid {
    font-weight: var(--cl-v8-font-weight-extrabold);
}

/* Icon Sizes */
.cl-icon-xs {
    font-size: 0.75rem; /* 12px */
}

.cl-icon-sm {
    font-size: 0.875rem; /* 14px */
}

.cl-icon-base {
    font-size: 1rem; /* 16px */
}

.cl-icon-lg {
    font-size: 1.125rem; /* 18px */
}

.cl-icon-xl {
    font-size: 1.25rem; /* 20px */
}

.cl-icon-2xl {
    font-size: 1.5rem; /* 24px */
}

.cl-icon-3xl {
    font-size: 2rem; /* 32px */
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode typography adjustments can go here */
        /* Currently using same typography as light mode */
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    :root {
        /* Print-optimized font sizes */
        --cl-v8-font-size-display-2xl: 2rem;
        --cl-v8-font-size-display-xl: 1.75rem;
        --cl-v8-font-size-display-lg: 1.5rem;
        --cl-v8-font-size-h1: 1.5rem;
        --cl-v8-font-size-h2: 1.25rem;
        --cl-v8-font-size-h3: 1.125rem;
        --cl-v8-font-size-base: 0.875rem;
    }
}

/* ============================================
   FONT AWESOME VERWENDUNGSBEISPIELE
   ============================================ */

/*
=== Font Awesome 6 Pro Icons verwenden ===

1. Basis-Icon (Regular Weight):
<i class="cl-icon cl-icon-2xl">&#xf007;</i> <!-- User Icon -->

2. Light Weight Icon:
<i class="cl-icon cl-icon-light cl-icon-lg">&#xf007;</i> <!-- User Icon Light -->

3. Solid Weight Icon:
<i class="cl-icon cl-icon-solid cl-icon-xl">&#xf007;</i> <!-- User Icon Solid -->

4. Brand Icons (Social Media):
<i class="cl-icon-brands cl-icon-2xl">&#xf09a;</i> <!-- Facebook -->
<i class="cl-icon-brands cl-icon-2xl">&#xf16d;</i> <!-- Instagram -->

5. Kombination mit Text:
<button class="cl-btn-primary">
    <i class="cl-icon cl-icon-sm">&#xf007;</i>
    Benutzer
</button>

=== Icon-Größen ===
- cl-icon-xs: 12px
- cl-icon-sm: 14px  
- cl-icon-base: 16px
- cl-icon-lg: 18px
- cl-icon-xl: 20px
- cl-icon-2xl: 24px (Standard für Header)
- cl-icon-3xl: 32px

=== Icon-Gewichte ===
- cl-icon-light: 300 (Light)
- cl-icon-regular: 400 (Regular) - Standard
- cl-icon-solid: 900 (Solid)

=== Font-Dateien benötigt ===
client/assets/fonts/fontawesome/
├── fa-light-300.woff2
├── fa-regular-400.woff2
├── fa-solid-900.woff2
└── fa-brands-400.woff2

=== Figma MCP Typography verwenden ===

1. Button Text (16px, Light, Line Height 1.1):
<button class="cl-button-text">Button Text</button>

2. Search Placeholder (16px, Light, Line Height 1.1):
<input placeholder="PLZ und/oder Ort" class="cl-search-placeholder">

3. User Greeting (16px, Light, Line Height 1.1):
<p class="cl-user-greeting">Hallo Nutzer!</p>

=== Aktualisierte Typography ===
- Body Text: 14px → 16px (1rem)
- Button Line Height: 1.0 → 1.1
- Neue Figma MCP-spezifische Klassen hinzugefügt
*/