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(#888FBF, #07253F);
    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: 60px;
    }
    #navbar .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #navbar ul li a {
        font-size: 0.8rem;
    }
}

@media (max-width: 35em) {
    #navbar {
        height: 100px;
    }
    #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;
text-align: right;
}
 /*
braucht man das?

img {
width: 100%;
}
*/


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

h11 {
font-family: Calibri, Verdana, Arial;
font-size: 150%;
color: #FF0000;
}

h12 {
font-family: Cambira, Times New Roman, Arial;
font-size: 160%;
color: #0080FF;
}


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: Cambira, Times New Roman, Arial;
font-size: 160%;
color: #D97C39;
}

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



.karten19 {
align: center;
align-items: center;
justify-content: center;
width: 100%;
background: #051223;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@media screen and (max-width: 51em){
flex-wrap: wrap;
}
}
.karte19 {
box-shadow: 4px 4px 40px 4px #1FA6BA;
align-items: center;
justify-content: center;
width: 80%;
margin: 20px;
padding: 0px;
background: linear-gradient(#051223, #062E48, #051223);
}
.karte191 {
box-shadow: 4px 4px 40px 4px #1FA6BA;
align-items: center;
justify-content: center;
width: 80%;
margin: 20px;
padding: 20px;
background: linear-gradient(#051223, #062E48, #051223);
}

.karte192 {
align-items: center;
justify-content: center;
width: 80%;
margin: 20px;
padding: 20px;
}

.karte193 {
box-shadow: 2px 2px 20px 2px #474747;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 45px;
padding: 35px;
background: linear-gradient(#0D0D0D, #0D0D0D,  #0D0D0D, #363636,#0D0D0D);
}





.karte19-text {
font-family: Cambira, Times New Roman, Arial;
font-size: 1.8vw;
@media screen and (max-width: 51em){
font-size: 3.0vw;
}
@media screen and (max-width: 35em){
font-size: 4.6vw;
}
text-align: center;
color: #D9F2D0;
}

.karte19-text2 {
font-family: Cambira, Times New Roman, Arial;
font-size: 3.8vw;
@media screen and (max-width: 51em){
font-size: 4.6vw;
}
@media screen and (max-width: 35em){
font-size: 6.4vw;
}
text-align: center;
color: #FF0065;
}

.karte19-text3 {
font-family: Calibri, Verdana, Arial;
font-size: 1.8vw;
@media screen and (max-width: 51em){
font-size: 3.0vw;
}
@media screen and (max-width: 35em){
font-size: 4.6vw;
}
text-align: left;
color: #D9F2D0;
}

.img-karte19 {
margin: 0px;
padding: 0px;
align: center;
width: 100%;
/*box-shadow: 0px 0px 10px 0px #404040;  rechts unten schatten rahmen */

display: inline-block;
hight: 100%;
width: 100%;
@media screen and (max-width: 51em){
hight: 100%;
width: 100%;
}
}







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