/* roboto-condensed-300 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-300.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}



/* roboto-condensed-700 - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.woff') format('woff'), /* Modern Browsers */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://fonts.putznet.de/roboto-condensed-v19-latin/roboto-condensed-v19-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}




header
{
    width: 100%;
}

#top 
{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;   
    background: #fff;
    z-index: 100;
    transition: 0.1s;
    height: 85px;
}

#top #logo 
{
    position: relative;
    left: 17%;
    top: 10px;
    margin: 0;
    padding: 0;
}

#top #logo p
{
    margin: 5px 0; 
    padding: 0;
}

#top #logo img 
{
    width: 20vw !important; 
    max-height: 55px !important;
    min-width: 180px !important;
    margin: 0;
    padding: 0;
    transition: 0.1s;
}

#top #kontakt 
{
    position: absolute;
    right: 2%;
    top: 10px;
    transition: 0.1s;
}

#top #kontakt p
{
    display: inline-block;  
}

#top #kontakt img
{
    height: 30px !important;
    width: auto !important;
    vertical-align: -20%;   
}
   
#top #kontakt a
{
    font-weight: 700;
    color: #000;
    font-size: 20px;
    text-decoration: none;   
}

@media only screen and ( min-width: 500px )  
{
    #top.scroll
    {
        height: 50px;
    }

    #top.scroll #logo 
    {
        top: 0;
    }

    #top.scroll #logo img
    {
        height: 35px !important;
        width: auto !important; 
    }

    #top.scroll #kontakt
    {
        top: 0;
    }
}




@media only screen and ( max-width: 500px )
{    
    #top 
    {
        height: 55px !important;
    }

    #top #kontakt .text
    {
        display: none;
    }
    
    #top #logo img
    {
        height: 30px !important;
    }
    
    #top #kontakt
    {
        top: 0px;
        right: 10px;
    }
    
    #top #logo
    {
        top: 7px;
        left: 75px;
    }
    
    

}

/**************************************************************************************************/   

#Teaser
{
    display: flex;
    width: 96%;
    margin: 0 auto;
    justify-content: space-between;
    top: 85px;
    position: relative;
    border-bottom: 1px solid #000;
    padding: 0 0 15px 0;
    overflow: hidden; 
} 



@media only screen and ( max-width: 500px ) 
{
    #Teaser 
    {
        top: 55px;
    }

}

/**************************************************************************************************/   


#Teaser #bild
{
    width: 75%;
    height: 55vh;
    margin: 0; 
    padding: 0; 
    position: relative;
    overflow: hidden;
}

#Teaser #bild div
{
    height: 100% !important;
}

#Teaser #bild h1
{
    font-size: calc(25px + (45 - 25) * ((100vw - 320px) / (1600 - 320)));
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    font-weight: 600;
    line-height: 1.4em;
    color: var(--blue);
    position: absolute;
    bottom: 75px;
    left: 2%;
    color: #fff;
    text-shadow: black 0 0 5px;
}

#Teaser #bild h3
{
    font-size: calc(17px + (25 - 17) * ((100vw - 320px) / (1600 - 320))); 
    font-weight: 700;
    line-height: 1.2em; 
    margin: 0; 
    padding: 0;
    position: absolute;
    bottom: 25px;
    left: 2%;
    color: #fff;
    text-shadow: black 0 0 5px;
}


#Teaser #bild p
{
    width: 100%;
    height: calc(100%); 
    left: 0;
    bottom: 0;
    position: relative;
    margin: 0;                    
}

#Teaser #bild img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0;
    padding: 0;
}


#Teaser #bild .blend
{
    opacity: 0;	     
    transition: 1.3s all;
}

#Teaser #bild .show
{
    opacity: 1;        
}


#Teaser #bild .hiddenclear
{
    display:none;
}

/**************************************************************************************************/ 

#Teaser #katalog
{
    width: 25%;
    background: var(--blue);
    height: 55vh;
    width: 24%;
    position: relative;
}


#Teaser #katalog div
{
    margin: 2vh 20px;
    padding: 2vh 1vw;
    border: 1px solid #fff;
    height: calc(55vh - 8vh);
    position: relative; 
}

#Teaser #katalog h2
{
    font-size: calc(16px + (26 - 16) * ((100vw - 320px) / (1600 - 320))); 
    font-weight: 700;
    line-height: 1.2em; 
    margin: 15px 0 10px 0;
}

