html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.intro-page {
    display: flex;
    height: 100vh;
}

.intro-half {
    flex: 1;
    position: relative;

    background-size: cover;
    background-position: center;

    text-decoration: none;
    color: white;

    overflow: hidden;
}

.intro-half::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.45);

    transition: .3s;
}

.intro-half:hover::before {
    background: rgba(0,0,0,.30);
}


.intro-overlay {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 2;
}

.intro-overlay h1 {
    font-size: 4rem;
    margin: 0 0 20px;
}

.intro-subtitle {
    font-size: 1.5rem;
    margin-bottom: 40px;
}

.intro-button {
    display: inline-block;

    padding: 14px 32px;

    border: 2px solid #ff9800;
    color: #ff9800;

    border-radius: 8px;

    transition: .3s;
}

.intro-half:hover .intro-button {
    background: #ff9800;
    color: #fff;
}


.intro-left {
    background-size: cover;
    background-position: center;
}

.intro-right {
    background-size: cover;
    background-position: center;
}

.intro-left {
    background-image: url('/fileadmin/Home/Intro1_desktop.webp');
}

.intro-right {
    background-image: url('/fileadmin/Home/Intro2_desktop.webp');
}

@media (max-width: 768px) {
    .intro-left {
        background-image: url('/fileadmin/Home/Intro1_mobile.webp');
    }

    .intro-right {
        background-image: url('/fileadmin/Home/Intro2_mobile.webp');
    }
}



@media (max-width: 768px) {
    .intro-page {
        flex-direction: column;
        height: 100vh;
    }

    .intro-half {
        height: 50vh;
        min-height: 50vh;
    }

    .intro-overlay h1 {
        font-size: 2.2rem;
    }

    .intro-subtitle {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .intro-button {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/*fehler vom oberen balken*/
/*<div style="max-width: 800px; margin: 2em auto;">*/
body > div[style*="max-width: 800px"] {
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.intro-page {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
}


/*Intro Overlay*/
.intro-half {
    position: relative;
    overflow: hidden;
}

.intro-tech-overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 75%;
    height: auto;

    opacity: 0.3;

    pointer-events: none;
    z-index: 1;
}

.intro-overlay {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 2;
}