@charset "utf-8";
 
/*
* CSS-Design
* Grossleibnerhof neuer Versuch responsive
* Bio Hof
*/

/* Reset für responsive Design * * * * * * * * */
html{        
        font-size: 100%; /* Browserstandard: 16px */
}
 
img{
        max-width: 100%;
}

 

/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;
}

body{
	font: 400 20px/25px'Roboto Condensed', Helvetica, Arial, sans-serif;
	color:  #2a2111;
}

/* Layout * * * * * * * * */

.wrapper{
	width:100%; /* 940px*/
	margin: 0 auto;
	overflow: hidden;
}



.wrapper_mobile{
	width:100%; /* 940px*/
	margin: 0 auto;
    background-color: #5BB13E;
}




#wrapper{   /* für das submenu - haben wir extra einen neuen wrapper ohne overfloaw erstellt */
        width:100%; /* 940px*/
        margin: 0 auto;
       } 

#header{
	background: #5BB13E;
    padding: 22px 0;
    
}

#header_mobile{
               background-color: #5BB13E;
               height:200px;
               overflow-x:hidden !important;
               max-width:100%;
}

#teaser{
    background: no-repeat url('../images/aepfel.jpg');
    background-position: center; /* damit das ganze bild bei der mobilen Ansicht erscheint*/
    background-color: green; 
    background-size:cover
  
}

#content_grey{
	background: #988B7C;
    color:#f7f9ef;
    padding-bottom:20px;
    padding-top:20px;
}

#content_white{
	background: #f7f9ef;
    color:#756450;
}

#content_white_mobile{
background: #f7f9ef;
    color:#756450;
}

#content_white_tablet{
background: #f7f9ef;
    color:#756450;
}


#footer{
	background: #5BB13E;
    color:#f7f9ef;
}

#footer_mobile{
	background: #5BB13E;
    color:#f7f9ef;
}



/* Spalten * * * * * * * * */

.col_1, .col_1_2, .col_1_3, .col_1_4, .col_2_3, .col_3_4, .col_2_4{
	float: left;
	margin: 20px 10px;
	}


.col_teaser_1{ 
    width:97%; /* 920px*/
    height:600px;
    position:relative; 

}
.col_1{ 
	width:97%; /* 920px*/
    padding-top:30px;
    padding-bottom: 20px;
    position:relative; /* bei der mobile Version Einspalter Produkte */
}


.col_1_2{
	width:47%; /* 450px*/
    height:100px;
}

.col_2_3_mobile{
	width:58%; 
    float:left; /* damit die 2 schön col_mobile schön nebeneinander liegen*/
    padding-top:20px;
    background-color: #5BB13E;
      margin: 0px 10px;
}

.col_1_3_mobile{
	width:29%; 
    float:right;
    padding-top:20px;
    background-color: #5BB13E;
    margin: 0px 10px;
    display: flex; /* damit der Burger in der resp Navigation rechtsbündig ist */
    justify-content:right;   /*aber Achtung die beiden gehören display flex und justify content spielen zusammen*/

     
}



.col_1_3{ 	
 width:29%; /* 280px*/

}

.col_1_3_right{ 	
  width:29%; /* 280px*/
  float:right;

}

.col_2_3{ 	
  width:65%; /* 620px*/
  
}
.col_2_3_right{ 	
  width:65%; /* 620px*/
  float:right;  
  margin: 20px 0 20px 20px;
  border-radius:7px;
  
}

.col_1_4{ 	width:22%; /* 215px*/
          /*  height:148px;  vielleicht braucht diese angabe nicht siehe index.html */
            position:relative;
            padding-bottom:20px;
            padding-top:30px; /*damit wir oben zum header ein bisschen abstand haben bei leistungen.html */ 
             
            
            
}

.col_3_4{ 	width:72%; /* 685px*/
            padding-bottom:20px;
            padding-top:30px; /*damit wir oben zum header ein bisschen abstand haben bei leistungen.html */ 
}

.col_2_4{ 	width:47%; /* 450px*/
            padding-bottom:20px;
            padding-top:30px; /*damit wir oben zum header ein bisschen abstand haben bei leistungen.html */ 
         
}


/* Navigation */ 
ul#navigation{ 
float: right; 
margin: 135px 10px 0px 0;
}


ul#navigation li{ 
display: inline; 
margin: 0 0 0 25px; 
list-style: none; 
position:relative; /* relative Punkt zum Submenu Feld */
}

ul#navigation li a{
color: #594420;
text-decoration: none; 
text-transform: none; 
font-size: 1.56rem; /*25px*/ 
font-weight: 800; 
font-family: 'Roboto Condensed', sans-serif;
padding:15px 0;
padding-left:15px; /* der Wert der macht, dass die Submenu bündig stehen */
}

ul#navigation li a:hover{     
color: #f7f9ef;
}

ul#navigation li .active{    /*eigentlich hätte ich .active mit hover zusammenfassen können aber wegen der Spezifität geht dies nicht*/ 
color: #f7f9ef;
}



