html{
    box-sizing:border-box;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    overflow-x:hidden;
}

*,*:before,*:after{
    box-sizing:inherit
}

html::before {
  content: ' ';
  background-image: url('../images/bg.jpg');
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -10;
}


body{
    margin:0;
	color: #000000;
    font-size: 22px;
    overflow-x: hidden;
    position: relative;
}


@font-face { 
font-family: "Didot Bold"; 
src: url("../font/Didot_Bold.ttf"); 
}

@font-face { 
font-family: "Cormorant Garamont"; 
src: url("../font/cormorant_regular.ttf"); 
}

 /* CSS für Mobile Navigation */ 


.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.8);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 15%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {
      .font-size: 20px
    }
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


#mobile_button {
    position: fixed;
    bottom: 10px;
    z-index: 200;
    right: 10px;
}

@media (min-width:60em){   
#mobile_button {
    display:none!important;
    }
}


 /* CSS für Mobile Navigation */ 


.textbox {
    text-align: center;
    padding-right: 10%;
    padding-left: 10%;
    margin: auto;
}

@media (max-width:50em){   
.textbox{
    padding-right: 5%;
    padding-left: 5%;
    }
}

.portrait {
    width: 100%;
    z-index: auto;
    aspect-ratio: 1080 / 496;
}

p {
    text-align: left;
    font-family: "Cormorant Garamond";
    font-weight: 100;
    font-style: normal;
    font-size: 38px;
}

@media (max-width:50em){   
p {
     font-size: 30px;
    }
}

.portrait_deko_unten {
    width: 36%;
    float: right;
    margin-top: -19.5%;
    z-index:auto;
    position:relative;
    margin-right: 20%;
    
}

.portrait_deko_oben {
    width: 36%;
    float: right;
    margin-bottom: -19.5%;
    z-index:auto;
    position:relative;
    margin-right: 20%;
}

.portrait_deko_oben_links {
    width: 36%;
    float: left;
    margin-bottom: -19.5%;
    z-index:auto;
    position:relative;
    margin-left: 20%;
}


#pflanze_brennnessel {
    background-image: url(../images/brennnessel.png);
}

#pflanze_giersch {
    background-image: url(../images/giersch.png);
}

#pflanze_gundelrebe {
    background-image: url(../images/gundelrebe.png);
}

#pflanze_schafgarbe {
    background-image: url(../images/schafgarbe.png);
}

#pflanze_wiesenknopf {
    background-image: url(../images/wiesenknopf.png);
}

#pflanze_eberesche {
    background-image: url(../images/eberesche.png);
    background-position: top 50px right 0px;
}

#pflanze_maedesuess {
    background-image: url(../images/maedesuess.png);
}

#pflanze_fichte {
    background-image: url(../images/fichte.png);
    background-position: top 50px right 0px;
}


.pflanzen_info {
    background-position: top 50px right 20px;
    background-repeat: no-repeat;
     background-size: auto 800px;
}

@media (max-width:50em){   
.pflanzen_info{
    background-position: top 70px right;
    background-size: auto 500px;
    
    }
}

header {
    display:block
}

footer {
    background: #000;
    height: 200px;
    text-align: center;
    padding-top: 30px;
}

a {
    background-color:transparent
}

a:active,a:hover{
    outline-width:0
}

img{
    border-style:none;
}


html,body {
    font-family: "Didot";
    font-size: 22px;
    line-height:1.5;
	font-weight: bold;
}

h1{
    font-size:40px;
    text-align: left;
    padding-top: 150px;
    font-style: italic;
    font-weight: bold;
    padding-right: 10%;
    padding-left: 10%;
    margin-bottom: 70px;
    font-family: "Didot Bold";
}

@media (max-width:60em){
h1 {
    font-size: 35px;
    line-height: 55px;
    margin-top: 0px;
    padding-top: 30px;
    }
}


h2 {
    font-size: 140px;
    display: block;
    text-align: left;
    line-height: 130px;
    padding-top: 15%;
    margin: auto;
    letter-spacing: -0.08em;
}

@media (max-width:60em){
h2 {
    font-size: 90px;
    line-height: 90px;
    }
}

@media (max-width:50em){
h2 {
    font-size: 80px;
    line-height: 80px;
    }
}


a {
    color:inherit
}

.w3-button {
    vertical-align:middle;
    text-decoration: none;
    overflow:hidden;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}

.w3-bar{
    width:100%;
    overflow:hidden;
}


.w3-bar-item{
    float:right;
    width:auto;
    display:block;
    outline:0;
    font-size: 25px;
    border-bottom: solid 3.5px #000;
    margin-left: 30px;
    margin-top: 20px;
}

.w3-bar-item:hover {
    border: none;
}

@media (max-width:60em){   
.w3-hide-small{
    display:none!important;
    }
}


@media (min-width:60em){
nav {
    position:fixed;
    top: 0px;
    padding-right: 10%;
    width:100%;
    z-index:1;
    background-image: url('../images/bg.jpg');
    background-size: cover;  
    }
}


ul {
    list-style-type: none;
    text-align: left;
    font-size: 30px;
    margin: auto;
    margin-left: 5px;
    
    
}

.listenlogo {
    float: left;
    width: 40px;
    height: 40px;
}

@media (max-width:60em){
.listenlogo {
     width: 35px;
    height: 35px;
    }
}

#strauss_logo {
    float: left;
    width: 140px;
    height: 140px;
}

@media (max-width:60em){
#strauss_logo {
     width: 80px;
    height: 80px;
    margin-bottom: 20px;
    }
}

.infobox {
    margin: 0;
    text-align: left;
    margin-top: 20px;
}

