@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

.body {

    background-color: black;
    max-width: 100vw;
    margin: 30px;
    cursor: url("bilder/index/pointer_80x80.png"), auto;

}

.header {

    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

}

.navi__text {

    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Inter;
    font-weight: 400;
    font-size: 25px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: url("bilder/index/pointer_80x80.png"), auto;

}

.navi__text:hover {

    color:greenyellow;
    font-weight: 900;
    font-style: italic;
    cursor: url("bilder/index/pointer_80x80.png"), auto;

}

.startscreen {

    margin-bottom: 30px;
    margin-top: 0px;

}

.start__text {

    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Inter;
    font-weight: 300;
    font-size: 70px;
    text-transform: uppercase;
    line-height: 110%;
    max-width: 100vw;

}

.start__text__auszeichnung {

    color: greenyellow;
    font-family: Inter;
    font-weight: 900;
    font-size: 70px;
    font-style: italic;
    text-transform: uppercase;
    line-height: 110%;
    max-width: 100vw;

}

.galerie {

    margin: -20px;
    margin-bottom: 30px;

}

.row {

    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;

}
  
/* Create four equal columns that sits next to each other */
.column {

    flex: 25%;
    max-width: calc(100vw-10px/2);
    padding: 0 10px;
    
}
  
.column img {

    margin-top: 20px;
    vertical-align: middle;
    width: 100%;

}

.projekt {

    position: relative;

}

.img__index {

    z-index: 10;
    display: block;

}

.video__index {

    vertical-align: middle;
    width: 100%;
    margin-top: 20px;

}

.img__index__overlay {

    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: black;
    color: greenyellow;
    opacity: 0%;
    z-index: 100;
    height: 100%;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-self: center;

}

.projekt__titel {

    margin: 0px;
    padding: 0px;
    color: greenyellow;
    font-family: "Inter", sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 50px;
    text-transform: uppercase;
    padding-top: 22px;
    line-height: 90%;
    margin-bottom: 10px;

}

.projekt__untertitel {

    margin: 0px;
    color: white;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: 25px;
    padding-bottom: 30px;
    text-transform: uppercase;

}

.projekt:hover .img__index__overlay {

    opacity: 100%;
    transition: 0s;
    text-decoration: none;
    cursor: url("bilder/index/pointer_80x80.png"), auto;

}

.projekt:hover .img__index {

    opacity: 0%;

}

.projekt:hover .video__index {

    opacity: 0%;

}

.projektbeschreibung {

    max-width: 100vw;
    margin-bottom: 40px;

}

.titel {

    margin: 0px;
    padding: 0px;
    color: lab(91.96% -52.48 81.87);
    font-family: Inter;
    font-weight: 900;
    font-size: 100px;
    font-style: italic;
    text-transform: uppercase;
    line-height: 90%;
    text-align: start;

}

.fakten {

    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Inter;
    font-weight: 400;
    font-size: 25px;
    text-transform: uppercase;
    margin-top: 20px;

}

.beschreibung {

    margin: 0px;
    padding: 0px;
    color: white;
    font-family: Inter;
    font-weight: 400;
    font-size: 25px;
    line-height: 130%;
    max-width: 66vw;
    margin-top: 20px;

}

.link {

    color: white;
    font-family: Inter;
    font-weight: 400;
    font-size: 25px;
    text-transform: uppercase;
    margin-top: 20px;
    text-decoration: none;
    cursor: url("bilder/index/pointer_80x80.png"), auto;

}

.link:hover {

    color: greenyellow;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: none;
    cursor: url("bilder/index/pointer_80x80.png"), auto;

}

.einspaltig {

    margin: 0px;
    margin-bottom: 20px;
    width: 100%;

}

.footer {

    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    bottom: 25px;

}

/* handyformat */
@media (max-width: 599px) {

    .body {
    
        margin: 25px;
        
    }
    
    .navi__text {

    font-size: 20px;

    }
    
    .start__text {
    
        font-size: 50px;
        max-width: 100vw;
        display: none;

    }

    .start__text__auszeichnung {

        font-size: 50px;
        max-width: 100vw;

    }
        
    .projekt__titel {

        font-size: 40px;

    }

    .projekt__untertitel {

        font-size: 20px;

    }

    .titel {

        font-size: 40px;

    }

    .fakten {

        font-size: 20px;

    }

    .beschreibung {

        font-size: 20px;
        max-width: 100vw;

    }

    .link {

        font-size: 20px;

    }

    /* Create four equal columns that sits next to each other */
    .column {

        flex: 100%;
        max-width: calc(100vw-10px/1);
        padding: 0 10px;
    
    }

}    

/* tabletformat */
@media (min-width: 600px) and (max-width: 1199px) {

    .body {
    
        margin: 25px;
        
    }

}

/* grosser desktop */
@media (min-width: 2000px) and (max-width: 4000px) {

    .body {
    
        margin: 40px;
        
    }
    
    .navi__text {

        font-size: 35px;

    }
    
    .start__text {
    
        font-size: 110px;
        max-width: 100vw;

    }

    .start__text__auszeichnung {

        font-size: 120px;
        max-width: 100vw;

    }
    
    .projekt__titel {

        font-size: 110px;

    }

    .projekt__untertitel {

        font-size: 35px;

    }
    
    .titel {

        font-size: 110px;

    }

    .fakten {

        font-size: 35px;

    }

    .beschreibung {

        font-size: 35px;
        max-width: 50vw;

    }

    .link {

        font-size: 35px;

    }

}