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

body {
    font-family: 'DM Sans', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
    overflow: hidden;
    position: relative;
    background: #1900d5; /* Dunkelblauer Hintergrund */
    background-image: 
        url('../images/desktop-background.svg'),
        linear-gradient(to bottom, #1900d5, #0b0591);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left, center;
}

/* Für größere Bildschirme */
@media (min-width: 1024px) {
    body {
        justify-content: flex-start; /* Align items to the start */
    }

    .text {
        margin-left: 200px; /* Margin for desktop view */
    }

    h1 {
        font-size: 5rem;
        font-weight: 400;
        color: white;
    }

    h2 {
        font-size: 2.875rem;
        font-weight: 400;
        color: #D9D9FE;
        line-height: 3.743rem;
        letter-spacing: 0.03125rem;
    }
}

/* Mobile Version */
@media (max-width: 768px) {
    body {
        padding-left: 0px !important;
        background-image: 
            url('../images/mobile-background.svg'),
            linear-gradient(to bottom, #1900d5, #0b0591);
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 142px; /* Margin for mobile view */
    }

    h1 {
        font-size: 2.41875rem;
        font-weight: 400;
        color: white;
    }

    h2 {
        font-size: 1.62rem;
        font-weight: 400;
        color: #D9D9FE;
    }
}