/**
 * leerraeume Webdesign - Design System
 * =====================================
 * "Wo Raum ist, entsteht Wirkung"
 * 
 * Dieses CSS definiert unser komplettes Design-System mit:
 * - CSS Custom Properties (Variablen) für Farben, Spacing etc.
 * - Automatischer Dark Mode Support
 * - Typografie-System mit großzügigen Leerräumen
 */

 /* ========================================
   REDUCED MOTION (Barrierefreiheit)
   ======================================== */

/* Nutzer mit Bewegungsempfindlichkeit: Alle Animationen aus */
@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;
    }
}

/* ========================================
   1. CSS RESET & BASE
   ======================================== */

/* Box-Sizing für alle Elemente auf border-box setzen
   Warum? Damit padding und border in die Breite eingerechnet werden */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Root-Font-Size für rem-Berechnungen 
   1rem = 16px (Browser-Standard) */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* Mobile & Tablet (unter 992px) */
@media (max-width: 991px) {
    html {
        scroll-padding-top: 330px;
    }
}

/* ========================================
   2. CSS VARIABLEN (Design Tokens)
   ======================================== */

:root {
    /* === FARBEN: Ruhrpott-Industrial === */
    
    /* Hauptfarben Light Mode */
    --color-primary: #502619;        /* Anthrazit - wie Stahlträger */
    /*--color-secondary: #E67E22;*/      /* Rost-Orange - Industriecharme */
    --color-secondary: #ad3815;      /* Rost-Orange - Industriecharme */
    --color-accent: #ECF0F1;         /* Beton-Grau */
    
    /* Textfarben Light Mode */
    --color-text: #2C3E50;           /* Dunkler Text auf hellem Grund */
    --color-text-secondary: #FFFFFF; /* Grau für weniger wichtige Texte */
    
    /* Hintergrundfarben Light Mode */
    --color-bg: #FFFFFF;             /* Haupthintergrund */
    --color-bg-secondary: #ecf3fa;   /* Alternative Sections */
    
    /* === TYPOGRAFIE === */
    
    /* Font-Familien 
       Space Grotesk = Modern, geometrisch für Headlines
       Inter = Sehr gut lesbar für Fließtext */
    --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Font-Größen (Modular Scale) */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    --font-size-4xl: 2.5rem;    /* 40px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 4rem;      /* 64px */
    
    /* Line-Heights (Zeilenhöhe) 
       WICHTIG: Großzügig für Lesbarkeit = "Leerräume" */
    --line-height-tight: 1.2;   /* Für Headlines */
    --line-height-normal: 1.6;  /* Für Text */
    --line-height-relaxed: 1.8; /* Extra luftig */
    
    /* Letter-Spacing (Buchstabenabstand)
       Auch hier: Leerräume schaffen! */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    
    /* === SPACING (Abstände) === 
       Konsistente Abstände nach 8px-Grid
       Warum? Harmonie und Vorhersagbarkeit */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 3rem;     /* 48px */
    --space-6: 4rem;     /* 64px */
    --space-7: 6rem;     /* 96px */
    --space-8: 8rem;     /* 128px */
    
    /* === LAYOUT === */
    --container-max-width: 1200px;
    --content-max-width: 65ch; /* Optimale Lesebreite */
    
    /* === BORDER & RADIUS === */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

/* ========================================
   3. DARK MODE (automatisch!)
   ======================================== */

/* Wird aktiviert, wenn User Dark Mode im System hat
   @media (prefers-color-scheme: dark) hört auf System-Einstellung */
@media (prefers-color-scheme: dark) {
    :root {
        /* Farben für Dark Mode überschreiben */
        --color-primary: #442509;        /* Hell wird zu Dunkel */
        --color-secondary: Orange;      /* Orange bleibt */
        --color-accent: LightGray;         /* Dunkler Akzent */
        
        --color-text: LightGrey;           /* Heller Text */
        --color-text-secondary: LightGrey; 
        
        --color-bg: #1a1a1a;             /* Fast-Schwarz Hintergrund */
        --color-bg-secondary: #1e262e;   
    }
}

/* ========================================
   4. BASE STYLES
   ======================================== */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    
    /* Schönere Font-Darstellung */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   5. TYPOGRAFIE
   ======================================== */

/* Alle Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-3);
}

h1 {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--space-4);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-3xl);
}

h4 {
    font-size: var(--font-size-2xl);
}

/* Fließtext */
p {
    margin-bottom: var(--space-3);
    max-width: var(--content-max-width); /* Nicht zu breit = besser lesbar */
}

/* Links */
a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

a:hover {
    opacity: 0.8;
}

/* Listen */
ul, ol {
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
}

li {
    margin-bottom: var(--space-1);
}

/* ========================================
   6. UTILITY CLASSES
   ======================================== */

/* Container für zentrierten Content */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* Section-Abstände (großzügig!) */
.section {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

/* Alternative Hintergrundfarbe für Sections */
.section-alt {
    background-color: var(--color-bg-secondary);
}

/* Text-Ausrichtung */
.text-center {
    text-align: center;
}

/* Visually Hidden (für Accessibility) 
   Element ist versteckt, aber für Screenreader sichtbar */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   7. RESPONSIVE (Mobile First!)
   ======================================== */

/* Tablet */
@media (max-width: 768px) {
    :root {
        /* Kleinere Schriften auf Mobile */
        --font-size-4xl: 2rem;    /* 32px statt 40px */
        --font-size-5xl: 2.5rem;  /* 40px statt 48px */
        --font-size-6xl: 3rem;    /* 48px statt 64px */
        
        /* Kleinere Abstände */
        --space-7: 4rem;  /* 64px statt 96px */
        --space-8: 6rem;  /* 96px statt 128px */
    }
    
    .container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --font-size-4xl: 1.75rem;
        --font-size-5xl: 2rem;
        --font-size-6xl: 2.5rem;
    }
}

/* ========================================
   SCHRITT 3: Morphing Background
   ======================================== */

.morph-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
}

.morph-background.active {
    opacity: 1;
}

.morph-background svg {
    width: 100%;
    height: 100%;
}