@charset "utf-8";
 
/*
* CSS-Design
* Online-Schule fr Gestaltung: Webdesign-Kurs
* RESPONSIVE WEBSEITE
*/
 
 
/* Reset * * * * * * * * */
 
 
*{
        margin: 0;
        padding: 0;        
}
 
 
html{        
        font-size: 100%; /* Browserstandard: 16px */
}
 
img{
        max-width: 100%;
}


/* Reset * * * * * * * * */ 
 
*{    
margin: 0;    
padding: 0;        
-mozbox-sizing: border-box;    
-webkit-box-sizing: border-box;    
box-sizing: border-box; 
}



/* Layout * * * * * * * * */
 
body{
        font-family: Helvetica, Arial, sans-serif;
        text-align:center;
    
        
       
}
 
 
.wrapper{
        max-width: 960px; /*100% */
        margin: 0 auto;
        overflow: hidden;
      
}
 
 
header{
        background: transparent; 
        color: #333;
    /*     float: center;   durch CSS validotor rausgenommen */ 
            display: flex; 
          
       
}


.teaser   {
         text-align: center;
         background: no-repeat url('../images/hundegruppe1.jpg');
         background-position: center; /* damit das ganze bild bei der mobilen Ansicht erscheint*/
         
         
}
.hr   {
         text-align: center;
         
}
 
#content_pension_1{ 
            background: white;
            color:#666666; 
               /*     float: center;   durch CSS validotor rausgenommen */ 
            display: flex; 
}      
 
 
#content_pension_2{ 
            background: white;
            color:#666666; 
        /*     float: center;   durch CSS validotor rausgenommen */ 
            display: flex; 
}      


#content_team{ 
            background: white;
            color:#666666;
            display: flex; 
}      


#content_preise{ 
            background: white;
            color:#666666;
            display:flex;
}      

#content_galerie{ 
            background: white;
            color:#666666;
            display:flex; /* Endlich hat es mit dieser Angabe geklappt, dass die Bilder zentriert sind - margin 0 auto beim wrapper4ist auch noch eine wichtige Angabe */
      
}      

#content_galerie_tablet {
display:none;
}



#content_kontakt{ 
            background: white;
            color:#666666;
            display:flex; /* Endlich hat es mit dieser Angabe geklappt, dass die Bilder zentriert sind - margin 0 auto beim wrapper4ist auch noch eine wichtige Angabe */
      
}      



#content_kontakt_maprouter{ 
            background: white;
            color:#666666;
            display:flex; /* Endlich hat es mit dieser Angabe geklappt, dass die Bilder zentriert sind - margin 0 auto beim wrapper4ist auch noch eine wichtige Angabe */
      
}     


footer{
        width: 100%;
        float: left;
        background: #fff;        
        margin-top: 25px;
        color: #333;
        text-align:center;
}



.col_1, .col_1_header1,.col_1_header2, .col_2_3, .col_1_3, .col_1_2  {
	margin:20px 10px;
	}

.col_1{
    width:95%; /* 940px abgerundet */
    align-items:center;
  
  
 	}
    
.col_1_header1{
    width:100%; /* 940px abgerundet */
    /*height:244px;*/
    align-items:center;
    text-align:center;
  } 
.col_1_3_header1{
    width:12%; /* 940px abgerundet */
   /*height:244px;*/
    float:left;
    align-items:center;
    text-align:center;
     }
   
.col_1_3_header1_right{
    width:5%; /* 940px abgerundet */
   /* height:244px;*/
    float:left;
    align-items:center;
    text-align:center;
        }
.col_1_3_header1_middle{
    width:80%; /* 940px abgerundet */
    /*height:244px; ausgeblendet wegen mobilen navigation*/ 
    float:left;
    align-items:center;
    text-align:center;
     }     
     
 
  
     
.col_1_header2{
	width: 97%;  /*940px abgerundet ; Total 960px weniger 2 x 10px margin*/
    height:70px;
    align-items:center;
    text-align:center;
    }  
     
.col_1_header3{
	width: 97%;  /*940px abgerundet ; Total 960px weniger 2 x 10px margin*/
    height:70px;
    align-items:center;
    text-align:center;
  	}       
    
 .col_1_teaser{
	width: 100%;  
    height:437px;
    align-items:center;
    text-align:center;
	}  
     
     
.col_2_3{
	width:63%;    /* Total 960px weniger 4 x 10px margin 920px  2/3 = 610px */
    float:left;
	}
    
    
  .col_2_3_right{ 	
  width:63%; 
  float:right;  
  border-radius:7px;
  
}
.col_1_3{
    width:31%;   /*Total 960px weniger 4x10px margin 920px 1/3 = 306px*/
    float:left;
   
    
	}    
    
.col_1_2{
    float:left;
    width:47%;
    display:flex;
    text-align:center;
	}
    
    
    
    
 /* HR Container* * * * * * * * */ 
    
