@charset "UTF-8";
/* CSS Document */
/* Farben #499360 #97BAA4 #295651 #232941 #eaf1ed*/





body{
    font-family: frank-new, sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #545456;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
}
.clear{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    width: 0px;
    height: 0px;
    clear: both;
}
.form{
	margin-right: 20px;
	margin-left: 20px;	
}
.input{
	padding: 4px;
	width: 70%;
	border: 1px solid #6B6C6E;
	float: right;
	margin-bottom: 25px;
}
.nachricht{
	padding: 4px;
	width: 70%;
	border: 1px solid #6B6C6E;
	float: right;
}
.senden{
	padding: 4px;
	width: 70%;
	border: 1px solid #6B6C6E;
	float: right;
	margin-bottom: 25px;
	background-color: #DADADC;
}

h1{
    color: #8E7BC4;
}
h2{
    color: #A598C6;
}
.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





header{
    background-color: #a498c6;
    color: #FFFFFF;
    width: 100%;
    padding-top: 8px;    
    height: 30px;
}
header .w1240{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
header .tel_oben{
    float: left;    
} 
header .tel_oben a{
    color: #FFFFFF;
    text-decoration: none;
}
header .mail_oben{
    float: left; 
}
header .mail_oben a{
    color: #FFFFFF; 
    text-decoration: none;
}
header .implinks_oben{
    float: right; 
}
header .implinks_oben a{
    color: #FFFFFF; 
    text-decoration: none;
}

#logozeile{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    height: 120px;
}



/*Drehendes Logo*/
.ds-logo {
    height: 110px;
    width: 322px;
    perspective: 1500; /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */
    float: left;
    position: relative;
    margin-top: -20px;
}

.ds-logo:hover .turnaround { 
   transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */ 
}

.ds-logo .front {
    background-repeat: no-repeat;
    background-position: 0 0 no-repeat;
    background-image: url(../images/logo_ds_vorn.jpg);
}

.ds-logo .back { 
   background: url(../images/logo_ds_hinten.jpg) 0 0 no-repeat; 
}

.turnaround {
   transition: .5s /* Die Drehung soll 0,5 Sekunden dauern */;
   transform-style: preserve-3d; /* Kind-Elemente  (.front + .back) sollen ihre 3D-Eigenschaften behalten*/
   position: relative;
   height: 100%;
}

.front,
.back {
   backface-visibility: hidden /* Die Rückseite von Elementen soll unsichtbar sein */;
   position: absolute;
   width: 100%;
   height: 100%;
}

.front { z-index: 2; }

.back {
   transform: rotateY(180deg) /* Die Rückseite des Logos wird umgedreht, um dann bei der Drehung der gesamten Szene vorne zu sein :) */;
   z-index: 1;
}



nav{
    margin-top:50px;
}


/* SLIDESHOW */
#slidercontainer{
    width: 100%;

    position: relative;
    z-index: 5;
	}

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  max-width: 2000px;
  margin-right: auto;
  margin-left: auto;
  z-index: 5;	
  }
  
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
	display: block;
	height: auto;
	float: left;
	width: 100%;
	border: 0;
	max-width: 2000px;
	margin-right: auto;
	margin-left: auto;
  }



#textbox{
    max-width: 60%;
    max-height: 80%;
    z-index: 1100;
    bottom: 25px;
    right: 50px;
    right: 8%;
    position: absolute;
    background-color: #EAE1F5;
    padding-top: 0px;
    padding-right: 15px;
    padding-bottom: 0px;
    padding-left: 15px;
    opacity: 0.85;
    color: #6557B7;
    border-radius: 10px;
}
@media screen and (min-width:900px) {
#textbox{
	max-width: 40%;
}
}
#textbox h1{
    margin-top: 10px;
    margin-bottom: 0px;
    font-size: large;
    color: #6557B7;
}




.angebote-container {
    display: flex;
    justify-content: space-between;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 35px;
    margin-bottom: 55px;
}
.angebote-container .ds-angebote{
    border: 1px solid #f2f2f3;
    min-height: 50px;
    width: 25%;
    -webkit-box-shadow: 5px 5px 20px #C8C8C8;
    box-shadow: 5px 5px 20px #C8C8C8;
    padding-left: 25px;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
}
.angebote-container .ds-angebote img{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.angebote-container .ds-angebote a{
    color: #7A58A7;    
}

/*Scrolleffekt*/
.ds-angebote {
    opacity: 0;
  transition: opacity .5s ease-in-out;
}
.visible {
    opacity: 1;
}
/*Scrolleffekt*/



#inhalt_start{
    position: relative;
    margin-bottom: 50px;
    background-color: #EBEAEF;
}
#inhalt_start .w1240{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #EBEAEF;
}

#inhalt_start .start_text4{
    width: 60%;
    padding-top: 0px;
    float: left;
}
#inhalt_start .start_bild4{
    width: 30%;
    float: right;
    margin-top: 25px;
}
#inhalt_start .start_bild4 img{
    /*height: 442px;
    height: 100%;*/
    max-width: 334px;
    width: 100%;
}


#inhalt{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
}


footer{
    background-color: #A497C5;
    margin-bottom: 0px;
}
footer .footerbox{
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 50px;
    margin-bottom: 0px;
    color: #FFFFFF;
    display: flex;
    justify-content: space-between;
}
footer .footerbox .container {
    border: 0px;
    min-height: 50px;
    width: 25%;
    padding-left: 0px;
    padding-top: 25px;
    padding-right: 0px;
    padding-bottom: 25px;
}
footer .footerbox .container h2{
    margin-top: 0px;
    color: #FFFFFF;
    margin-bottom: 0px;
}
footer .footerbox .container .footerlink{
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    padding-top: 8px;
    padding-bottom: 8px;
    text-decoration: none;
    width: 100%;
    display: block;
    padding-left: 10px;
}
footer .footerbox .container .footerlink:hover{
    background-color: #7D6BAE;
}
footer .footerbox .container .footerlink_adresse{
    color: #FFFFFF;
}




/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media screen and (max-width:800px){
header .tel_oben{
    float: right;    
}    
header .mail_oben{
    display: none;
}
header .implinks_oben{
    display: none;
}

.ds-logo {
    height: 110px;
    width: 322px;
    perspective: 1500; /* Hier wird die Perspektive der gesamten Szene festgelegt. Der Wert hat Auswirkung auf die Verzerrung */
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
#slidercontainer{
	display: none;
	}
nav{
    margin-top: 10px;
}    

    
    
.angebote-container {
    display: inherit;
    margin-top: 150px;
}
.angebote-container .ds-angebote{
    border: 1px solid f2f2f3;
    min-height: 50px;
    width: 80%;
    -webkit-box-shadow: 5px 5px 20px #C8C8C8;
    box-shadow: 5px 5px 20px #C8C8C8;
    padding-left: 25px;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 25px;
}

#inhalt_start{
    background-color: #eaf1ed;
    margin-top: 40px;
    background-image: url(../images/inhalt_start_hg2.png);
}    
#inhalt_start .start_text4{
    width: 100%;
    padding-top: 25px;
    float: none;
    padding-bottom: 25px;
}
#inhalt_start .start_bild4{
    display: none;    
}    

    
    
footer .footerbox{
    display: inherit;
}
footer .footerbox .container {
    border: 0px;
    min-height: 50px;
    width: 100%;
    padding-left: 0px;
    padding-top: 25px;
    padding-right: 0px;
    padding-bottom: 50px;    
}
    
}