/* === Rumler GmbH – Design Tokens === */
:root {
    /* ── Farben ── */
    --color-blue:       #102C72;
    --color-orange:     #FF6A00;
    --color-dark:       #15141C;
    --color-bg:         #F9F9F9;
    --color-white:      #ffffff;
    --color-gray-100:   #f3f4f6;
    --color-gray-200:   #e5e7eb;
    --color-gray-400:   #9ca3af;
    --color-gray-600:   #4b5563;

    /* ── Schriften (per CLAUDE.md) ──
       Lato          → H1, Toolbar, große Zahlen / Display
       Space Grotesk → H2, H3, Fließtext
       Inter         → Navigation, Labels
    ── */
    --font-display: 'Lato', sans-serif;          /* H1, Hero-Titel, große Zahlen */
    --font-heading: 'Space Grotesk', sans-serif; /* H2, H3, Section-Headlines */
    --font-body:    'Space Grotesk', sans-serif; /* Fließtext, Beschreibungen */
    --font-nav:     'Inter', sans-serif;         /* Navigation, Toolbar-Links */

    /* ── Type Scale ──
       Immer diese Werte verwenden – nie frei wählen.
    ── */
    --fs-hero:   clamp(2.25rem, 4vw, 3.75rem);  /* 60px – H1 Hero */
    --fs-h2:     clamp(1.75rem, 2.5vw, 2.5rem); /* 40px – Sektions-Überschriften */
    --fs-h3:     clamp(1.25rem, 2vw, 1.625rem); /* 26px – Karten-Titel, Sub-Headlines */
    --fs-h4:     1.125rem;                       /* 18px – Kleine Headlines */
    --fs-body:   1rem;                           /* 16px – Normaler Fließtext */
    --fs-small:  0.875rem;                       /* 14px – Sekundärer Text */
    --fs-xs:     0.75rem;                        /* 12px – Labels, Kicker */

    /* ── Abstände ── */
    --max-width:  1600px;
    --px:         clamp(1rem, 2.5vw, 2.5rem);

    /* ── Übergänge ── */
    --transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

    /* ── Schatten ── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
}