/* Schrift */

@font-face{
    font-family: Playfair;
    src: url(fonts/PlayfairDisplay-VariableFont_wght.woff2)
}

@font-face{
    font-family: Poppins-Bold;
    src: url(fonts/Poppins/Poppins-Bold.woff2) format("woff2")
}

@font-face{
    font-family: Poppins-Regular;
    src: url(fonts/Poppins/Poppins-Regular.woff2) format("woff2")
}

@font-face{
    font-family: Poppins-Light;
    src: url(fonts/Poppins/Poppins-Light.woff2) format("woff2")
}



body{
    margin: 0;
}

html{
    scroll-behavior: smooth;
    
}




@media (hover: hover){
    /*jedes Gerät, welches einen mouse-over effect unterstützt */
    
    nav ul li a:hover{
        outline: black;
    }
     
    nav ul li a:focus{
        outline: none;
        color: #433187;
    }
    
    nav ul li a:active{
        background-color: none;
    }
    
    nav a:hover{
        border-radius: 10px;
   text-decoration: underline;
}

a:hover body nav div{
    background-color: none;
}
}

nav ul li a{
    color:black;
    text-decoration: none;
}

nav ul li.current a{
    text-decoration-line: underline;
            color: #121111;

}




.button{
    display: inline-block;
    background-color:#7AA5A9;
    padding:10px 20px;
    border-radius: 50px;
    /*margin-top: 20px;*/
    margin-top: -50px;
    text-transform: uppercase;
    font-size: 0.8em;
    color: #ffffff;
    text-decoration: none;
    width: 15ch;
}

 .sliderbutton{
    display: inline-block;
    background-color:#7AA5A9;
    padding:10px 20px;
    border-radius: 50px;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 0.9em;
        text-align: center;
    color: #ffffff;
    text-decoration: none;
    width: 15ch;
     margin-top: -30px;
     
}

    
grid,
.grid-1-2
{
    display: grid;
    grid-gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 20px;
    justify-content: center;
    box-sizing: border-box;
}
    
    .grid-footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    margin: 0 auto;
    padding: 30px 20px;
    justify-content: center;
    box-sizing: border-box;
        max-width: 1400px;
    }

img,
svg {
    width: 100%;
}
    
    svg a{
        pointer-events: none;
    }
    
    .b ildtext img{
        display: block;
        width: 100px;
    }

h1{
    font-family: 'Playfair';
    text-align: center;
    font-size: 1.7;
    font-weight: 400;
}

h2{
    margin: 0;
}

p,
a{
    font-family: "Poppins-Regular";
}

main{
    padding: 20px;
}

main p{
    max-width: 70ch;
    font-size: 1.2em
}

main section svg{
    pointer-events: none;
}



/* Legende Räumeseite */


.legende{
    visibility: visible;
    justify-content: center;

}

.legende div a div{
   display: flex;
    flex-direction: row;
    gap: 10px;
    align-content: center;
   
}

.legende div a{
   display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.legende div{
   display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}


.legende div h3{
  font-family: 'PlayfairDisplay';
}

.legende img{
  width: 50px;
}

.room-img img{
    aspect-ratio: 3/2;
    object-fit: cover;
}




.bildueberschrift{
    margin: 0 auto;
}

.pflichtfeld{
    color: #AB665D;
    font-family: 'Poppins-Regular';
    font-size: 17px;
   margin-top: -20px;
}

.border{
    border-bottom: 2px solid black;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 35px;
    margin-top: -20px;
}
    
    .border h2, .border p{
        margin: 0;
    }
    
    .border-2{
    border-bottom: 2px solid black;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px;

}
    
     .border-2 h2, .border-2 p{
        margin: 0;
    }
    
    .center
    {
        text-align: center;
        margin: 0 auto;
    }


.platzhalter{
    padding: 80px;
}
    
    
    
    #plan{
        margin-bottom: 40px;
    }



/* Navigation (mobile first)*/


    .plan{
        max-width: 1000px;
        margin: 0 auto;
        display: block;
    }
    
    
    .zeitstrahl{
        border-left: 2px solid black;
        list-style: none;
        padding-left: 30px;
    }
    
    .zeitstrahl li{
        position: relative;
        font-family: Poppins-Regular;
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    
    .zeitstrahl li::before{
        content: "";
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #0f0e0e;
        border-radius: 50%;
        left: -39px;
        top: 6px;
    }
    
    
    .raummenue li a{
        display: grid;
        grid-template-columns: 50px 1fr;
        gap: 10px;
        align-items: center;
         color: black;
        
    }
    
    .raummenue li{
        margin-bottom: 10px;
        list-style: none;
       
    }
    
    

nav div a{
    padding: 10px;
    display: block;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
  
}
    
    nav div > a{
        max-width: 120px;
    }

label{
    align-content: center;
    
}

nav{
    max-width: 1400px;
    margin: 0 auto;
}


nav ul{
    transition: transform 0.3s;
    transform: translateX(-120%);
}

nav ul li a {
    white-space: nowrap;
}

nav input#menu:checked ~ ul{
    transform: translateX(0%);
}

