/* Allgemeines */
html {
    scroll-behavior: smooth;
}

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background-color: #F7F4F2;
}

img {
    width: 100%;
}


/* Burger Menu Icon & Navigation */
.logo {
    position: fixed;
    top: 30px;
    left: 30px;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: white;
    z-index: 100;
    cursor: pointer;
}

.logo_image {
    position: relative;
    top: 15px;
    left: 15px;
    width: 30px;
    height: 30px;
    background-image: url("../img/ic/ic_burger.png");
    background-size: contain;
}


/*Menü  zuerst ausgeblendet*/
.menu{
    position: absolute;
    display: none;
    flex-direction: column;
    width: 250px;
    height: 320px;
    margin: 30px 0 0 30px;
    padding-top: 70px;
    justify-content: center;
    z-index: 99;
}

#bg-menu{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: #07114C;
    opacity: 40%;
    display: none;
    z-index: 98;
}

/*Menü links*/
.menu a{
    position: relative;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 30px;
    padding-left: 30px;
    padding-bottom: 16px;
    padding-top: 16px;
    margin-bottom: 16px; 
    color: #5663AF;  

    -webkit-box-shadow: 0px 10px 20px 0px rgba(30,30,30,0.05); 
    box-shadow: 0px 10px 20px 0px rgba(30,30,30,0.05);
}

.menu a:hover{
    background-color: #5663AF;
    color: #ffffff; 
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); 
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
}

/*Button*/
.button{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 50px;
    width: 180px;
    background-color: #E06A1B;
    border-radius: 25px;
    margin-top: 20px;
    color: white;
    text-decoration: none;
}

.button:hover{
    background-color: #da6111;
}

.button a img{
    height: 30px;
    width: 30px;
    margin-left: 12px;
    margin-right: 0px;  
}

.button-icon{
    padding-left: 20px;
    padding-right: 8px;
}

.ghostbutton{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 46px;
    border: 2px #E06A1B solid;
    width: 180px;
    background-color: none;
    border-radius: 25px;
    margin-top: 20px;
    text-decoration: none;
    margin-left: 16px;
}

.buttons{
    display: flex;  
    flex-direction: row;
}

.lastpage{
    width: 100px!important;
    min-height: 44px!important;
    background-color: #E88D51!important;
}

.lastpage:hover{
    background-color: #E06A1B!important;
}

/* Schlagschatten */
.shadow {
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); 
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
}


/* Text-Box */
.box {
    position: fixed;
    top: 30px;
    right: 30px;
    border-radius: 10px;
    background-color: white;
    width: 27vw;
    height: calc(100vh - 183px);
    z-index: 97;
    padding: 24px;
    padding-right: 20px;
}

.content {
    padding-right: 8px;
    background-attachment: local, local, scroll, scroll;
}

#gradient {
    width: calc(27vw - 12px);
    height: 32px;
    position: absolute;
    top: calc(30px + 100vh - 185px - 36px); 
    z-index: 1;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}

#gradient2 {
    width: 100vw;
    height: 100px;
    position: fixed;
    z-index: -9;
    bottom: 0px; 
    background: linear-gradient(0deg, rgba(247,244,242,1) 25%, rgba(247,244,242,0) 100%);
}



/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    z-index: 12;
}

::-webkit-scrollbar-track {
    background: none; 
}

::-webkit-scrollbar-thumb {
    background: #F1EDEB;
    border-radius: 4px; 
}

::-webkit-scrollbar-thumb:hover {
    background: #dad4d0; 
}


/* Tab Styles */
#tabs {
    position: relative;
}

#tabs ul {
    list-style: none;
    position: relative;
    left: -4px;
    width: 100%;
    height: 28px;
    background-color: #F7F4F2;
    padding: 4px 0px 4px 4px;
    border-radius: 18px;
    margin-bottom: 20px;
}

#tabs li {
    display: inline;
}

#tabs li a {
    position: relative;
    width: calc(50% - 12px);
    height: 20px;
    text-align: center;
    padding: 4px;
    float: left;
    border-radius: 15px;
    cursor: pointer;
    margin-right: 4px;
}

#tabs li a:hover {  
    background-color: #EEE9E6;
    color: #E06A1B;
}

.ui-tabs-active a, ui-state-active a {
    background-color: #E88D51!important;
    color: white!important;
}