#Teaser #katalog img
{
    width: auto !important;
    margin: 0;
    padding: 0;
    position: absolute;  
    transform: rotate(3deg);
    height: auto !important;
    max-width: 100% !important;
}


#Teaser #katalog .linkButton
{
    width: auto;
    margin-bottom: 0;
    margin-top: 5px;    
    position: absolute;
    bottom: 0px;
    font-size: calc(9px + (16 - 9) * ((100vw - 320px) / (1600 - 320))); 
}

#Teaser #katalog .linkButton.bestellung
{
    bottom: 55px;
}

#Teaser #katalog .linkButton a 
{
    display: inline-block;   
    background-color: var(--red);
    padding: 8px 15px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
}

#Teaser #katalog .linkButton a:hover 
{
    display: inline-block;     
    color: #fff;
    background-color: var(--blue); 
    padding: 8px 15px;
    text-transform: uppercase;
    text-decoration: none !important;
    font-weight: 700;
    text-decoration: none;
}

@media only screen and ( max-width: 1000px )
{
    #Teaser #katalog .linkButton
    {
        bottom: 0px;                                              
    }

    #Teaser #katalog .linkButton.bestellung
    {
        bottom: 45px;
    }
    
    #Teaser #katalog div 
    {
        border: none;
        margin: 2vh 10px;
        padding: 0;
        height: calc(55vh - 5vh);
    }
    
    #Teaser #katalog img
    {
        top: 0px;
    }
    
    #Teaser #katalog .linkButton
    {
       display: block;
       text-align: center;
       width: 100% !important;     
    }
    
    #Teaser #katalog .linkButton a
    {
       display: block;   
       padding: 2px 5px !important; 
    }

}


@media only screen and ( max-width: 700px ) 
{
    #Teaser #bild
    {
        width: 100%; 
    }
    
    #Teaser #katalog
    {
        height: auto;
        position: absolute;
        right: 0;
        background-color: transparent;
        width: 180px !important;
    }
    
    #Teaser #katalog div
    {
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
    }
    
    #Teaser #katalog img
    {
        position: relative;
    }
    
    #Teaser #katalog .linkButton
    {
        position: absolute;
        bottom: 15px;
    }

    #Teaser #katalog .linkButton a
    {
        white-space: nowrap;
        padding: 5px;
        font-weight: 300;
    }
    
    #Teaser #katalog .linkButton.bestellung
    {
        bottom: 40px;
    }
    
}

@media only screen and ( max-width: 500px ) 
{
    #Teaser #katalog
    {
        width: 130px !important; 
    }
    
    #Teaser #katalog .linkButton
    {
        display: inline-block;
        width: auto !important;
        right: 0;
    }
    
    #Teaser #katalog .linkButton a
    {
        padding: 5px 15px !important;
    }
    
    #Teaser #katalog .linkButton
    {
        bottom: -15px;
    }
    
    #Teaser #katalog .linkButton.bestellung
    {
        position: absolute;
        bottom: 15px;
    }

}




/**************************************************************************************************/

html
{
    margin: 0;
    padding: 0;
    overflow-y: scroll;
}

body
{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans';
    font-weight: 300;
    text-align: left; 
    color: #000;
    position: relative;
    --blue: rgb(44,115,133);
    --darkblue: rgb(0,86,129);
    --lightblue: rgb(149,195,207);
    --steel: rgb(206,229,235);
    --steellight: rgb(230,244,248);
    --grey: rgb(197,199,195);
    --lightgrey: rgb(224,226,221);
    --red: rgb(198,42,34); 
    --alpha: 0.5;
}


#container
{
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 100%;
}


#inhalte 
{
    width: 96%;
    max-width: 1600px;
    margin: 0 auto;
    top: 50px;
    position: relative; 
    padding: 45px 2% 100px 2%;   
    display: grid;       
    grid-template-rows: 1fr auto;
    grid-template-columns: auto 25%;
}

#inhalte a 
{
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
}

#inhalte .linkButton
{
    width: auto;
    margin-bottom: 0;
    margin-top: 5px;
    justify-self: center;
    align-self: center;
}

#inhalte .linkButton a 
{
    display: inline-block;
    border: 1px solid var(--blue);
    padding: 8px 15px;
    color: #000;
    text-transform: uppercase;
}

#inhalte .linkButton a:hover 
{
    display: inline-block;
    background: var(--blue);
    color: #fff;
    padding: 8px 15px;
    text-transform: uppercase;
    text-decoration: none !important;
}