.hr_box{ 
 
width: 100%; 
height:60px; 
margin:auto; 
float: left; 
display: flex; 
justify-content: center;
vertical-align:baseline;
color:#666666; 
}

.before{ 

width: 35%; 
height:50px; 
margin:10px 10px 10px 10px;
float: left; 
text-align:center;
color:#666666;

}

#title_hr, #title_hr_team, #title_hr_preise, #title_hr_galerie{ 

width: 11%; 
height:50px; 
margin:15px 10px 5px 10px;
float: left; 
text-align:center;
color:#666666;
vertical-align:bottom;
}


#title_hr_kontakt{ 

width: 11%; 
height:50px; 
margin:20px 15px 0px 15px;
float: left; 
text-align:center;
color:#666666;
}




#title_hr_pension{ 

width: 11%; 
height:50px; 
margin:10px 15px 10px 15px;
float: left; 
text-align:center;
color:#666666;
}


.after{ 

width: 35%; 
height:50px; 
margin:10px 10px 10px 10px;
float: left; 
text-align:center;
color:#666666;
}


.hr{ 
color:#666666;
margin-top:20px;
}

.burger {
  width: 35px;
  height: 5px;
  background-color: grey;
  border-radius:18px;
  margin: 6px 0;
}

 /* Typographie* * * * * * * * */ 

h1, h2, h4{
        font-weight: normal;        
        margin-bottom: 15px;
        font-family: 'Manrope', sans-serif;
        font-weight:200;
        
}



h3{
        font-size: 18px;
        font-size: 1.125rem;
        font-family: 'Playfair Display', serif;
        font-weight:400;
        
}


h5{
 font: 400 16px/16px'Manrope', Helvetica, Arial, serif;
 line-height:35px;
}
p{
        font-size:16px;
         font-size:1rem;
         margin-bottom: 5px;
}


.oben{
        font-size:12px;
         font-size:0.75rem;
         margin-bottom: 15px;
         color:grey;
}


 /* Navigation* * * * * * * * */ 


#navigation{
margin: 50px 0 0;    
   
}
 
#navigation ul li{
        display: inline;
}
 
#navigation a{
        color: #7f7f7f;
        text-decoration: none;
        padding: 7px 20px;
        margin: 0 10px;
       
}
 
 
#navigation a:hover{
        color: #7f7f7f;
        background: #fff;
        font-weight:bold;
}





table{
width:100%
}

th{  
text-align:left;
}
 
td{ 
width:200px;
text-align:left;
}

tbody td:nth-child(even) { /* Formatierung der geraden Zeilen*/
width:130px;
}




 /* Einfaden * * * * * * * * */ 


.mein-element {
		
		opacity: 0;
		transition: opacity 1s ease-in-out;
	
	}

	.visible {
		opacity: 1;
	}



/* Formular */
 
label       { 
            display: block;
            cursor: pointer;
            margin-bottom: 6px;
            font: 400 16px/16px'Manrope', Helvetica, Arial, serif;
            }
textarea    {
            height: 100px;
            width:300px;
            }     
    

/* Maprouter */   
    
iframe {
		
		width: 900px; 
        height: 300px;
        border:0px;
       
       
       /* frameborder="0" scrolling="no" marginheight="0" marginwidth="0" rausgenommen aufgrund html validitor*/
		}
        
        
        
.mapouter{position:relative;text-align:right;height:300px;width:900px;}
.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:900px;}
    
@media only screen and (max-width: 759px) {
 
header{
background: white;  /* Viollet zum testen */
}
 
.wrapper{
width: 100%;
}

.col_1_3_header1_right{ /* wird ersetzt durch Spalte Mobile Navigation*/
   display:none;  
     }

.col_1_header2 {
display:none;
}

.col_1, .col_1_header1,.col_1_header2, .col_2_3, .col_1_3, .col_1_2 {
width: 96%;
}






.central {   /*damit die Bilder in der mobilien Version zentriert sind*/
display: block;
margin-left: auto;
margin-right: auto;

}


#content_galerie_tablet {
display:none;
}

#navigation {
display:none;
}

.col_1_3_header1_middle   
 
   {  /*das Logo ausblenden */
display:none;
	}  


.col_1_3_header1_middle_mobile{
    width:70%; /* 940px abgerundet */
    /*height:244px; ausgeblendet wegen mobilen navigation*/ 
    float:left;
    align-items:center;
    text-align:center;
     }     


}


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



.col_1_header3{  /*die mobile Navigation für grössere Bildschirme ausblenden*/
display:none;
	}       

    
.col_1_3_header1_mobile
    {  /*die mobile Navigation für grössere Bildschirme ausblenden*/
display:none;
	}       

.col_1_3_header1_middle_mobile{
    display:none;
     }       

    
}