nav input#menu{
    display:none;
}

nav div{
    display: flex;
    justify-content: space-between;
    padding: 20px;
    
}


/**
nav div.grid1200{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}
**/

nav ul{
    position: absolute;
    z-index: 9999;
    top: 90px;
    bottom:0px;
    left:0;
    background-color: rgba(243, 240, 236, 0.72);
    width:100%;
    box-sizing: border-box;
    /* Reset Voreinstellungen */
    padding:20px;
    margin: 0;
    list-style: none;

    /* Menüpunkte mittig */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* blur-Effekt */
    backdrop-filter: blur(5px);
}




/*Slider*/

.slideroverlay{
    background-color: rgba(194, 113, 95, 0.72);
    position: absolute;
    top: 0;
    left: 60%;
    width: 40%;
    max-width: 300px;
    bottom: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

header div h2{
    color: #ffffff;
    font-family: 'PlayfairDisplay';
    font-size: 2em;
    padding: 30px;
    margin-top: -30px;
}



@media (min-width:1400px){
    .slideroverlay{
        left: 50%;
        max-width: 420px;
        margin-left: 280px;
    } 
}

.grid-slider{
    margin: 0 auto;
}


#slider{
    width: 100%;
    
}


#slider img{
    min-height: 300px;
    display: block;
    width: 100%;
    object-fit: cover;
}

.slider{
    overflow: hidden;
}

.slider-wrapper{
    display: flex;
    width: 400%;
    animation: slider;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
    position: relative;
}

header div h2{
    font-size: 2em;
    padding: 50px; 
    
}

/* slider-wrapper:hover{
animation-play-state: paused;
}
*/

.slider-wrapper a{
    justify-content: center;
    width: 100%;
    position: relative;
}

.slider-wrapper a span btn{
    position: absolute;
    color: #7AA5A9;
    display: inline-block;
    padding: 20px 30px;
    border-radius: 5px;
    bottom: 50px;
}

@keyframes slider{
    0%{
        transform: translateX(0%);
    }
    
    15%{
        transform: translateX(0%);
    }
    
    30%{
        transform: translateX(-25%);
    }
    
    45%{
        transform: translateX(-25%);
    }
    
    60%{
        transform: translateX(-50%);
    }
    
    75%{
        transform: translateX(-50%);
    }
    
    100%{
        transform: translateX(-75%);
    }
}





.grid1200{
    padding: 0 20px;
}

.stoerer{
    border: solid black 1px;
    padding: 10px;
}

.abtrennstrich{
    border-bottom: solid black 1px;
    margin-bottom: 20px;
}
    

    .button a button{
     display: inline-block;
    background-color: #7AA5A9;
    padding: 10px 50px;
    border-radius: 50px;
    margin: 30px 0;
    color: #ffffff;
    border: none;
    font-family: 'Poppins-Regular', sans-serif;
    text-transform: uppercase;
    font-size: 1em;
    }
    
    .button{
        list-style: none;
    }
    
    @media (hover: hover){
    /*jedes Gerät, welches einen mouse-over effect unterstützt */

.button:hover {
  background-color: #5b8793;
}
        
        button:hover {
  background-color: #5b8793;
}
        
        
       .btn:hover {
  background-color: #5b8793;
}


        
        
/* Formular */

#tickets{
    padding: 40px 0;
}

#tickets form{
    font-family: Poppins, sans-serif;
    max-width: 550px;
    margin: 0 auto;
    padding: 0 20;
}

#tickets form #popup fieldset, #tickets .breadcrumb{
    max-width: 550px;
        margin: 0 auto;
}

form fieldset{
    margin: 0;
    padding: 20px 0 0 0;
    border: none;
}

form fieldset table{
    width: 100%;
    font-family: 'Playfair', sans-serif;
    font-size: 1.2em;
}

form fieldset legend{
    font-family: 'Playfair', serif;
    font-size: 2em;
    color: #AB665D;
    font-weight: 700;
}

form fieldset thead{
    text-align: right;
}

