:root {
    /*COLOR*/
    --currant: #390400;
    --linen: #fffff4;
    --meadow: #6e782f;
    --breeze: #b7dbf1;
    --harbor: #26449e;
    --moss: #38491d;
 /* Typography Scale (using rem for accessibility) */

    --font-xs: 0.75rem;    /* 12px */
    --font-sm: 0.875rem;   /* 14px */
    --font-base: 1rem;     /* 16px */
    --font-md: 1.125rem;   /* 18px */
    --font-lg: 1.25rem;    /* 20px */
    --font-xl: 1.5rem;     /* 24px */
    --font-2xl: 2rem;      /* 32px */
    --font-3xl: 2.5rem;    /* 40px */
    --font-4xl: 3rem;      /* 48px */
    --font-5xl: 4rem;      /* 64px */
    --font-6xl: 5rem;      /* 80px */
    --font-7xl: 6rem;      /* 96px */

    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    --space-5xl: 8rem;     /* 128px */
    --space-6xl: 12rem;    /* 192px */
    --space-7xl: 16rem;    /* 256px */

    /* Border Radius */

    --radius-sm: 0.25rem;  /* 4px */
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 1rem;     /* 16px */
    --radius-full: 9999px; /* For circular elements */
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
    background-color: var(--linen);
    scroll-behavior: smooth;
}
.container{
    max-width: 2000px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md); 
    text-align: center;
}
h1,h2,h3,h4,h5,h6 {
    font-size: var(--font-lg);
    margin-bottom: var(--space-lg);
}
p{
    margin-bottom: var(--space-sm);
    margin-top: var(--space-sm);
}
.grid {
    display: grid;
    max-width: 1800px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
    justify-content: center;
    align-items: center;
    
} 
.grid > div {
    padding: var(--space-md);
}
button {
    text-decoration: none;
    background-color: var(--currant);
    color: var(--linen);
    padding: var(--space-sm);
    transition: var(--transition-fast);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-sm);
    border: 2px var(--linen);
}
button:hover{
    filter: brightness(1.1);
    transform: translateY(-2px);
}
ul {
    display: inline-block;
    list-style-type: disc; 
    padding-left: var(--space-md); /* Platz für die Punkte lassen */
    text-align: left;
    padding-bottom: var(--space-md);
    margin: 0 auto;
}
.lead-form{
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 480px;
    margin: 0 auto;
}
.lead-form input {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--currant);
    border-radius: var(--radius-md);
    width: 100%;            
    box-sizing: border-box; 
}
.form-wrapper p{
    font-size: 0.6rem;
}
.service-element{
    background-color: var(--harbor);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    color: var(--linen);
}
#story{
    background-color: var(--meadow);
    color: var(--linen);
}
#solution {
    background-color: var(--breeze);
}
footer{
    color: var(--linen);
    background-color: var(--currant);
}
a{
    text-decoration: none;
    color: inherit;
}
a:hover{
    color: var(--harbor);
}
@media screen and (min-width: 992px) {
    p{
        font-size: var(--font-lg);
    }
    h1,h2,h3,h4,h5,h6 {
        font-size: var(--font-2xl);
    }
    ul{
        font-size: var(--font-lg);
    }
}