#inhalte p, #inhalte li, #inhalte input 
{
    font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1600 - 320)));
    margin: 5px 0;
    line-height: 1.6em;
    word-wrap: break-word;
    font-weight: 400;
}

#inhalte div h1, #inhalte article h1,
#inhalte div h2, #inhalte article h2 
{
    font-size: calc(16px + (26 - 16) * ((100vw - 320px) / (1600 - 320))); 
    font-weight: 700;
    line-height: 1.2em; 
    margin: 35px 0 10px 0;
}

#inhalte div h3, #inhalte article h3 a, #inhalte article h3, #inhalte h3 a
{
    font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1600 - 320)));
    text-transform: uppercase;
    margin: 25px 0 5px 0;
    color: #000 !important;
    text-decoration: none !important; 
    line-height: 1.1em;
}

#inhalte div h4, #inhalte article h4
{
    font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
    margin: 5px 0;
    font-weight: 400;
}


@media only screen and ( max-width: 1000px ) 
{
    #inhalte 
    {
        grid-template-columns: calc(100% - 250px) 25%; 
    }

}

@media only screen and ( max-width: 700px ) 
{
    #inhalte 
    {
        display: block; 
        top: 25px;
    }

}


/**************************************************************************************************/  

#links
{
    margin-right: 5%; 
    grid-column: 1 / 2;
    grid-row: 1 / 1;
}

#links img
{
    float: left;
    margin: 0 25px 0 0;
    width: auto !important;
}

#links form div
{
    border: 1px solid var(--lightgrey);
    padding: 0 3% 2% 3%;
    margin: 15px 0 25px 0;
}

#links form div label
{
    width: 30%;
    padding: 5px;
    display: inline-block;
}


#links form div input
{
    width: 60%;
    padding: 5px;  
    display: inline-block;   
}

#links form .cpt
{
    border: none; margin: 0; padding: 0;
}

#links form .submit, .submit
{
    display: inline-block;
    border: 1px solid var(--blue);
    background: var(--darkblue);
    padding: 8px 15px;
    color: #fff;
    text-transform: uppercase;
    font-size: calc(14px + (17 - 14) * ((100vw - 320px) / (1600 - 320))); 
    margin: 15px 0;
    width: auto;     
    font-weight: 700;
}

#links form .submit:hover, .submit:hover
{
    display: inline-block;
    background: var(--blue);
    color: #fff !important;
    padding: 8px 15px;
    text-transform: uppercase; 
    text-decoration: none !important;  
}

@media only screen and ( max-width: 700px ) 
{
    #links
    {
        width: 96%;
        margin: 0 auto;
    }


}

@media only screen and ( max-width: 500px ) 
{
    #links img
    {
        float: none; 
        width: 100% !important;
        max-width: 100% !important;  
        height: auto;
        margin: 0 !important;
     } 
}


/******Gastgeber Übersichtsseite ********************************************************************************************/

#links .uebersicht
{
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 2%;
}

#links .uebersicht > div
{
    background-color: var(--steellight);
    margin: 0;
    padding: 4%; 
    position: relative; 
}

#links .uebersicht > div:hover
{
    background-color: var(--steel);
    padding: 4%;  
}   
   

#links .uebersicht h3
{
    margin: 0;
    padding: 10px 25px;
    position: absolute;
    color: #fff !important;
    background-color: var(--lightblue);
    top: 0;
    left: 0;
}

#links .uebersicht .bild
{
    width: 100%;
    height: 35vh;
    overflow: hidden;
}   

#links .uebersicht img
{
    width: 100% !important;
    height: 100% !important;  
    object-fit: cover;
}

@media only screen and ( max-width: 900px )
{
    #links .uebersicht
    {
        display: block;   
    }
    
    #links .uebersicht > div
    {
        margin: 10px 0;
    }
    
    #links .uebersicht .bild  
    {
        height: auto !important;
    }

}

 


/**************************************************************************************************/  

#rechts
{
    position: relative;  
    min-width: 250px;
    grid-column: 2 / 3;
    grid-row: 1 / 1;
}

#rechts div, #rechts article
{
    margin: 10px 0 0 0;
    padding: 20px 25px 35px 25px;
    background-color: var(--lightgrey);
}

#rechts .kataloghinweis
{
    margin: 0; padding: 0;
}

#rechts div h2, #rechts article h2
{
    margin: 10px 0 10px 0 !important;
    font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1600 - 320)));
}

