*{
    box-sizing: border-box;
    margin: o;
    padding: 0;
}
#body-area
{
    
}
#body
{
max-width: 400px;
    height: 100vh;
    display: flex;
    margin: 0 auto;
padding: 2%;
    justify-content: center;
    background: dimgrey;
}
.slider
{
margin: 0 auto;
margin-right: auto;
position: absolute;
max-width: 400px;
    width: 400px;

	align-items: center;
    overflow: auto;
	overflow: hidden;
    left: 40%;
right: 0%;
   
	
}

.images{
    display: flex;
    width: 450px;
    align-items: center;
 
}

.images img
{
    height: 350px;
    width: 450px;
        align-items: center;

    transition: all 0.15s ease;
}

.images input
{
    display: none;
}

.dots{
    display: flex;
    justify-content: center;
    margin: 5px;
}

.dots label{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: solid #fff 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin: 5px;
}

.dots label{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: solid #efeaf7 1px;
    cursor: pointer;
    transition: all 0.15s ease;
    max-width: 5px;
}

.dots label:hover{background: #fff;}

#img1:checked ~ .img1
{
margin-left: 0;
}

#img2:checked ~ .img2
{
margin-left: -100%;
}


#img3:checked ~ .img3
{
margin-left: -200%;
}

#img4:checked ~ .img4
{
margin-left: -400%;
}

.dropdown
{
    display: flex;
    justify-content: right;

    margin: 1px;
    list-style: none;
   
}
.dropdown a{
    display: block;
    min-width: 100px;
     max-width: 100px;
    background-color: #6c0d0d;
    color: rgb(239, 239, 237);
    padding: 10px 0;
    text-decoration: none;
    text-align: center;
    font-size: large;


}

a:hover{
    background-color: chocolate;
}

.speisen
{
    display: none;
}
.dropdown li:nth-child(2):hover .speisen
{
    display: block;
}




.getränke
{
    display: none;
}
.dropdown li:nth-child(3):hover .getränke
{
    display: block;
}