*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Farben */
    --color-background-primary: #f7f7f7;
    --color-background-secondary: #fbfbfb;
    --color-text: #111111;
    --color-primary: #0055ff;
    --color-secondary: #ff5500;
    --color-accent: rgb(0, 126, 135);
    --color-border: #dcdcdc;
  
    /* Abstände */
    --spacing-xs: 0.25rem;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 2rem;
    --spacing-xl: 4rem;
    --spacing-xxl: 6rem;
  
    /* Typografie */
    --font-family: 'Helvetica Neue', Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-s: 0.875rem;
    --font-size-l: 1.25rem;
    --font-size-xl: 2rem;
  
    /* Container */
    --container-width: 1200px;
  
    /* Animationen */
    --transition-speed: 0.3s;

    /* Breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
  }

body, html{
    font-family: Helvetica, sans-serif;
}

body{
    width: 100%;
    max-width: 1480px;
    margin: auto;
    background-color: var(--color-background-primary);
}

main{
    padding: var(--spacing-l) var(--spacing-xl);
}

@media (max-width: 768px) {

    main {
        padding: var(--spacing-m);
    }
}