form fieldset table input{
    width: 50%;
    padding: 10px;
    box-sizing: border-box;
    text-align: right;
}

form table td:nth-child(2){
    text-align: right;
    width: 17ch;
}

form input#confirm{
    display: none;
}


form div.datenschutz{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 10px;
    color: antiquewhite;
}

form.datenschutz input {
    accent-color: #433187;
}
        

/* Popup (öffnet sich, wenn die confirm checkbox ausgewählt ist) */
        
form input#confirm:checked ~ div#popup{
    display: block;
}

form div#popup{
    display: none;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    background-color: rgba(234, 232, 245, 0.83);
    backdrop-filter: blur(5px);
    padding: 40px 20px;
}

form div#popup legend{
    color: #AB665D;
    margin-bottom: 20px;
}

form span.btn{
    display: inline-block;
    background-color: #7FADBA;
    padding: 10px;
    border-radius: 50px;
    margin: 30px 0;
    color: #ffffff;
    border: none;
    font-family: 'Poppins-Regular', sans-serif;
    text-transform: uppercase;
    font-size: 1em;
}

form button{
    display: inline-block;
    background-color: #7AA5A9;
    padding: 10px;
    border-radius: 20px;
    margin: 30px 0;
    color: #ffffff;
    border: none;
    font-family: 'Poppins-Regular', sans-serif;
    text-transform: uppercase;
    font-size: 1em;
}
        
    
    
    

form .legende{
    font-size: 0.8em;
    padding: 20px 0;
    font-family: 'Poppins-Regular', sans-serif;
}


form tfoot{
    font-family: "Poppins-Regular", sans-serif;
}

form div#popup label{
    color: #AB665D;
    display: grid;
    margin-bottom: 20px;
    width: 100%;
}

form div#popup input{
    background: #ffffff;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    
}

form #popup .back{
    text-decoration: underline;
    cursor: pointer;
}

form div.street{
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
}

form div.location{
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
}
        
        @media (hover: hover){
    /*jedes Gerät, welches einen mouse-over effect unterstützt */
    
    footer ul li a:hover{
        outline: black;
    }
     
    footer ul li a:focus{
        outline: none;
        color: #433187;
    }
    
    footer ul li a:active{
        background-color: none;
    }
    
    footer a:hover{
        border-radius: 10px;
   text-decoration: underline;
}

a:hover body nav div{
    background-color: none;
}
}
        
        
        

footer{
    background-color: #f3f0ec;
    
    & ul{
        padding: 20px 0;
    }
    
    & a{
        color: #0b0b0b;
        text-decoration: none;
        font-size: 1.2em;
    }
    
    & li{
        text-decoration: none;
        list-style: none;
        padding: 5px 0;
        border-bottom-color: #f3f0ec;
        border-bottom-style: solid;
    }
}

footer p{
    color: #0b0b0b;
}

footer.txt-adress{
    display: flex;
    padding: 20px 0;
    
    & p{
        font-size: 1.1em;
        align-content: end;
    }
}
        
        


@media screen and (min-width: 1100px){

    nav label{
        display: none;
    }

    nav ul{
        transform: translateX(0%);
        position: static;
        flex-direction: row;
        padding: 0 20px;
        justify-content: flex-end;
        background-color: transparent;
    }

    nav div > a img{
        height:90px;
    }
    
    .raummenue{
        display: none;
    }
    
    svg a{
        pointer-events: initial;
    }
    
    
      header div h2{
    font-size: 3.5em;
    padding: 30px;
    margin-top: -30px;
}
    
    .sliderbutton{
    display: inline-block;
    background-color:#7AA5A9;
    padding:10px 20px;
    border-radius: 50px;
    margin-top: 20px;
    text-transform: uppercase;
    font-size: 1em;
        text-align: center;
    color: #F5F5DC;
    text-decoration: none;
    width: 15ch;
}
    
  



}


@media screen and (min-width: 900px){
    .grid-1-2{
        grid-template-columns: 1fr 1fr;
    }
    
    h1{
        font-size: 2.8em;
        font-weight: 400;
    }
    
    main p{
        font-size: 1.3em;
    }
    
    .colspan-2{
        grid-column: span 2;
    }

    
}

form div#popup{
    top: 80px;
}

main section svg{
    pointer-events: initial;
    padding-bottom: 50px;
}

.legende {
    display: none;
    visibility: hidden;
}

.room-description{
    align-items: flex-start;
}

.room-img{
    width: 80%;
}
        
    



footer{
    background-color: #f3f0ec;
    & li{
        border-bottom-style: none;
    }
}