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(#B066B8, #0d0d0d);
    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: #fff;
    padding: 15px 20px;
    margin: 0px 5px;
    border-radius: 3px;
}

#navbar .container ul li a:hover {
    background: linear-gradient(#6FC4DE, #292880);
    color: #05E1FF !important;
}

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

@media (max-width: 35em) {
    #navbar {
        height: 250px;
    }
    #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;
    }
}



#navbar1 {
    background: linear-gradient(#0D0D0D, #B67768, #0D0D0D);
    position: /*sticky;*/
    top: 0;
}

#navbar1 .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: left;
    padding-top: 0px;
    padding-bottom: 0px;
}
#navbar1 .container ul {
    display: flex;
    margin: 0px;
    padding: 0px;
}

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

#navbar1 .container ul li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    margin: 0px 5px;
    border-radius: 3px;
}

#navbar1 .container ul li a:hover {
    background: linear-gradient(#A51C23, #1C7F19);
    color: #05E1FF !important;
}

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

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









/*
Kommentar
*/

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

article {
width: 100%;
margin: 10px;
padding: 5px;
text-align: right;
}
 /*
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: #D9F2D0;
}

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

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

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



/* section class karten */
.karten {
justify-content: center;
width: 100%;
display: flex;
background: #0d0d0d;
flex-direction: row;
}
.karte {
box-shadow: 0 0 0 0 #0d0d0d;
width: 100%;
margin: 0px;
padding: 25px;
}

.img-karte {
align: center;
width: 45%;
@media screen and (min-width: 51em){
width: 38%
}
}


.karte-text {
font-size: 2.5vw;
text-align: center;
color: red;
}



.karten0 {
justify-content: center;
width: 100%;
display: flex;
background: #0d0d0d;
flex-direction: row;
}
.karte0 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 50%;
margin: 0px;
padding: 0px;
}
.img-karte0 {
width: 90%;
align: left;
}
.karte-text0 {
font-size: 2.5vw;
text-align: center;
color: red;
}










/* section class karten */
/* text karte */
.karten2 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap; }
}
.karte2 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 60%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 20px;
padding: 50px;
@media screen and (max-width: 51em){
padding: 20px;
}
background: linear-gradient(#0D0D0D, #0D0D0D, #0D0D0D, #1D86A0, #0D0D0D);
}

.img-karte2 {
width: 15%;
}
.karte2-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #D9F2D0;
}

/* img karte */
.karten3 {
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte3 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 35%;
margin: 0px;
padding: 20px;
}
.img-karte3 {
width: 60%;
align: center;
display: inline-block;
@media screen and (max-width: 51em){
display: none; /*none*/
}
}
.karte3-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
text-align: center;
color: red;
}

/* img karte */
.karten4 {
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte4 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 35%;
margin: 0px;
padding: 20px;
}
.img-karte4 {
width: 48%;
@media screen and (min-width: 51em){
width: 33%
}
align: center;
}
.karte4-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
text-align: center;
color: #D9F2D0;
}

/* section class karten */
/* text karte */
.karten5 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
/*@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 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 60%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 20px;
padding: 50px;
@media screen and (max-width: 51em){
padding: 20px;}
background: linear-gradient(#0D0D0D, #0D0D0D, #0D0D0D, #0D0D0D, #1D86A0, #0D0D0D);
}
.img-karte5 {
width: 15%;
}
.img-karte55 {
width: 65%;
@media screen and (max-width: 35em){
width: 95%;
}
float: left;
margin-top: 1rem;
margin-right: 1rem;
margin-left: 0.5rem;
margin-bottom: 1rem;
}
.karte5-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #D9F2D0;
}

/* img karte */
.karten6 {
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte6 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 35%;
margin: 0px;
padding: 0px;
}
.img-karte6 {
width: 90%;
@media screen and (min-width: 51em){
width: 60%
}
}
.karte6-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
text-align: center;
color: red;
}

