html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

body {
    margin: 0px;
    font-family: Calibri, Verdana, Arial;
    box-sizing: border-box;
}


/*
Navigation
*/

.container {
    max-width: 75em;
    margin: 0 auto;
    padding: 0 10px 0 10px;
}

#navbar {
    background: linear-gradient(#FFFF28, #D6D622);
    position: /*sticky;*/
    top: 0;
}

#navbar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 0px;
}
/*
#navbar .logo {
    color: white;
    margin-left: 20px;
}
*/
#navbar .container ul {
    display: flex;
    margin: 0px;
    padding: 0px;
}

#navbar .container ul li {
    list-style: none;
}

#navbar .container ul li a {
    text-decoration: none;
    color: #12700A;
    padding: 5px 15px;
    margin: 0px 5px;
    border-radius: 3px;
}

#navbar .container ul li a:hover {
    background: linear-gradient(#63D452, #D4D255);
    color: #068DFC !important;
}


@media (max-width: 51em) {
    #navbar {
        height: 80px;
    }
    #navbar .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #navbar ul li a {
        font-size: 0.8rem;
    }
}

@media (max-width: 35em) {
    #navbar {
        height: 180px;
    }
    #navbar ul {
        display: flex;
        flex-direction: column;
    }
    #navbar ul li {
        margin-bottom: 20px !important;
        align-self: center;
    }
    #navbar ul li a {
        padding: 10px 15px !important;
    }
    #navbar .logo {
        margin-left: 0px;
    }
}





/*
Kommentar
*/

section {
width: 100%;
display: flex;
flex-direction: row;
}

article {
width: 100%;
margin: 10px;
padding: 5px;
}

 /*
braucht man das?

img {
width: 100%;
}
*/


h1 {
font-family: Calibri, Verdana, Arial;
font-size: 25%;
color: #000000;
}




h2 {
font-family: Calibri, Verdana, Arial;
font-size: 100%;
color: #3F8734;
}

h3 {
font-family: Calibri, Verdana, Arial;
font-size: 120%;
color: #338F33;
}

h4 {
font-family: Calibri, Verdana, Arial;
font-size: 180%;
color: #3F8734;
}

h5 {
font-family: Calibri, Verdana, Arial;
font-size: 160%;
color: #FF0065;
}



.karten {
width: 100%;
display: flex;
background: #ffffff;
flex-direction: row;
}
.karte {
width: 50%;
margin: 5px;
padding: 15px;
}
.img-karte {
width: 45%;
@media screen and (max-width: 51em){
width: 60%;
}
@media screen and (max-width: 35em){
width: 95%;
}
}
.karte-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.4vw;
@media screen and (max-width: 51em){
font-size: 2.2vw;
}
@media screen and (max-width: 35em){
font-size: 3.4vw;
}
text-align: left;
color: #142B11;
}


.karten1 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.karte1 {
width: 60%;
margin: 20px;
padding: 50px;
background: #D9F333;
}
.img-karte1 {
width: 15%;
}

.karte1-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
text-align: left;
color: #D9F2D0;
}














/* section class karten */
/* text karte */

.karten2 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #C7FFB7;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.karte2 {
width: 100%;
margin: 3px;
padding: 3px;
@media screen and (max-width: 51em){
padding: 5px;
}
background: #FEFFAA;
}
.img-karte2 {
width: 100%;
}
.karte2-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.2vw;
@media screen and (max-width: 51em){
font-size: 2.2vw;
}
@media screen and (max-width: 35em){
font-size: 3.0vw;
}
text-align: left;
color: #D9F2D0;
}




/* img karte */

.karten3 {
justify-content: center;
width: 100%;
min-height: 380px;
background: #ffffff;
display: flex;
flex-direction: row;
}
.karte3 {
width: 100%;
margin: 3px;
padding: 3px;
}
.img-karte3 {
box-shadow: 0px 0px 6px 0px #C0C0C0; /* rechts unten schatten rahmen */
min-width: 1024px;
align: center;

/*
width: 33%;
@media screen and (max-width: 51em){
width: 100%
}

display: inline-block;
@media screen and (max-width: 51em){
display: none; none*/

}

