
        .bg-image
        {
            width: 100vw;
            height: 70vh;
            

            /* position: absolute; */
            
            z-index: 1;

            display: flex;
            justify-content: center;
            align-items: center;

            background-size: cover;         
            background-position: 50% 10%;    
            background-repeat: no-repeat;

            background-attachment: fixed;
        }

        .bg-image .overlay
        {
            width: 100%;
            height:70vh;
            background-color: rgba(0,0,0,0.35);
            backdrop-filter:blur(0px);

            display: flex;
            justify-content: center;
            align-items: center;


            z-index: 2;
        }

        .bg-image .main-title
        {
            color: var(--er_yellow-color);
            font-size: clamp(40px, 10vw, 5rem);
            font-weight: bold;
            text-shadow: 5px 5px 13px black;
            text-align: center;

            z-index:50;

            animation-name: main-title;
            animation-duration: 2s;

            /* margin-bottom: 15rem; */
        }


        .bg-video 
        {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* for video */
            background-size: cover; /* for image */
            background-position: center;
            background-attachment: fixed;
            z-index: -1; /* behind content */
        }

        .main-title
        {
            color: var(--er_yellow-color);
            font-size: clamp(40px, 10vw, 5rem);
            font-weight: bold;
            text-shadow: 5px 5px 13px black;
            text-align: center;

            z-index:50;

            animation-name: main-title;
            animation-duration: 2s;

            /* margin-bottom: 15rem; */
        }


        .content-box
        {

            color: white;

            padding: clamp(1.5rem, 5vw, 3rem); 
        }

        .content-box .content-title
        {
            font-size: 2.4rem;
            color: var(--er_yellow-color);
            
            /* margin-bottom:.5rem; */
        }

        .content-box p
        {
            margin-bottom: 1.5rem;
            font-size:1.2rem;
        }


        @keyframes main-title
        {
            0%   {color: rgba(247,255,28,0);transform: translateY(-0.5rem);transition: transform ease-out;}
            
            100% {color: rgba(247,255,28,1);transform: translateY(0);}
        }






        .info_text-mitglieder
        {
            width:100vw;
    
            
            
        }

        .info_text-mitglieder .mitglieder-title
        {
            color: var(--er_yellow-color);
            font-size: 2.4rem;
            margin-top:1.2rem;
            
        }

        .info_text-mitglieder p
        {
            color:white;
            font-size:1.2rem;
            
        }


        .container-mitglieder
        {
            display:flex;
            
            justify-content: center;
            
            width: 100%;
            height: 100%;
            
            

            flex-wrap: wrap;
            
            gap:2em;
        }


        .member-section
        {
            border-top: solid white 3px;

        }


        .production-section
        {
            border-top: solid white 3px;
            padding-top:1.2rem;
            padding-bottom:1.2rem;
            /* background-color: var(--sophia_purple-color); */

            /* display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center; */

        }

        .production-section .title
        {
            color: var(--er_yellow-color);
            font-size: 2.4rem;
            

        }

        .production-section .box
        {
            width: 100%;
            height: 30rem;
            background-color: var(--sophia_purple-color);
        }

        .production-section .box .content
        {
            width: 99%;
            height: 100%;
            background-color: white;

        }

        .production-section .image
        {
            width: clamp(20rem, 30%, 30%);
            height: 25rem;

            /* box-shadow: 3px 3px 20px black; */

            background-size: cover;         
            background-position: center; 
            background-repeat: no-repeat;
        }
