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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}

.wrapper {
  width: 100%;
  max-width: 700px;
}

.bg {
    width: 94%;
    padding: 3%;
    padding-bottom: 10px;
    overflow: hidden;
}

.bg-1 {
    background: #FFDE00;
    background: linear-gradient(88deg,rgba(255, 222, 0, 1) 0%, rgba(235, 220, 0, 1) 85%, rgba(196, 217, 0, 1) 100%);
}

.bg-2 {
    background: #1B7FFF;
    background: linear-gradient(88deg,rgba(27, 127, 255, 1) 0%, rgba(20, 112, 255, 1) 75%, rgba(0, 70, 255, 1) 100%);
}

.bg-3 {
    background: #FF3DBD;
    background: linear-gradient(88deg, rgba(255, 61, 189, 1) 0%, rgba(245, 46, 201, 1) 80%, rgba(214, 0, 238, 1) 100%);
}

.bg-4 {
    background: #FF3B05;
    background: linear-gradient(88deg, rgba(255, 59, 5, 1) 0%, rgba(243, 43, 5, 1) 80%, rgba(212, 0, 5, 1) 100%);
}

.bg-5 {
    background: #A526E8;
    background: linear-gradient(88deg, rgba(165, 38, 232, 1) 0%, rgba(155, 27, 238, 1) 80%, rgba(128, 0, 255, 1) 100%);
}

.bg-6 {
    background: #00DCCC;
    background: linear-gradient(88deg, rgba(0, 220, 204, 1) 0%, rgba(0, 229, 193, 1) 80%, rgba(0, 255, 163, 1) 100%);
}

.content {
    background-color: white;
    padding: 3%;
    padding-bottom: 150px;
}

.no-margin-bottom {
    margin-bottom: 0!important;
}

.no-wordwrap {
    hyphens: none!important;
}

/* TYPO */

@font-face {
    font-family: LexendGiga;
    src: url("wissen/font/LexendGiga-Variable.ttf");
}

@font-face {
    font-family: LexendExa;
    src: url("wissen/font/LexendExa-Variable.ttf");
}

h2 {
    font-family: LexendGiga, sans-serif;
    font-weight: 800;
    font-size: 1.7rem;
    hyphens: auto;

    padding-top: 30px;
    padding-bottom: 20px;
}

h3 {
    font-family: LexendGiga, sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.3rem;
    hyphens: auto;
}

h4 {
    font-family: LexendGiga, sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
    hyphens: auto;

    text-align: end;
    padding-left: 10%;

    margin: 50px 0;
}

h5 {
    font-family: LexendGiga, sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    hyphens: auto;

    margin: 20px 0 10px 0;
}

p {
    font-family: LexendExa, sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.5rem;
    hyphens: auto;
}

a {
    color: black;
    text-decoration: none;
}

b {
    font-weight: 700;
}

em {
    font-style: normal;
}

.bg-1 h4, .bg-1 sup, .bg-1 em {
    color: #8A9900;
}

.bg-2 h4, .bg-2 sup, .bg-2 em {
    color: #1b7fff;
}

.bg-3 h4, .bg-3 h5, .bg-3 sup, .bg-3 em {
    color: #FF3DBD;
}

.bg-3 p a {
    color: #FF3DBD;
    text-decoration: underline;
    font-weight: 700;
}

.bg-4 h4, .bg-4 h5, .bg-4 sup, .bg-4 em {
    color: #FF3B05;
}

.bg-4 p a {
    color: #FF3B05;
    text-decoration: underline;
    font-weight: 700;
}

.bg-5 h4, .bg-5 h5, .bg-5 sup, .bg-5 em {
    color: #A526E8;
}

.bg-5 p a {
    color: #A526E8;
    text-decoration: underline;
    font-weight: 700;
}

.bg-6 h4, .bg-6 h5, .bg-6 sup, .bg-6 em {
    color: #00DCCC;
}

.bg-6 p a {
    color: #00DCCC;
    text-decoration: underline;
    font-weight: 700;
}



/* NAV FORMATIERUNG */

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.header img {
    max-width: 50%;
    max-height: 40px;
}

.navbox h3 {
    margin-bottom: 10px;
}

.navmenu {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 90%;
    margin-bottom: 50px;
}

.navlink {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: left;
    gap: 5%;

    text-decoration: underline;
}

.navlink img {
    margin-top: 3px;
    max-width: 10%;
}



/* CONTENT FORMATIERUNG */

.h-img {
    max-width: 50%;
    display: block;
    margin: 60px auto 0 auto;
}

.h-img-reality {
    max-width: 50%;
}

.h-img-koerper {
    max-width: 45%;
}

.h-img-tipp {
    max-width: 30%;
}

.h-img-spirale {
    max-width: 20%;
}

.h-img-line {
    max-width: 85%;
    display: block;
    margin: 40px auto;
}

.quotebox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    margin: 20px 0 40px 0;
}

.quotebox-addon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;

    margin: 0 0;
}

.quotebox h4 {
    margin: 0;
    padding: 0;
}

.quotebox .quote-lb {
    text-align: left;
}

.quotebox img {
    transform: scale(1.2);
    max-width: 40%;
}

.quotebox-addon img {
    position: relative;
    top: -20px;
    max-width: 40%;
}

.quelle {
    margin: 30px 0;
    font-size: 0.5rem;
    line-height: 0.7rem;
}

.infografik {
    width: 100%;
    margin: 20px 0;
}

.button {
    width: 100%;
    text-align: center;

    padding: 10px 0;
}

.button p {
    font-family: LexendGiga, sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: white;
    text-decoration: none;
}

.back-container {
    width: 100%;

    position: fixed;
    bottom: 0;
    left: 0;
}

.back-container .button {
    position: relative;
    bottom: 0;
    padding: 20px 0;
}

.back-container .button p {
    color: #000000!important;
}

hr {
    color: white;
    border: 0px solid white;
    margin: 10px 0;
}

.content .navlink {
    text-decoration: none;
}

.h2-img {
    margin-top: 20px;
    margin-bottom: 20px;
}

.h2-img img {
    margin-top: 20px;
    max-width: 30%;
    float: right;
}

.h2-img img.img-checkliste {
    max-width: 15%;
}

audio {
    margin: 15px 0;
    width: 100%;
}