.pflanzen_infobox {
    min-height: 350px;
}

@media (max-width:40em){
.pflanzen_infobox{
   margin-top: 330px;
    }
}

#ende {
    width: 100%;
    aspect-ratio: 40 / 10;
}

@media (max-width:50em){
#ende{
    width: 100%;
    aspect-ratio: 25 / 10;
    }
}

footer {
    position:fixed;
    bottom: 0px;
    width:100%;
    z-index: 1;
    height: 90px;
    background-image: url('../images/bg.jpg');
    background-size: cover;
    padding-right: 5px;
}

#footer_bild {
    width: 300px;
    float: left;
    margin: -20px 0px 0px 15px;
    
}


@media (max-width:30em){
#footer_bild{
    width: 230px;
    margin: -10px 0px 0px 0px;
    }
}

#guerilla {
    width: 70%;
}

@media (max-width:60em){
#guerilla{
    width: 90%;
    }
}

.anlaesse {
    width: 32%;
    
}

#anlaesse_box {
    display: flex;
    justify-content: space-between;
}




/*


▗▄▄▄ ▗▖ ▗▖▗▄▄▄▖ ▗▄▖ ▗▖ ▗▖▗▄▄▖     ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖▗▄▄▖  ▗▄▖ ▗▄▄▖ 
▐▌  █▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌    ▐▌   ▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌
▐▌  █▐▌ ▐▌▐▛▀▀▘▐▌ ▐▌▐▌ ▐▌▐▛▀▚▖    ▐▛▀▀▘ ▝▀▚▖ ▝▀▚▖▐▛▀▚▖▐▛▀▜▌▐▛▀▚▖
▐▙▄▄▀▝▚▄▞▘▐▌   ▝▚▄▞▘▝▚▄▞▘▐▌ ▐▌    ▐▙▄▄▖▗▄▄▞▘▗▄▄▞▘▐▙▄▞▘▐▌ ▐▌▐▌ ▐▌
                                                                



*/










#Div1 {
    margin: auto;
    padding-bottom: 70px;
    
    }

 #Div2 {
     margin: auto;
     padding-bottom: 70px;
    }


.language {
    float: right;
    margin: 7px;
    font-size: 27px;
    font-family: "Didot Bold"; 
    border-radius: 33px;
    width: 55px;
    height: 55px;
    text-decoration: none;
    padding-top: 7px;
    margin-top: -10px;
    border: solid 3px #000;
}


.language:hover {
    
    background: #000;
    color: #fff;
}



h3 {
    font-size: 40px;
    display: block;
    text-align: left;
    margin-top: -10px;
    font-style: italic;
    font-weight: 500;
}

@media (max-width:60em){
h3 {
    font-size: 30px;
    }
}

@media (max-width:50em){
h3 {
    font-size: 20px;
    }
}





h4 {
    font-size: 25px;
    .display: block;
    text-align: center;
	background: #fff;
	font-weight: lighter;
}








.eisenkraut_class {
    background-image: url(../images/dufour_essbar/eisenkraut.png);
}

.fenchel_class {
    background-image: url(../images/dufour_essbar/wilder_fenchel.png);
}

.eibisch_class {
    background-image: url(../images/dufour_essbar/echter_eibisch.png);
}

.odermennig_class {
    background-image: url(../images/dufour_essbar/odermennig.png);
}

.taubnessel_class {
    background-image: url(../images/dufour_essbar/taubnessel.png);
}

.hagebutte_class {
    background-image: url(../images/dufour_essbar/hagebutte.png);
}

.hopfen_class {
    background-image: url(../images/dufour_essbar/hopfen.png);
}

.wegwarte_class {
    background-image: url(../images/dufour_essbar/wegwarte.png);
}

.salbei_class {
    background-image: url(../images/dufour_essbar/wiesensalbei.png);
}

.thymian_class {
    background-image: url(../images/dufour_essbar/quendel_thymian.png);
}

.malve_class {
    background-image: url(../images/dufour_essbar/malve.png);
}

.dost_class {
    background-image: url(../images/dufour_essbar/dost.png);
}

.margerite_class {
    background-image: url(../images/dufour_essbar/margerite.png);
}


.schafgarbe_class {
    background-image: url(../images/dufour_essbar/schafgarbe.png);
}


.sonnenhut_class {
    background-image: url(../images/dufour_essbar/sonnenhut.png);
}


.silbermantel_class {
    background-image: url(../images/dufour_essbar/silbermantel.png);
}

.johanniskraut_class {
    background-image: url(../images/dufour_essbar/johanniskraut.png);
}

.knoblauchrauke_class {
    background-image: url(../images/dufour_essbar/knoblauchrauke.png);
}

.gundelrebe_class {
    background-image: url(../images/dufour_essbar/gundelrebe.png);
}


.glockenblume_class {
    background-image: url(../images/dufour_essbar/glockenblume.png);
}



.duftveilchen_class {
    background-image: url(../images/dufour_essbar/veilchen.png);
}


.waldmeister_class {
    background-image: url(../images/dufour_essbar/waldmeister.png);
}


.wiesenknopf_class {
    background-image: url(../images/dufour_essbar/wiesenknopf.png);
}

.bärlauch_class {
    background-image: url(../images/dufour_essbar/baerlauch.png);
}

.beifuss_class {
    background-image: url(../images/dufour_essbar/moxa.png);
}

.brennnessel_class {
    background-image: url(../images/dufour_essbar/brennnessel.png);
}


.giersch_class {
    background-image: url(../images/dufour_essbar/giersch.png);
}


.nachtkerze_class {
    background-image: url(../images/dufour_essbar/nachtkerze.png);
}