/*Drop-Down Menu*/
#navigation ul li a {
display:block;
text-transform:none;
font-size: 1.25rem; /*20px*/ 
padding:10px 35px 10px 15px;
border-bottom: 1px solid #ffffff; /* weiss zum besser sehen */
}

ul#navigation ul{    /* der ganze Submenu Block */
position: absolute; 
top:40px;
left: 0;
background:green;
display:none;
z-index:9999;
}


ul#navigation li:hover ul { 
display:block;
}

ul#navigation ul li{ /* das einzelne Submenu Feld allgemeine Definitionen zusätzliche Definitionen*/
margin:0;
}

/* Subnavigation*/ 

#subnavigation li{
border-bottom: 1px solid #594420;
list-style:none;
width:100px;
margin:0;
}

#subnavigation li a{
font-size:1.25rem; /*20px*/ 
color:#594420;
text-transform:uppercase;
display:block; /* dieser ist wichtig, damit das genze Feld mousover sensitiv ist*/
padding:10px 0; /* dieser ist wichtig, damit das genze Feld mousover sensitiv ist*/
margin:0;
}

#subnavigation li a:hover{
color:green;
}


/* Damit die Schrift im Bild steht siehe index.html*/ 
.img-teaser{
        position:absolute;
        top: 200px; 
        left:5px;
        background:transparent;
        padding: 5px 15px 5px 20px ;
        color: #f7f9ef;
        text-transform: none;
        font-size: 6.25rem; /*100px ausgerechnet */ 
        font-weight:bold;
        line-height: 120px;
        font-family: 'Marck Script', cursive;
        border-radius:10px;
}    



        
.img-content_white{
        position:absolute;
        top: 110px; 
        left:5px;
        background:transparent;
        padding: 5px 15px 5px 20px ;
        color: #f7f9ef;
        text-transform: none;/* uppercase - nur Grossschrift  lowercase nur Kleinschrift*/
        font-size: 2.5rem;/*40px*/ 
        font-family: 'Marck Script', cursive;
        border-radius:10px;
}


.img-content_white_mobile{
        position:absolute;
        top: 135px; 
        left:160px;
        background:transparent;
        padding: 5px 15px 5px 20px ;
        color: #f7f9ef;
        text-transform: none;/* uppercase - nur Grossschrift  lowercase nur Kleinschrift*/
        font-size: 2.5rem;/*40px*/ 
        font-family: 'Marck Script', cursive;
        border-radius:10px;
}

.img-content_white_tablet{
        position:absolute;
        top: 135px; 
        left:300px;
        background:transparent;
        padding: 5px 15px 5px 20px ;
        color: #f7f9ef;
        text-transform: none;/* uppercase - nur Grossschrift  lowercase nur Kleinschrift*/
        font-size: 2.5rem;/*40px*/ 
        font-family: 'Marck Script', cursive;
        border-radius:10px;
}



/* Typografie */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Marck Script', cursive;
	font-weight: 600;
	margin: 0 0 10px 0;
}

h1{
   font-size: 3.750rem;/*60px*/ 
   line-height:50px;
   color:#594420;
}

h2{
   font-size:3.125rem; /*50px*/ 
   line-height:50px;
   color:#594420;
}

h3{
   font-family: 'Roboto Condensed', sans-serif;
   font-weight:bold;
   font-size:1.375rem;/*22px*/ 
   margin: 0 0 0 0;
}

h4{
   font-family: 'Roboto Condensed', sans-serif;
   color: #f7f9ef;
   line-height:50px;
   font-size: 3.125rem;/*50px*/ 
   font-weight:100;
   margin: 0 0 0 0;
   padding-top:500px; /* dieser obenabstand benötige ich für den Titel im Teaser auf der index.html*/
   padding-left:20px; /*damit die Schrift beim Teaser bei der mobile Ansicht nicht am linken Rand klebt */
}

h5{
   font-size:3.125rem;/*50px*/
      color: #f7f9ef;
    line-height:50px;
 
}   
h6{
   font-family: 'Roboto Condensed', sans-serif;
   font-size:1.188rem;/*19px*/
   color:#594420;
}

/*footer links */
a{
	color:#f7f9ef;
	text-decoration: none;
}

#footer a:hover{
	color: #756450;
}

p{
	margin-bottom: 5px;
    line-height:30px;
}

p.floatright{   /*damit beim Footer die mediabilder ganz rechts sind */ 
	margin-bottom: 5px;
    float:right;
}

.alignright{   /* damit die Bilder bei Produkte den Text schön umfliessen*/
	margin: 0 0 0 20px;
    float:right;
    border-radius: 7px;
}	
    
.alignleft{   /* damit die Bilder bei Produkte den Text schön umfliessen*/
	margin: 0 20px 0 0;
    float:left;
    border-radius: 7px;
}	
        

    
.button{
	border-radius: 7px;
   
}

hr{ 
background-color: #594420; 
border: 0; 
height: 1px;    
width: 100%;
float:left;
margin: 20px 10px;
}