#rechts img
{
    width: 100% !important;
    height: auto !important;  
}

@media only screen and ( max-width: 700px ) 
{
    #rechts
    {
        width: 100%;
        min-width: 100%;  
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    } 
    
    #rechts div, #rechts article
    {
        width: 41%;
        padding: 10px 4%;
    }
}

@media only screen and ( max-width: 500px ) 
{
    #rechts div, #rechts article
    {
        width: 96%;
        padding: 10px 2%;
        text-align: center;
    }
}



/************************************************************************************************
   Slider Werbung inhalte
***********************************************************************************************/  

#inhalte .werbung 
{
    cursor: pointer;
    background-color: color-mix(in srgb, var(--lightblue) calc(var(--alpha) * 90%), transparent);
    grid-column: 1 / 3;
    grid-row: 2 / 2;
    padding: 2%;
    top: 35px;
    position: relative;
}

#links .werbung > div 
{ 
    display: none;
}

#inhalte .werbung > div > div
{
    display: grid;       
    grid-template-columns: 400px auto;
}

#inhalte .werbung > div .bild
{     
    grid-column: 1 / 2; 
    position: relative; 
}

#inhalte .werbung > div .text
{     
    grid-column: 2 / 3; 
    position: relative; 
}

#inhalte .werbung img 
{
    max-width: 100%;
    height: auto;
    display: block;
}



/**************************************************************************************************/  

#inhalte .angebot
{
    /*background-color: rgba (var(--lightblue),0.5);       */
    background-color: color-mix(in srgb, var(--lightblue) calc(var(--alpha) * 90%), transparent);
    grid-column: 1 / 3;
    grid-row: 2 / 2;
    padding: 2%;
    top: 35px;
    position: relative;
}

#inhalte .angebot > h3
{

    background-color: var(--lightblue);
    color: #fff !important; 
    padding: 10px 30px;
    margin: 0 !important;
    display: inline-block;
    z-index: +1;
    position: relative;

}

#inhalte .angebot > div
{
    display: grid;
    grid-template-columns: 40% 60%;
    grid-template-rows: 1fr;
    gap: 2%;
    margin: -15px 0 0 0;
}

#inhalte .angebot div .pic
{
    grid-column: 1 / 2;
    grid-row: 1 / 1;
    height: 45vh;
    overflow: hidden;  
}

#inhalte .angebot div .pic img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

#inhalte .angebot div .pauschale
{
    grid-column: 2 / 3;
    grid-row: 1 / 1; 
    padding: 2%; 
}

#inhalte .angebot div .pauschale div
{
    width: 100%;
    display: block;
}

#inhalte .angebot .pauschale .preis
{
    margin: 0;      
    padding: 20px 0px;
    font-weight: 500;   
}

#inhalte .angebot .pauschale .preis span
{
    font-size: 22px;
    font-weight: 700; 
}




/**************************************************************************************************/  

    footer
    {
        width: 100%;
        margin: 45px 0 0 0;
    }
    
    #infoleiste div
    {
        display: flex;
        background: var(--blue);
        color: #fff;
        padding: 2% 3%;
        gap: 3%;
        text-align: center;
    }
    
    #infoleiste div .block
    {
        width: 22%;
        border: 1px solid #fff;
        display: block;
        opacity: 0.8;
    }
    
    #infoleiste div .block:hover
    {
        opacity: 1;   
    }
    
    #infoleiste div .block h3
    {
        margin: 10px 0 0 0; 
        color: #fff !important;
        font-size: calc(17px + (22 - 17) * ((100vw - 320px) / (1600 - 320))); 
    }
    
    #infoleiste div .block ul
    {
        margin: 10px 0; 
        padding: 0;
    }
    
    #infoleiste div .block li
    {
        list-style-type: none; 
        margin: 0; 
        padding: 0;
        font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
        line-height: 1.6em;
        font-weight: 400;
    }
    
    #infoleiste div .block a
    {
        color: #fff;
        text-decoration: none;
    }
    
    #infoleiste div .block a:hover
    {
        color: var(--lightblue);
        text-decoration: none;
    }
    