.ui-tabs-panel {
    height: calc(100vh - 183px - 80px - 32px);
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Audio Player Flexbox*/
.controls {
    display: flex;
    align-items: center;
    height: 60px;
    position: absolute;
    top: 30px;
    left: 115px;
    flex-direction: row;
}

/* Zurück Button Unterseiten Kurheim */
.back-kurheim {
    width: 120px;
    height: 45px;
    border-radius: 30px;
    background-color: #E88D51;
    color: white;
    z-index: 100;
    cursor: pointer;
    margin-right: 25px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.back-kurheim:hover {
    background-color: #E06A1B;
}

.back-kurheim a img {
    float: left;
    height: 30px;
    width: 30px;
    margin-left: 10px;
    margin-right: 5px;
}

.audio {
    width: 300px;
    max-height: 40px;
    border-radius: 40px;
}

audio::-webkit-media-controls-panel {
    background-color: white;
  }

/* Accordion Styles */
.accordion-header{
    /*border-top: 1px solid #F1EDEB;*/
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    outline: none;
    margin: 0px;
}

.accordion-content{
    margin-bottom: 12px;
}

/*#accordion{
    border-bottom: 1px solid #F1EDEB;
}*/

.fa-chevron-down{
    float: right;
    margin-top: 2px;
}


/* Seiten-Indikator Styles */
.indicator {
    position: fixed;
    width: calc(100vw - 60px);
    z-index: 97;
    bottom: 14px;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
}

.line {
    position: relative;
    width: 100%;
    background-color: #C2C3DC;
    height: 4px;
    border-radius: 2px;
    top: 0px;
    margin-top: 8px;
    margin-bottom: 16px;
}

.line-active {
    position: relative;
    background-color: #6B78C5;
    height: 4px;
    border-radius: 2px;
    top: 0px;
}

.points {
    position: absolute;
    height: 20px;
    width: calc(100vw - 140px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 10;
    padding: 0px 40px;
}

.id-point {
    border-radius: 10px;
    width: 14px;
    height: 14px;
    border: 3px solid #6B78C5;
    background-color: white;
    
}

.id-point-active {
    border-radius: 10px;
    width: 20px;
    height: 20px;
    background-color: #6B78C5;
}

.id-point-active:hover {
    background-color: #5b69af;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); 
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
}

.id-point:hover {
    background-color: #6B78C5;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1); 
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
}

.navigation{
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    min-height: 32px;
}

.next-arrow, .back-arrow{
    display: inline;
    width: 32px;
    cursor: pointer;
}

/* Bubbles */

.bubble{
    width: 28px;
    height: 28px;
    border-radius: 30px;
    background-color: #E88D51;
    z-index: 97!important;
    float: left;
    position: absolute;
}

.bubble:hover{
    background-color: #E06A1B;
}

.bubble img{
    width: 16px;
    height: 16px;
    margin: 6px;   
}

.bubble_tag{
    float: left;
    padding: 8px;
    padding-left: 32px;
    border-radius: 28px;
    color: white;
    background-color: #ee9961e3;
    z-index: -10!important;

}

#ba{
    position: absolute;
    top: 16.5vw;
    left: 41vw;
}

#bb{
    position: absolute;
    top: 28.5vw;
    left: 47vw;
}

#bc{
    position: absolute;
    top: 28.5vw;
    left: 28vw;
}

#bd{
    position: absolute;
    top: 40vw;
    left: 29vw;
}

#be{
    position: absolute;
    top: 40vw;
    left: 56vw;
}

#bf{
    position: absolute;
    top: 37vw;
    left: 12vw;
}

#bg{
    position: absolute;
    top: 39vw;
    left: 21vw;
}

/* Hintergrund */
.illustration {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -10;
}

.illustration img {
    position: relative;
    width: 100vw;
    top: -12vw;
}



/* Intro Page*/



.text_box{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 40%;
    height: 100%;
    justify-content: center;
    
}

.scrollable{
    position: absolute;
    margin-top: 15vh;
    margin-bottom: 5vh;
    width: 40%;
    height: calc(100% - 20vh);
    padding-right: 12px;
    overflow-x: scroll;
}

.box_right{
    right: 120px;
}

.box_left{
    left: 120px;
}

.text_right .button{
    align-self: flex-end;
}

.warning{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0px;
}

.warning img{
    width: 80px;
    height: 80px;
}

.hidden{
display: none;
}