.karte3-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.3vw;
@media screen and (max-width: 51em){
font-size: 2.3vw;
}
@media screen and (max-width: 35em){
font-size: 3.3vw;
}
text-align: left;
color: #142B11;
}



/* section class karten */
/* text karte */

.karten4 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #ffffff;

/*@media screen and (min-width: 40em){
background: #50AB42;
} */

display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte4 {
width: 100%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 5px;
padding: 10px;
@media screen and (max-width: 51em){
padding: 5px;}
background: #5CF93C);
}
.img-karte4 {
box-shadow: 1px 1px 8px 0px #0d0d0d; /* rechts unten schatten rahmen */
width: 80%;
@media screen and (min-width: 51em){
width: 50%;
}
}
.karte4-text {
font-family: Calibri, Verdana, Arial;
font-size: 2.0vw;
@media screen and (max-width: 51em){
font-size: 3.0vw;
}
@media screen and (max-width: 35em){
font-size: 4.0vw;
}
text-align: left;
color: #142B11;
}







/* section class karten */
/* text karte */

.karten5 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #ffffff;

/*@media screen and (min-width: 40em){
background: #50AB42;
} */

display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte5 {
width: 100%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 5px;
padding: 10px;
@media screen and (max-width: 51em){
padding: 5px;}
background: #5CF93C);
}
.img-karte5 {
box-shadow: 1px 1px 8px 0px #0d0d0d; /* rechts unten schatten rahmen */
width: 90%;
@media screen and (min-width: 51em){
width: 60%;
}
}
.karte5-text {
font-family: Calibri, Verdana, Arial;
font-size: 2.0vw;
@media screen and (max-width: 51em){
font-size: 3.0vw;
}
@media screen and (max-width: 35em){
font-size: 4.0vw;
}
text-align: right;
color: #142B11;
}

/* img karte */

.karten6 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #ffffff;

/*@media screen and (min-width: 40em){
background: #50AB42;
} */

display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte6 {
width: 75%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 5px;
padding: 10px;
@media screen and (max-width: 51em){
padding: 5px;}
background: #5CF93C);
}

.img-karte6 {
width: 90%;
@media screen and (min-width: 51em){
width: 60%;
align: center;
}
}
.karte6-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.4vw;
@media screen and (max-width: 51em){
font-size: 2.5vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #142B11;
}
}



.karten7 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #ffffff;

/*@media screen and (min-width: 40em){
background: #50AB42;
} */

display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte7 {
width: 100%;
@media screen and (max-width: 51em){
width: 100%;
}
margin: 5px;
padding: 10px;
@media screen and (max-width: 51em){
padding: 5px;}
background: #5CF93C);
}

.img-karte7 {
box-shadow: 1px 1px 8px 0px #0d0d0d; /* rechts unten schatten rahmen */
width: 35%;
@media screen and (max-width: 35em){
width: 55%;
}
float: left;
margin-top: 1rem;
margin-right: 1.5rem;
margin-left: 0.5rem;
margin-bottom: 1.0rem;
}


.img-karte71 {
box-shadow: 1px 1px 8px 0px #0d0d0d; /* rechts unten schatten rahmen */
width: 22%;
@media screen and (max-width: 35em){
width: 32%;
}
float: right;
margin-top: 1rem;
margin-right: 0.5rem;
margin-left: 1.5rem;
margin-bottom: 1.0rem;

}



.karte7-text {
font-family: Calibri, Verdana, Arial;
font-size: 2.0vw;
@media screen and (max-width: 51em){
font-size: 3.0vw;
}
@media screen and (max-width: 35em){
font-size: 4.0vw;
}
text-align: center;
color: #3F8734;
}
}





/*
article.karte-text {
color: #393939;
}

.article_03 {
width: 60%;
background: green;
display: flex;
flex-direction: row;
}

.article_01 {
width: 100%;
padding: 5px;
border: 2px white;
background-color: sandybrown;
}
*/