/*    #infoleiste .icon
    {
        position: relative;
        margin: 0 auto;
        
    }
    
    #infoleiste .icon svg
    {   
        fill: #fff; 
        height: 35px;
    }
    
    #infoleiste .icon .pfad
    {   
        fill: #fff;   
    }
    */
    
    #copyright p, #copyright a
    {
        font-weight: 700;
        font-size: 11px;
        text-decoration: none;
        color: #000;
        padding: 2px 10px;
    }
    
    @media only screen and ( max-width: 800px )
    {
        #infoleiste div
        {
            flex-wrap: wrap;
        }
        
        #infoleiste div .block
        {
            width: 42%;
            margin: 10px 0;
        }
    }
    
    @media only screen and ( max-width: 500px ) 
    {
        #infoleiste div
        {
            display: block; 
        }
        
        #infoleiste div .block
        {
            width: 94%; 
        }
    }



/**************************************************************************************************/

.hiddenclear, hr
{
    font-size: 1px !important;
    line-height: 1px !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 1px !important;
    visibility: hidden !important;
}

.clear
{
    clear: both !important;
}

/**************************************************************************************************/



/*****Katalogbestellung und Formulare *********************************************************************************************/

#links form .abo
{
    background-color: var(--lightblue);
    border: none;
    padding: 2%;
}

#links form .abo h3
{
    margin: 0;
    text-align: center;
}

#links form .abo input
{
    width: 35px;
}

#links form input[type="checkbox"]
{
    height: 25px;
    text-align: left; 
    width: 35px;
    vertical-align: -20%;  
}

#links form span
{
    font-weight: bold;
}

.katalogbestellung #links form .adresse label,
.katalogbestellung #links form .adressezfl label

{
    width: 30%;
}

.katalogbestellung #links form select
{
    height: 35px;
}

.katalogbestellung #links form label
{
    width: calc(100% - 50px);
}

.katalogbestellung #links form .orte label
{
    width: 80%;
}

.katalogbestellung #links form textarea
{
    width: 100%;
    height: 120px;
}

.katalogbestellung #links form .senden input
{
    background-color: transparent;
    border: none;
    color: #fff;
    width: auto;
    font-weight: 700;
    text-transform: uppercase;
}

.formular #links textarea
{
    width: 60%;
    height: 250px;
}


@media only screen and ( max-width: 500px )
{
    #links textarea, #links input, #links label
    {
        width: 90% !important;  
        display: block !important;  
    }
}

/**************************************************************************************************/ 

@media only screen and ( min-width: 500px )  
{
     #menubutton.scroll 
    {
        top:-10px;
    }

    #menubutton.scroll p
    {
        display: none;
    }

}



#menubutton
{
    cursor: pointer;
    z-index: 200;
    text-transform: uppercase;
    border: none;
    background-color: var(--blue);
    position: fixed;
    top: 12px;
    line-height: 0;
    left: 2%;
    padding: 10px;
    line-height: 0; 
}

#menubutton p 
{
    margin: 5px 0 0px 0; 
    padding: 0 0 0 3px;
    font-size: 14px; 
    text-transform: uppercase;
    font-weight: 700;
    color: #fff; 
    transition: 1s all;
    line-height: unset;
}

#menubutton:focus
{
    outline: none;
}

#menubutton svg
{
    outline: none !important;
    width: 40px;
    height: 30px;
    margin: 10px 0 0 3px;
}

#svg-menubutton rect
{
    transition: 0.5s all;
    fill: #fff;
    height: 2px;
}

.open #svg-menubutton rect
{
    fill: #fff;
}



.open #menubutton p 
{
    color: #ffffff;   
}

#svg-menubutton .top
{
    transform: translate(0, 4px);
    width: 40px; 
}

#svg-menubutton .middle
{
    transform: translate(0, 14px);
    width: 25px; 
} 

#menubutton:hover #svg-menubutton .middle
{
    width: 40px;
}

#svg-menubutton .bottom
{
    transform: translate(0, 24px);
    width: 40px; 
}

.open #menubutton .top, .open #menubutton .bottom  
{
    transform: translate(0, 16px); 
    opacity: 0; 
}

.open #menubutton #svg-menubutton .middle
{
    width: 40px; 
} 

.open #menubutton .cross1
{ 
    transform: translate(4px, 28px) rotate(-45deg);
} 

.open #menubutton .cross2 
{ 
    transform: translate(7px, 0px) rotate(45deg);
} 


@media only screen and ( max-width: 500px ) 
{
    #menubutton 
    {
        top: 5px;
    }
    
    #menubutton p
    {
        display: none;
    }
    
    #menubutton svg
    {
        width: 30px;
        height: 30px;
        margin: 0px 0 0 2px;
    }
    
    .open #menubutton .top, .open #menubutton .bottom  
    {
        transform: translate(0, 5px);  
    }
    
    .open #menubutton #svg-menubutton .middle
    {
        width: 25px; 
    } 
    
    .open #menubutton .cross1
    { 
        transform: translate(4px, 18px) rotate(-45deg);
    } 

    .open #menubutton .cross2 
    { 
        transform: translate(6px, 0px) rotate(45deg);
    } 

}