/* section class karten */
/* text karte */
.karten7 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte7 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 60%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 20px;
padding: 50px;
@media screen and (max-width: 51em){
padding: 20px;}
background: linear-gradient(#0D0D0D, #0D0D0D, #0D0D0D, #0D0D0D, #B67768, #0D0D0D);
}
.img-karte7 {
width: 15%;
}
.karte7-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #D9F2D0;
}

/* img karte */
.karten8 {
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte8 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 35%;
margin: 0px;
padding: 0px;
}
.img-karte8 {
width: 80%;
@media screen and (min-width: 51em){
width: 45%
}
}
.karte8-text {
font-family: Calibri, Verdana, Arial;
font-size: 3.0vw;
@media screen and (min-width: 35em){
font-size: 2.2vw;
}
@media screen and (min-width: 51em){
font-size: 1.2vw;
}
text-align: left;
color: #A6CAEC;
}

/* section class karten */
/* text karte */
.karten9 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap-reverse;
}
}
.karte9 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 60%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 20px;
padding: 50px;
@media screen and (max-width: 51em){
padding: 20px;}
background: linear-gradient(#0D0D0D, #0A4358, #0D0D0D, #4F2109, #0D0D0D, #005728);
}
.img-karte9 {
width: 100%;
}
.karte9-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #D9F2D0;
}

/* img karte */
.karten10 {
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte10 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 35%;
margin: 0px;
padding: 0px;
}
.img-karte10 {
width: 80%;
@media screen and (min-width: 51em){
width: 45%
}
}
.karte10-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.2vw;
text-align: right;
color: #A6CAEC;
}

/* section class karten */
/* text karte */
.karten11 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap-reverse;
}
}
.karte11 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 60%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 20px;
padding: 50px;
@media screen and (max-width: 51em){
padding: 20px;
}
background: linear-gradient(#005728, #0D0D0D, #4F2109, #0D0D0D, #0A4358, #0D0D0D);
}
.img-karte11 {
width: 100%;
}
.karte11-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #D9F2D0;
}

/* section class karten */
/* text karte */
.karten12 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte12 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 60%;
@media screen and (max-width: 51em){
width: 85%;
}
margin: 20px;
padding: 50px;
@media screen and (max-width: 51em){
padding: 20px;}

background: #0d0d0d;

/* background: linear-gradient(#0D0D0D, #0D0D0D, #0D0D0D, #0D0D0D, #B67768, #0D0D0D); */
}
.img-karte12 {
width: 50%;
}
 .karte12-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: center;
color: #D9F2D0;
}

/* img karte */
.karten13 {
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte13 {
box-shadow: 0 0 0 0 #0d0d0d;
width: 35%;
margin: 0px;
padding: 0px;
}
.img-karte13 {
width: 80%;
@media screen and (min-width: 51em){
width: 50%
}
}
.karte13-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: center;
color: #FF0065;
}




/* img karte */
.karten14 {
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte14 {
align: center;
box-shadow: 0 0 0 0 #0d0d0d;
width: 100%;
margin: 0px;
padding: 0px;
}
.img-karte14 {
align: center;
width: 90%;
}

.karte14-text {
text-align: center;
color: #FF0065;
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
}

.karten15 {
justify-content: center;
width: 100%;
min-height: 760px;
@media screen and (max-width: 51em){
min-height: 400px;
}
background: #0d0d0d;
display: flex;
flex-direction: row;
}
.karte15 {
align: center;
box-shadow: 0 0 0 0 #ffffff;
width: 100%;
margin: 0px;
padding: 0px;
}
.img-karte15 {
box-shadow: 0px 0px 10px 0px #404040;  /*rechts unten schatten rahmen */
align: center;
display: inline-block;
hight: 100%;
width: 100%;
@media screen and (max-width: 51em){
hight: 50%;
width: 50%;
}
@media screen and (max-width: 35em){
hight: 36%;
width: 36%;
}
}

.karte15-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.3vw;
}
@media screen and (max-width: 35em){
font-size: 3.3vw;
}
text-align: center;
color: #D9F2D0;
}

