body {
    background-color: black;
    color: lightgray;
    height: 140vh;
    width: 100vw;
    overflow-x: hidden;
}


#header {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 3%;
    text-align: center;
    width: 50vw;
    height: 27vh;
}



#linkList {         /* Block der SM-Links, Position etc */
    position: relative;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
}

#menu {
    position: absolute;
    top: 27vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3rem;
    height: 100vh;
    padding: 3rem 10%;
}

#konzert {
    grid-column: 1/2;
    grid-row: 1/2;
    height: 100%;   
    background-image: url('../img/konzerte_main.jpg');
}

#portrait {
    grid-column: 1/2;
    grid-row: 2/3;
    height: 100%;
    background-image: url('../img/portrait_main.jpg');
}

#hochzeit {
    grid-column: 2/3;
    grid-row: 1/2;
    height: 100%;
    background-image: url('../img/hochzeit_main.jpg');
}

#firmenevent {
    grid-column: 2/3;
    grid-row: 2/3;
    height: 100%;
    background-image: url('../img/firmenevent_main.jpg');
}

.menupkt {
    display: flex;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    height: 100%;
}

.shadow {
    position: relative;
    height: 100%;
    width: 100%;
    -webkit-box-shadow: inset 0px -200px 212px -110px rgba(0,0,0,1);
    -moz-box-shadow: inset 0px -200px 212px -110px rgba(0,0,0,1);
    box-shadow: inset 0px -200px 212px -110px rgba(0,0,0,1);
    opacity: 0;
    z-index: 100;
}

.shadow:hover {
    animation: innerShadow 0.3s forwards ease;
}

.textUnten:hover {
    animation: textUp 0.3s ease 0.2s forwards;
}


.textUnten {
    position: absolute;
    padding: 0px 0px 1rem 1.6rem;
    bottom: 0px;
}

.textUnten h3 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.7rem;
    padding-bottom: 0.4rem;
}

.textUnten p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.menulink {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 99;

}

#footer {
    position: absolute;
    top: 135vh;
    width: 100vw;
    margin-bottom: 1%;
}



@keyframes innerShadow {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes textUp {
    from {
        padding-bottom: 0rem;
        opacity: 0;
    }
    to {
        padding-bottom: 1rem;
        opacity: 1;
    }
}

@media only screen and (max-width: 1280px) {
    .shadow {
        opacity: 1;
    }

    .textUnten {
        position: absolute;
        padding: 0px 0px 0.6rem 0.8rem;
        bottom: 0px;
    }
    
    .textUnten h3 {
        font-family: 'Roboto Slab', serif;
        font-size: 1.6rem;
        padding-bottom: 0.4rem;
    }
    
    .textUnten p {
        font-family: 'Poppins', sans-serif;
        font-size: 0.8rem;
        font-weight: 400;
    }

    .shadow:hover {
        animation: none;
    }
    
    .textUnten:hover {
        animation: none;
    }
}

@media only screen and (max-width: 734px) {
    #header {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 3%;
        text-align: center;
        width: 100vw;
        height: 25vh;
    }
    
    
    #vorschauen {
        display: none;
    }
    
    #menu {
        position: absolute;
        top: 25vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 2rem;
        height: 100vh;
        padding: 0px 15% 2% 15%;
    }
    
    #konzert {
        grid-area: 1 / 1 / 2 / 2;
    }
    
    #portrait {
        grid-area: 3 / 1 / 4 / 2;
    }
    
    #hochzeit {
        grid-area: 2 / 1 / 3 / 2;
    }
    
    #firmenevent {
        grid-area: 4 / 1 / 5 / 2;
    }
     
    .textUnten {
        position: absolute;
        padding: 0px 0px 0.3rem 0.4rem;
        bottom: 0px;
    }
    
    .textUnten h3 {
        font-family: 'Roboto Slab', serif;
        font-size: 1rem;
        padding-bottom: 0.2rem;
    }
    
    .textUnten p {
        font-family: 'Poppins', sans-serif;
        font-size: 0.6rem;
        font-weight: 400;
    }
    
}