/************************************************************************************************************************************/

#naviwrapper
{
     
    font-weight: 400;
    line-height: normal;
    padding: 3% 10%;
    margin: 85px 0 0 0;
    text-align: left;        
    position: fixed;
    background-color: var(--blue); 
    height: 70vh;
    z-index: 100;
    width: 100%;
    top: -100vh;
    transition: all 1s;
    box-sizing: border-box;
    overflow-y: auto;
}

#naviwrapper p
{
    padding: 10px 20px;
    margin: 0;
}

#naviwrapper.visible 
{
    top: 0;           
}

#naviwrapper.visible .menuebutton
{
    z-index: 500; 
    transition: 1s;
}


@media only screen and ( max-width: 500px )  
{
    #naviwrapper
    {
        margin: 55px 0 0 0;
        height: 70vh;
        height: calc(100vh - 55px);
     
    }
}

/************************************************************************************************************************************/
/************************************************************************************************************************************/

#navi
{        
    padding: 0;       
    margin: 0 auto;
    z-index: 1500;
    position: absolute;
    top: 0;
    left: 0; 
    width: 350px;
    height: 100%;                
}

#navi ul, #navi li
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
}

#navi a
{
    text-decoration: none;
}


#navi > ul
{
    list-style-type: none;
    margin: 0;
    padding: 10% 0 10% 10vw; 
    width: 350px;
    background-color: var(--blue);  
    position: relative;
    height: 87%;
}

#navi > ul > li
{
    vertical-align: text-top; 
    margin: 0 0 0 0;
    page-break-inside: avoid; 
    column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding: 2vh 0; 
    height: auto;
    font-size: calc(20px + (23 - 20) * ((100vw - 320px) / (1600 - 320))); 
    font-weight: 600; 
    text-transform: uppercase; 
    position: relative; 
    width: 315px; 
}


#navi > ul > li a, #navi > ul > li a:hover
{
    padding: 0; 
    color: #fff;
}


#navi > ul > li > ul
{
    width: 100%;
    left: 0;
    top: 0;     
    width: auto;    
    display: none;
    position: absolute;
    z-index: 2; 
    left: -10vw;
    transition: 0.2s;  
    padding: 25px 0 25px 40px;
}


#navi > ul > li:hover ul
{
    left: 315px; 
    display: block;  
}

#navi > ul > .li-aktiv ul
{
    left: 315px;   
}


#navi > ul > li:before 
{
    color: #fff;
    display: block;
    content: '';
    height: 2px;
    width: 0;
    background-color: #fff;
    position: absolute;
    left: 0;
    transition: all .3s ease 0s;
    bottom: 17px;
}

#navi > ul > li:hover:before
{
    width: 250px;
} 


#navi > ul > li > ul > li
{
    margin: 0;
    padding: 0px 0px;
    list-style-type: none;
    font-size: calc(17px + (19 - 17) * ((100vw - 320px) / (1600 - 320))); 
    font-weight: 300;
    text-transform: none;   
    display: block;
    width: 250px;
    margin: 0;
}

#navi > ul > li > ul > li > a
{
    padding: 0;
}


#navi > ul > li > ul > li > a:hover, #navi > ul > li > ul > li > a:active, #navi > ul > li > ul > li > a:focus
{
    color: #fff;
    padding: 8px 0; 
    color: var(--lightblue);  
}

#navi span
{
    margin: 0;
    padding: 8px 0;          
    color: var(--lightblue);  
    font-weight: 600;  
}





/************************************************************************************************************************************/


@media only screen and ( max-width: 1300px )
{   
    #navi > ul  
    {
        width: 280px !important; 
    }

    #navi > ul > li > ul
    {
   
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        column-gap: 0px;
    }
    
    #navi > ul > li:hover ul
    {
        left: 300px !important;   
    }
    
    #navi > ul > li > ul > li
    {
        padding: 0;
    }

}