blockquote{ /* für Zitate bwz eingerückte Texte müssen wir neu formatieren da wir alles geresetet haben */
            margin: 12px 0 24px 25px;
            font-style: italic; 
            font-family: Georgia, Times, serif; 
            color: #666;
}

blockquote:before {
content: '„';
color: #ff621c;
font-size:40px;
}

blockquote:after {
content: '"';
color: #ff621c;
font-size:40px;
line-height:-100px;
}


/* Formatierung der ueberuns Seite */

ul, ol{ 
margin: 0 0 12px 20px; 
}

ul{ 
list-style: none; 
list-style-image: url(../images/pfeil.gif);    
}

table, tr, th, td, thead, tbody{ /* für die Seite über uns*/
border-collapse: collapse;
}
 
table{
margin: 12px 0 24px;
}

 
thead tr{ /*Tabellenzeile des Tabellenkopfes formatiert*/
background: #ff5e1c;
color: #fff;
}
 
th{   /*nnenabstand, damit der Text nicht zu dicht am Rand steht*/
padding: 3px 0;
}
 
td{ /*abellenzellen des Inhalts bekommen einen Rahmen nach oben und rechts, der die Zeilen und Spalten optisch besser trennt, sowie auch etwas Innenabstand.*/
border-top: 4px solid #fff;
padding: 3px 6px;
border-right: 1px solid #fff;
}
 
tbody tr:nth-child(even) { /* Formatierung der geraden Zeilen*/
background-color: #e4e4e4;
}
     
tbody tr:nth-child(odd) { /* Formatierung der geraden Zeilen*/
background-color: #f2f3f3;
}


/* Formular */
 
label { 
display: block;
cursor: pointer;

margin-bottom: 6px;
font: 400 18px/25px'Roboto Condensed', Helvetica, Arial, sans-serif;

}
 
input[type='text'],input[type='checkbox'], input[type='radio'],
textarea, select {
margin-bottom: 24px;
font: 400 18px/25px'Roboto Condensed', Helvetica, Arial, sans-serif;

}
 
input[type='text'], textarea, select {
width: 400px;
border: 1px solid green;
padding: 5px;
font: 400 18px/25px'Roboto Condensed', Helvetica, Arial, sans-serif;

}
 
textarea {
height: 120px;

}
 
input:hover, textarea:hover {
border: 1px solid #594420;
}
 
input:focus, textarea:focus {
border: 1px solid #594420;

}
 
input[type='submit'], input[type='reset']{
border: 0;
cursor: pointer;
margin-right: 20px;
background: green;
padding: 4px 10px;
color: #fff;
font-size: 16px;
border-radius: 4px;

}
 
input[type='reset']{
background: #849399;
color: #fff;
}
 
input[type='submit']:hover, input[type='reset']:hover{
background: green;
color: #fff;
text-shadow: none;
font-weight:500;
}



/* Media Queries * * * * * * * * */  
 
@media only screen and (max-width: 780px) {



#header{
display:none;
}

.img-teaser{
        font-size: 3.25rem; 
        top:100px;
}  
  
h4{
    line-height:20px;
   font-size: 1.625rem;
    /* padding-top:500px; /*dieser obenabstand benötige ich für den Titel im Teaser auf der index.html*/
}

#content_white{
display:none;
}

#content_white_tablet{
display:none;
}




/* Bilder zentrieren bei Mobile Version */
.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

/* Bilder zentrieren bei Mobile Version */

.central {
display: block;
margin-left: auto;
margin-right: auto;

}


#footer_mobile{
	background: #5BB13E;
    color:#f7f9ef;
}

#footer{
        display:none;
}

}






@media only screen and (min-width: 781px) and (max-width: 900px) { /*tablet version*/
 


#header_mobile{
background-color: #5bb13e;
height:200px;
}

#header{
display:none;
}

.img-teaser{
        font-size: 3.25rem; 
        top:100px;
}  
  
h4{
    line-height:20px;
   font-size: 1.625rem;
    /* padding-top:500px; /*dieser obenabstand benötige ich für den Titel im Teaser auf der index.html*/
}

#content_white{
display:none;
}


#content_white_mobile {
display:none;
}


/* Bilder zentrieren bei Mobile Version */
.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}

/* Bilder zentrieren bei Mobile Version */

.central {
display: block;
margin-left: auto;
margin-right: auto;

}


#footer_mobile{
	background: #5BB13E;
    color:#f7f9ef;
}

#footer{
        display:none;
}

}

 
 
 
@media only screen and (min-width: 901px) and (max-width: 1279px) { /*voller Bildschirm*/
 


#header_mobile{
display:none;
}

#content_white_mobile{
display:none;
}
 
#footer_mobile{
display:none;
} 

#content_white_tablet{
display:none;
}
 
}

@media only screen and (min-width: 1280px) { /*voller Bildschirm und mehr*/
 
#header_mobile{
display:none;
}

#content_white_mobile{
display:none;
}

#footer_mobile{
display:none;
} 

#content_white_tablet{
display:none;
}
 
}