/* CSS Variables für innobu.com/de */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* Typography */
    --font-primary: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    /* Farben — Semantische Hierarchie */
    --color-primary: #40c0f0;
    --color-secondary: #00b2a9;
    --accent-primary: #40c0f0;      /* Überschriften, aktive Zustände, Kennzahlen */
    --accent-secondary: #00b2a9;    /* Hover-Zustände, sekundäre Buttons, unterstützende Elemente */
    --accent-primary-glow: rgba(64, 192, 240, 0.3);
    --accent-secondary-glow: rgba(0, 178, 169, 0.2);
    
    /* Textfarben */
    --color-text: #ffffff;
    --color-text-light: #cccccc;
    --color-text-muted: #a0c0e0;
    --color-text-highlight: #89cff0;
    
    /* Hintergrundfarben */
    --bg-dark: #0a1625;
    --bg-medium: #1a2844;
    --bg-light: #0d1b2a;
    
    /* Gradienten */
    --gradient-body: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-medium) 50%, var(--bg-light) 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 40, 68, 0.8) 0%, rgba(13, 27, 42, 0.9) 100%);
    --gradient-header: linear-gradient(135deg, rgba(26, 40, 68, 0.9), rgba(13, 27, 42, 0.9));
    --gradient-button: linear-gradient(135deg, var(--color-secondary), #0291BA);
    
    /* Schatten */
    --shadow-small: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.4);
    --shadow-large: 0 15px 50px rgba(0, 0, 0, 0.4);
    --shadow-glow-primary: 0 0 20px rgba(64, 192, 240, 0.3);
    --shadow-glow-secondary: 0 0 20px rgba(0, 178, 169, 0.3);
    
    /* Abstände */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    
    /* Border-Radius */
    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 20px;
    
    /* Schriftgrößen */
    --font-size-xs: 0.85rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.1rem;
    --font-size-lg: 1.3rem;
    --font-size-xl: 1.4rem;
    --font-size-2xl: 1.8rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3.5rem;
    
    /* Container-Breiten */
    --container-width: 1400px;
    --article-container-width: 1200px;
}

/* WCAG 2.1 SC 2.3.3 — respect user's motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}