@media only screen and ( max-width: 650px )
{
    
    #navi
    {
        width: 100%;
    }
    
     #navi > ul  
    {
        width: 90vw; 
    }

    #navi > ul > li > ul
    {
        left: 0;
        z-index: 100;
        position: relative;
        display: block;
        padding: 0;
    }
    
    #navi > ul > li:hover ul
    {
        left: 0px;   
    }

    #navi > ul > .li-aktiv ul
    {
        left: 0;    
    }
    
    #navi > ul > li:hover:before
    {
        width: 0px;
    }
    
    
}


#header.scroll #naviwrapper.visible
{
    margin: 45px 0 0 0 !important;
}

@media only screen and ( max-width: 650px )
{
    #header.scroll #naviwrapper.visible
    {
        height: calc(100vh - 45px);
    }

}

/************************************************************************************************************************************/





    #links .bisy:first-child img
    {
        width: auto !important;
        height: auto !important;
    }

    #links .bisy img
    {
        display: inline-block;
        float: left;
        margin: 0 10px 10px 0;
        width: 200px;
        height: auto;
    }

@media
only screen and ( max-width: 1000px )
{
    #links .bisy img
    {
        display: inline-block;
        float: left;
        margin: 0 10px 10px 0;
        width: 200px !important;
        height: auto !important;
    }

    #links .bisy h1
    {
        font-size: 28px;
    }
}

@media
only screen and ( max-width: 550px )
{
    #links .bisy img
    {
        display: inline-block;
        float: left;
        margin: 0 2% 10px 0;
        width: 48% !important;
        height: auto !important;
    }
}

    #inhalte #links .bisy .width-auto
    {
        width: auto !important;
        height: auto !important;
    }

    #links .bisy table td
    {
       padding: 2px 5px;
    }

    #links .bisy .linkButton
    {
    	text-align:center;
    	margin:0;
        padding:0;
        display: inline-block;
    }

    #links .bisy .linkButton a
    {
    	background-image: none;
    	padding:10px;
    	margin:0;
        display: block !important;
    }

    #links .bisy .linkButton a:hover, #links .bisy .linkButton a:active, #links .bisy .linkButton a:focus
    {
    	background-image: none;
    	padding:10px;
    	margin:0;
        text-decoration:none !important;
        display: block !important;
    }

/**************************************************************************************************/

    #rechts #bisy
    {
        margin: 0 0 5px 0;
    }

    #rechts #bisy ul
    {
    	margin: 0px;
        padding:0;
        background-color: #e3e3e3;
    }

    #rechts #bisy ul li
    {
    	margin: 0px;
    	padding: 0px;
        list-style-type:none;
        border-bottom: 1px solid #c5c3c3;
    }

    #rechts #bisy a
    {
    	color: #505050;
    	display:block;
    	margin: 0;
        padding: 3px 0 3px 10px;
        text-decoration:none;
    }

    #rechts #bisy a:hover
    {
        padding: 3px 0 3px 10px;
    	color: #2e2e2e;
    	background-color: #cdcdcd;
    	display:block;
    	margin: 0;
        text-decoration:none;
    }

/**************************************************************************************************/

    #rechts #bisy .open
    {
    	margin: 1px 0px;
        padding: 10px;
        background-image: url(/layout/navi-h2-open.png);
        background-position: right center;
        background-repeat: no-repeat;
        background-position: 99% 50%;
        background-color: #007ca8;
        color: #fff;
    }

    #rechts #bisy .close
    {
        margin: 1px 0px;
        padding: 10px;
        background-image: url(/layout/navi-h2-close.png);
        background-position: right center;
        background-repeat: no-repeat;
        background-position: 99% 50%;
        background-color: #007ca8;
        color: #fff;
    }

    #rechts #bisy ul
    {
    	display: none;
    }

    #rechts #bisy h2
    {
    	font-size: 18px;
        margin-top: 0 !important;
    }

.Gastgeber .register
{
    display: block; 
}

.Gastgeber .register a
{
    margin: 0 2px;
    display: inline-block;
    padding: 3px 15px;
    border: 1px solid var(--blue);
    text-decoration: none !important;
}

.Gastgeber .register span
{
    margin: 0 2px;
    display: inline-block;
    padding: 3px 15px;
    border: 1px solid var(--blue);
    color: var(--blue);
    text-decoration: none !important;
}

/* Hover nur auf Geräten mit Hover-Funktion (Desktop, Maus) */
@media (hover: hover) and (pointer: fine) {
    .Gastgeber .register a:hover {
        border: 1px solid var(--blue);
        background-color: var(--blue);
        color: #fff !important;
    }
}

