@font-face {
  font-family: myFirstFont;
  src: url("../fonts/BAHNSCHRIFT.TTF"); }

.random-text{
    font-size: clamp( 5rem, 10vw, 10vh)   
 }

 .box-grid{
    height: 20vh;
    /* border: 10px solid transparent; */
    /* opacity: 0.7; */
    text-align: center;
    background-size: cover;
    background-position: bottom;
    background-attachment: fixed;
    margin: 1%;
    cursor: pointer;
 }
 .sticky {
  position: sticky;
  top: 0;
  background-color:  var(--bs-light);
}

.custom-heading{
  display: flex;
  justify-content: center;
  z-index: 10;
}

  /* .accordion-body {
    background-color: var(--bs-light);

  }

  .accordion-header {
    background-color: var(--bs-secondary);

  }  */

 .angebot-box{
   background-color: var(--bs-secondary);
   opacity: 70%;
   height: 100%;
   width: 100%;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }

 .box-content-trans{
   display: none;
 }

.paragraph{
   padding-left: 20vw;
   padding-top: 5vh;
   padding-right: 20vw;
}

/* body{
   font-family: myFirstFont;
   hyphens: auto; 
 }

@font-face {
   font-family: myFirstFont;
   src: url("../fonts/BAHNSCHRIFT.TTF");
} */

#eingaben-fehler{
  display: none;
  color: var(--bs-red);
}

.back-button-veranstaltung{
   border-radius: 50%;
   width: 70px;
   height: 70px;
   z-index: 20;
}





 .background-light{
   background-color: var(--bs-light);
 }

 .background-recipies{
   background-color: var(--bs-light);
 }
 .background-events{
   background-color: var(--bs-light);
 }
 .background-julie{
   background-color: var(--bs-light);
 }


 @media only screen and (min-width : 576px){
  .logo-size{
    max-width: 25vw;
    height: 10vh;
  }
  .background-oele{
    background-image: url('../img/oele.JPG');
    background-size: cover;
    background-position: center;
    filter: opacity(40%);
  }

  .background-yogaroma{
    /* background-color: #EED7AD; */
    background-image: url('../img/page1.JPG');
    background-size: cover;
    background-position: center;
    filter: opacity(40%);
  }
  .background-buchungen{
    /* background-color: #EED7AD; */
    background-image: url('../img/page1.JPG');
    background-size: cover;
    background-position: center;
    filter: opacity(40%);
  }
  .background-yoga{
    background-image: url('../img/yoga.jpg');
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
    filter: opacity(40%);
  }
 
  .background-ueber-mich{
   background-image: url('../img/ueberMich.jpeg');
   background-size: cover;
   background-position-y: bottom;
   background-position-x: center;
   filter: opacity(40%);
 } 
}


/* ALLES HIER IST NUR FÜR SMARTPHONE*/
  @media only screen and (max-width : 576px){
    .logo-size{
      max-width: 75vw;
      height: 10vh;
    }
 .background-oele{
   background-image: url('../img/oele.JPG');
   background-size: cover;
   background-position: top;
   filter: opacity(40%);
 }
 .background-yogaroma{
  /* background-color: #EED7AD; */
  background-image: url('../img/page1_mobile.JPG');
  background-size: cover;
  background-position: center;
  filter: opacity(40%);
}
.background-buchungen{
  /* background-color: #EED7AD; */
  background-image: url('../img/page1_mobile.JPG');
  background-size: cover;
  background-position: center;
  filter: opacity(40%);
}
.background-yoga{
  background-image: url('../img/yoga_mobil.jpg');
  background-size: cover;
  background-position-y: bottom;
  background-position-x: center;
  filter: opacity(40%);
}

.background-ueber-mich{
 background-image: url('../img/ueberMich_mobil.jpeg');
 background-size: cover;
 background-position-y: bottom;
 background-position-x: center;
 filter: opacity(40%);
}

}


#loading-container {
  width: 150px;
  height: 150px;
  border: 15px solid #f3f3f3;
  border-top: 15px solid #3498db;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}





ul.tabs{
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li{
  background: none;
  color: var(--bs-body-color);
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
}

ul.tabs li.current{
  background: var(--bs-secondary);
  color: var(--bs-link-color);
}

.tab-content{
  display: none;
  background: var(--bs-secondary);
  padding: 15px;
}

.tab-content.current{
  display: inherit;
}


.card-highlight {
  display: none;
}

.card-highlight.active {
  max-width: 500px;
  display: block;
}

.prev-highlight{
  cursor: pointer;
  color: var(--bs-secondary);

}
.next-highlight{
  cursor: pointer;
  color: var(--bs-secondary);
}

.card-transparent{
  background-color: rgba(255, 255, 255, 0.5);
}
.card-image{
  height: 30vh;
  width: 30vh;
}
.card-image-chakra{
  background-image: url("../img/events/chakra_balancing.png");
  background-position: center;
  background-size: contain;
  background-repeat: space;
}
.card-body{
  border-top: none;
}
.card-header{
  border-bottom: none;
}