.karten16 {
justify-content: center;
width: 100%;
min-height: 660px;
@media screen and (max-width: 51em){
min-height: 560px;
}
@media screen and (max-width: 35em){
min-height: 460px;
}
background: #0d0d0d;
display: flex;
flex-direction: row;
}

.karte16 {
align: center;
box-shadow: 0px 0px 0px 0px #ffffff;
width: 50%;
margin: 0px;
padding: 0px;
}
.img-karte16 {
box-shadow: 0px 0px 0px 4px #595959; /*0px 0px 10px 0px #404040;  rechts unten schatten rahmen
background: linear-gradient(#0D0D0D, #0D0D0D, #0D0D0D, #0D0D0D, #B67768, #0D0D0D);*/
align: center;
margin: 10px;
padding: 0px;
display: inline-block;
hight: 60%;
width: 60%;
@media screen and (max-width: 51em){
hight: 40%;
width: 40%;
}
}

.karte16-text {
text-align: center;
color: #D9F2D0;
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.3vw;
}
@media screen and (max-width: 35em){
font-size: 3.3vw;
}
}

.karten17 {
align: center;

/*
align-items: center;
*/

justify-content: center;
width: 100%;
min-height: 780px;
@media screen and (max-width: 51em){
min-height: 400px;
}
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}

.karte17 {
align: center;
box-shadow: 0 0 0 0 #ffffff;
width: 100%;
min-height: 350px;
margin: 10px;
padding: 5px;
}
.img-karte17 {
width: 45%;
box-shadow: 0px 0px 10px 0px #404040;  /*rechts unten schatten rahmen */
align: center;
display: inline-block;
hight: 50%;
width: 50%;
@media screen and (max-width: 51em){
hight: 75%;
width: 75%;
}
@media screen and (max-width: 35em){
hight: 90%;
width: 90%;
}

}
.img-karte171 {
width: 40%;
box-shadow: 0px 0px 10px 0px #404040;  /*rechts unten schatten rahmen */
align: center;
display: inline-block;
hight: 60%;
width: 60%;
@media screen and (max-width: 51em){
hight: 75%;
width: 75%;
}
}

.karte17-text {
width: 60%;
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.3vw;
}
@media screen and (max-width: 35em){
font-size: 3.3vw;
}
text-align: center;
color: #D9F2D0;
}

.karte171-text {
width: 60%;
font-family: Calibri, Verdana, Arial;
font-size: 1.4vw;
@media screen and (max-width: 51em){
font-size: 2.1vw;
}
@media screen and (max-width: 35em){
font-size: 3.1vw;
}
text-align: left;
color: #D9F2D0;
}


.karten18 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
 .karte18 {
align: center;
box-shadow: 0 0 0 0 #ffffff;
width: 90%;
margin: 5px;
padding: 5px;
}

.img-karte18 {
box-shadow: 0px 0px 10px 0px #404040;  /*rechts unten schatten rahmen */
align: center;
display: inline-block;
hight: 100%;
width: 100%;
@media screen and (max-width: 51em){
hight: 50%;
width: 50%;
}
}

.karte18-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.3vw;
}
@media screen and (max-width: 35em){
font-size: 3.3vw;
}
text-align: center;
color: #D9F2D0;
}














.kartens {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #0d0d0d;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.kartes {
box-shadow: 4px 4px 40px 4px #474747;
width: 305px;
height: 525px;
margin: 50px;
padding: 1px;
background: linear-gradient(#0D0D0D, #0D0D0D, #363636, #0D0D0D, #0D0D0D);
}

.img-kartes {
width: 100%;
}

.kartes-text {
font-family: Calibri, Verdana, Arial;
font-size: 1.6vw;
@media screen and (max-width: 51em){
font-size: 2.6vw;
}
@media screen and (max-width: 35em){
font-size: 3.6vw;
}
text-align: left;
color: #D9F2D0;
}








/*
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;
}
*/