.Gastgeber .register span
{
    border: 1px solid var(--blue);
    background-color: var(--blue);
    color: #fff !important;
    pointer-events: none;
}

/******* Gastgeberliste ***********************************************/

#links .Gastgeber .breadcrump
{
    background-color: var(--lightblue);
    color: #fff;
    padding: 5px 25px;
    margin: 15px 0 0 0 !important;
    display: inline-block;
    z-index: +1;
    position: relative;
}


#links .Gastgeber h3
{
    margin: 5px 0;
}

#links .Gastgeber .breadcrump a
{
    color: #fff;  
}

#links .Gastgeber .Hausbeschreibung
{
    margin: 0px 0 20px 0;
    position: relative;
} 

#links .Gastgeber .Hausbeschreibung .sterne
{
    width: auto !important;
}

#links .Gastgeber .eintrag
{
    border-bottom: 1px solid #000;
    padding: 5px 0;
}


#links .Gastgeber .eintrag ul
{
    margin: 15px 0; 
    padding: 0;
}

#links .Gastgeber .eintrag li
{
    margin: 5px 1px 5px 0; 
    padding: 0;
    display: inline-block;
    list-style-type: none;
}

#links .Gastgeber .eintrag li a
{
    border: 1px solid var(--blue);
    padding: 10px;
    display: inline-block;
}

#links .Gastgeber .eintrag li a:hover
{
    border: 1px solid var(--blue);
    padding: 10px;
    background: var(--blue);
    color: #fff !important;
    text-decoration: none !important;
}

#links .Gastgeber .eintrag .Hausbeschreibung
{
    display: flex;
    justify-content: space-between;
    gap: 3%;
    margin: -25px 0 30px 0;
}

#links .Gastgeber .eintrag .Hausbeschreibung .Bild
{
    width: 40%;    
    height: 35vh;
    overflow: hidden;
}

#links .Gastgeber .eintrag .Hausbeschreibung .Bild p
{
    width: 100% !important;
    height: 100% !important;  
    object-fit: cover;  
}

#links .Gastgeber .eintrag .Hausbeschreibung .Bild img
{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    float: none;  
}

#links .Gastgeber .eintrag .Hausbeschreibung .Text
{
    width: 65%;
}



#links .Gastgeber .eintrag .Hausbeschreibung .PreisAb,
#links .Pauschalen .Preis
{
    margin: 0;      
    padding: 10px 0px;
    font-weight: 400;
    display: inline-block;
}

#links .Gastgeber .eintrag .Hausbeschreibung .PreisAb span,
#links .Pauschalen .Preis span
{
    font-size: 22px;
    font-weight: 700; 
}
#links .Pauschalen #
{
    display: block;
}

#links .Gastgeber .eintrag .Hausbeschreibung .icons img
{
    margin: 0 2px 0 0;
    height: 30px;
    border:1px solid #000;
    padding: 2px;
}

#links .Gastgeber .Hausbeschreibung .linkButton
{
    position: absolute;
    right: 0;
    bottom: 0;
}

/******* Hausteintrag ***********************************************/

.Gastgeber .hauseintrag .bild
{
    width: 100%;
    display: block;
}

.Gastgeber .hauseintrag .bild img
{
    width: 100% !important;
    height: auto !important; 
    float: none !important;
    max-width: 700px;
}

.Gastgeber .hauseintrag .text
{
    width: 100%;
    margin: 20px 0;           
}

#links #map 
{
        display: none !important;
    }

/******* Gastgeber infoseiten ***********************************************/  

#links .GastgeberNavi
{
    margin: 25px 0; 
    padding: 0;
}

#links .GastgeberNavi ul 
{
    margin: 0; padding: 0;
}

#links .GastgeberNavi li
{
    display: inline-block;
    list-style-type: none; 
}

#links .GastgeberNavi li a
{
    display: inline-block;
    list-style-type: none;
    padding: 5px 20px;
    border: 1px solid var(--blue);
}

#links .GastgeberNavi li a:hover
{
    background-color: var(--lightblue);
}


#links .Themenseite
{
    padding: 15px;
}

/******* Pasuschalen ***********************************************/ 


#links .Pauschalen > div 
{
    margin: 0;
    display: block;
    border-bottom: 1px solid #000;
    padding: 15px 0 25px 0;
}

/******* rechts ***********************************************/  

#rechts .GastgeberInfos div, #rechts .ThemenseiteBilder div
{
    padding: 0 0 15px 0 !important;
}