@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("../fonts/bootstrap-icons.woff2?1fa40e8900654d2863d011707b9fb6f2") format("woff2"),
       url("../fonts/bootstrap-icons.woff?1fa40e8900654d2863d011707b9fb6f2") format("woff");
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900


.montserrat-<uniquifier> {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

:root {
--bs-FA: #101a26;
--bs-FA-text: #a1a6ab;
--bs-RED: #dc3545;
--bs-FA-rgb: 16, 26, 38;
--bs-FA-tr: rgba(16, 26, 38, 0.7);
--bs-gray6: #ddd;
--bs-gray1: #1b2536;
--bs-gray2: #6b7178;
--bs-font-sans-serif: "Montserrat", serif;
--bs-background: #cccccc;
--bs-warning: #ffea00 !important;
--bs-warning-rgb: 255,234,0 !important;
--bs-danger: #cd0000 !important;
--bs-info: #009fe1 !important;
--bs-rosa: #e3037d;
--bs-success: #8cbf32;
--bs-success-rgb: 132,189,64;
--bs-info-rgb: 0,159,225 !important;
--bs-dark_modal_rgb: 36, 42, 48;

}

html{scroll-behavior: smooth;}
body{
background-color: #FFFFFF;
font-family: var(--bs-font-sans-serif)  !important;
font-weight: 400 !important;
color: var(--bs-FA);
font-size: 1.1rem !important;
letter-spacing: 0.02rem;
margin-top: 0;
overflow-y: scroll;
overflow-x: hidden;
/*
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;*/
}
a {color: inherit ; text-decoration: none; cursor: pointer;}
a:hover {font-weight: 900;}
p{font-size: 1.5rem;  font-weight: 300;}
@media(max-width: 992px){
p{font-size: 1.0rem;  font-weight: 300;}
}
.a_link_content{text-decoration: none !important; font-weight: 400 !important;}
.a_link_content:hover{text-decoration: none !important; font-weight: 400 !important; color: var(--bs-danger);}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{text-transform: uppercase !important; font-weight: 800!important;}
.bg-FA{background-color: var(--bs-FA)!important;}
.bg-body-FA{background-color: var(--bs-FA)!important;color: #FFF !important;}
.bg-RED{background-color: var(--bs-RED)!important;}
.bg-rosa {  background-color: var(--bs-rosa);}
.bg-none{background-color: inherit !important;}
.text-RED{color: var(--bs-RED)!important;}
.text-FA-dark{color: var(--bs-FA-text);}
.fs-7{font-size: 0.8rem!important;}
.fs-8{font-size: 0.7rem!important;}
.fs-9{font-size: 0.6rem!important;}
.fw-bold-xl{font-weight:  900 !important;}
.bg-rosa-blue {
    background-image: linear-gradient(to right, var(--bs-info), var(--bs-info), var(--bs-rosa),var(--bs-rosa));
}
.bg-iframe-modal{background-color: rgb(var(--bs-dark_modal_rgb));}
.middle_content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      text-align: center;
}

.text-bg-dark {
    color: #fff!important;
    background-color: RGBA(var(--bs-FA-rgb),var(--bs-bg-opacity,1))!important;
}
.pointer{cursor: pointer;}
.py-10{padding-top: 6rem!important;padding-bottom: 6rem!important;}
.py-15 {padding-top: 9rem!important;padding-bottom: 9rem!important;}
.p-left-3{padding-left: 2rem!important; }

.mb-7{margin-bottom: 6rem!important;}
.bg-green-yellow{
  background: rgb(140,191,50);
  background: linear-gradient(90deg, rgba(140,191,50,1) 0%, rgba(255,234,0,1) 100%);
}
.bg-green-yellow-red{
  background: rgb(140,191,50);
  background: linear-gradient(90deg, rgba(140,191,50,1) 0%, rgba(255,234,0,1) 50%, rgba(220,53,69,1) 100%);
}
.bg-verlauf{
  background: rgb(140,191,50);
  background: linear-gradient(90deg, rgba(140,191,50,1) 0%, rgba(255,234,0,1) 20%, rgba(255,234,0,1) 80%, rgba(140,191,50,1) 100%);
}

.mobile_center{text-align: left;}


.mobile_view{display: none; visibility: hidden;}
.desktop_view{display: inherit; visibility: visible;}
@media(max-width: 992px){
.mobile_center{text-align: center;}
.mobile_view{display: inherit; visibility: visible;}
.desktop_view{display: none; visibility: hidden;}
}


.footer_open{display: inherit; visibility: visible;}
.footer_close{display: none; visibility: hidden;}
@media(max-width: 480px){
.footer_open{display: none; visibility: hidden;}
.footer_close{display: inherit; visibility: visible;}
}

.p-card-5{padding-left: 1rem !important; padding-right: 1rem !important; }
@media(min-width: 992px){
  .p-card-5{padding-left: 3rem !important; padding-right: 3rem  !important; }
}




.modal{background-color:rgba(21, 25, 34, 0.95) !important;}
.btn-info {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #009fe1;
    --bs-btn-border-color: #009fe1;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #009fe1;
    --bs-btn-hover-border-color: #009fe1;
    --bs-btn-focus-shadow-rgb: 11,172,204;
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: #009fe1;
    --bs-btn-active-border-color: #009fe1;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #009fe1;
    --bs-btn-disabled-border-color: #009fe1;
}
.btn-warning {
    --bs-btn-color: var(--bs-FA) !important;
    --bs-btn-bg: var(--bs-warning) !important;
    --bs-btn-border-color: var(--bs-warning) !important;
    --bs-btn-hover-color: var(--bs-FA) !important;
    --bs-btn-hover-bg: var(--bs-warning) !important;
    --bs-btn-hover-border-color: var(--bs-warning) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}


.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-success) !important;
    --bs-btn-border-color: var(--bs-success) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-success) !important;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60,153,110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-success) !important;
    --bs-btn-active-border-color: var(--bs-success) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-success) !important;
    --bs-btn-disabled-border-color: var(--bs-success) !important;
}

.button_snap {
    --bs-btn-color: var(--bs-FA) !important;
    --bs-btn-bg: var(--bs-warning) !important;
    --bs-btn-border-color: var(--bs-warning) !important;
    --bs-btn-hover-color: var(--bs-FA) !important;
    --bs-btn-hover-bg: var(--bs-warning) !important;
    --bs-btn-hover-border-color: var(--bs-warning) !important;
    --bs-btn-focus-shadow-rgb: 217,164,6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
    background: #FFEA00 !important;
    background: linear-gradient(180deg, rgba(255, 234, 0, 1) 0%, rgba(255, 234, 0, 1) 55%, rgba(194, 178, 0, 1) 100%) !important;

}

/* loading Animation  */
.dot-pulse-dark  {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #cdcdcd;
  color: #dc3545;
  box-shadow: 9999px 0 0 -5px #cdcdcd;
  animation: dotPulsedark 1.5s infinite linear;
  animation-delay: .25s;
}
.dot-pulse-dark::before, .dot-pulse-dark::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #cdcdcd;
  color: #cdcdcd;
}
.dot-pulse-dark::before {
  box-shadow: 9984px 0 0 -5px #cdcdcd;
  animation: dotPulsedarkBefore 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse-dark::after {
  box-shadow: 10014px 0 0 -5px #cdcdcd;
  animation: dotPulsedarkAfter 1.5s infinite linear;
  animation-delay: .5s;
}
@keyframes dotPulsedarkBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #cdcdcd;
  }
  30% {
    box-shadow: 9984px 0 0 2px #cdcdcd;
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px #cdcdcd;
  }
}

@keyframes dotPulsedark {
  0% {
    box-shadow: 9999px 0 0 -5px #cdcdcd;
  }
  30% {
    box-shadow: 9999px 0 0 2px #cdcdcd;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #cdcdcd;
  }
}

@keyframes dotPulsedarkAfter {
  0% {
    box-shadow: 10014px 0 0 -5px #cdcdcd;
  }
  30% {
    box-shadow: 10014px 0 0 2px #cdcdcd;
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px #cdcdcd;
  }
}

/* loading Animation  */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #FFF;
  color: #dc3545;
  box-shadow: 9999px 0 0 -5px #FFF;
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s;
}
.dot-pulse::before, .dot-pulse::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #FFF;
  color: #FFF;
}
.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px #FFF;
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px #FFF;
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}
@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px #FFF;
  }
  30% {
    box-shadow: 9984px 0 0 2px #FFF;
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px #FFF;
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px #FFF;
  }
  30% {
    box-shadow: 9999px 0 0 2px #FFF;
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px #FFF;
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px #FFF;
  }
  30% {
    box-shadow: 10014px 0 0 2px #FFF;
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px #FFF;
  }
}


.push_kurs_day{
  max-width: 60px;
  max-height: 200px;
  position: fixed;
  bottom: 1.5rem;
  left: 0px;
  font-size:0.9rem;
  font-weight: 600;
  background-color: var(--bs-info);
  z-index: 1019;
  text-align: center;
  color: #ffffff !important;
  writing-mode: vertical-lr !important;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 5px;
  padding-right: 7px;
  cursor: pointer;
  text-transform: uppercase;
}

.push_kurs_day:hover{background-color:  rgba(var(--bs-info-rgb), 0.725);}
@media (min-width: 992px){.modal-galerie { --bs-modal-width: 992px !important;}}

#nav .nav-link {
    color: #FFF !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    font-size: 0.9rem;
    letter-spacing: 0.05rem;
    border-radius: 8px;
    margin-right:  9px;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
#nav .nav-link:hover {color: var(--bs-warning) !important;}
#nav .logo_nav{height: 50px;}
/*#nav .dropdown-menu {background-color: #FFF !important;}*/
/*#nav .dropdown-item{
    font-weight: 300 !important;
    font-size: 0.8rem;
    display: block;
    width: 100%;
    min-width: 250px;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    /*text-transform: uppercase;*/
/*    color: var(--bs-FA);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;


}*/

#nav .dropdown-item:hover{font-weight: 600 !important;}
#frame_navbar .list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-FA);
    border: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    /*text-transform: uppercase;*/
    font-size: 1rem;
    border-bottom:  .1rem solid rgba(200, 200, 200, 0.3);

}

#frame_navbar .list-group-item:hover{
    cursor: pointer;
    color: var(--bs-warning);
    font-weight: 900;
}

#header .point_item{
  font-size: 1.4rem;
  font-weight: 400;
  padding-top: 7px;
  padding-bottom: 7px;
  text-transform: uppercase;
  text-align:  center;
}

#header .point_item:hover{
  font-weight: 800;
  cursor: pointer;
}


#header .caption_Werbung{height: 30vH;}
#header  .carousel-caption {
      position: absolute;
      right: 15%;
      top: 20%;
      left: 15%;
      color: #333;
      text-align: center;
      bottom: 30px;
      text-transform: uppercase;

}
.text-footer {text-align: left!important;}
@media(max-width: 992px){.text-footer {text-align: center !important;}}
#footer .a_follow{}
#footer .a_follow:hover{color: var(--bs-warning);}
#footer_litle a{font-weight: 600 !important; }
#footer_litle a:hover{font-weight: 600 !important; color: var(--bs-warning);}

#werbung .caption_Werbung{height: 40vH;}
#werbung{background-color: #FFF !important;color: var(--bs-FA) !important;}
#werbung .carousel-indicators [data-bs-target] {
      width: 30px !important;
      height: 15px !important;
      background-color: var(--bs-FA) !important;
  }

#werbung .carousel-caption {
        color: var(--bs-FA) !important;
        position: absolute;
        right: 15%;
        top: 2%;
        left: 15%;
        color: #fff;
        text-align: left;
        bottom: 40px;
  }
  @media(max-width: 992px){
      #werbung .py-15{padding-top: 3rem!important;    padding-bottom: 3rem!important;}
  #werbung .caption_Werbung{height: 40vH;}
  #werbung .display-1{font-size: 1.8rem;}
  #werbung p{font-size: 0.8rem;}
  #werbung .carousel-caption {
          color: var(--bs-FA) !important;
          position: absolute;
          right: 5%;
          top: 1%;
          left: 5%;
          color: #fff;
          text-align: left;
          bottom: 10px;
    }
  }



#studios_front{color: #FFF;background-color: var(--bs-FA) !important;}
#carusell_kurse .carousel-item {
  padding-top: 8%;
  align-items: center;
  justify-content: center;
  height: 340px;
}
#carusell_kurse .carousel-item > div {text-align: center;}
#carusell_kurse .carousel-inner{height: 340px;}
#carousel_snapfit .carousel-item{height: 70vH;}
#carousel_snapfit .item_one{
   background-image: url('/img/header_01.jpg');
     height: 70vH;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     justify-content: center;
     align-items: center;
     background-attachment: scroll;
  }
  #carousel_snapfit .carousel-caption {
      position:  absolute;
        right: 15%;
        top: 25%;
        left: 15%;
        color: #fff !important;
        text-align: left;
  }
  #carousel_snapfit .item_tow{
   background-image: url('/img/header_02.jpg');
     height: 70vH;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     justify-content: center;
     align-items: center;
     background-attachment: scroll;
  }

  #header .bg-header{
  background-image: url('/img/header_04.jpg');
    height:100vH;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    justify-content: center;
    align-items: center;
    background-attachment: scroll;
  }

  #header .header-caption{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: #FFF;
  }

#header .carousel-caption{height: 75vH !important; }

@media(max-width: 992px){
#header .py-15{padding-top: 3rem!important;padding-bottom: 3rem!important;}
#header .carousel-caption {
  text-align: center !important;
        color: var(--bs-FA) !important;
        position: absolute;
        right: 5%;
        top: 1%;
        left: 5%;
        color: #fff;
        text-align: left;
        bottom: 10px;
        height: 75vH !important;
  }
}
@media(max-width: 992px){
  #header .fs-2{font-size: 1rem !important;font-weight: 500 !important;}
  #header .display-4 {
      font-size: 1rem !important;
      font-weight: 900 !important;
  }
}

#header .display-head {
  font-size: calc(1.95rem + 1.8vw);
  font-weight: 900 ;
  padding-left: 3vW;
  padding-right: 3vW;
  line-height: calc(1.9rem + 0.8rem);
}
#header .content-4 {
  font-size: calc(0.925rem + 0.9vw);
  font-weight: 400 ;
  /*background-color: var(--bs-danger);*/
  color: var(--bs-white);
  padding-left: 2vW;
  padding-right: 2vW;
}


.border-plan{border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important;}
@media(max-width: 992px){.border-plan{border-bottom: none !important;}}

.btn-outline-white {
      --bs-btn-color: #FFF;
      --bs-btn-border-color: #FFF;
      --bs-btn-hover-color:  #FFF;
      --bs-btn-hover-bg: rgba(255, 255, 255, 0.225);
      --bs-btn-hover-border-color: rgba(255, 255, 255, 0.7);;
      --bs-btn-focus-shadow-rgb: 248,249,250;
      --bs-btn-active-color: #000;
      --bs-btn-active-bg: #FFFFFF;
      --bs-btn-active-border-color: #f8f9fa;
      --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
      --bs-btn-disabled-color: #FFF;
      --bs-btn-disabled-bg: transparent;
      --bs-btn-disabled-border-color: #FFF;
      --bs-gradient: none;
  }

  .glowing-box:hover {
      box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.15),
                  0 0 5px 6px rgba(255, 255, 255, 0.10),
                  0 0 5px 9px rgba(255, 255, 255, 0.05);
      position: relative;
  }

  .head_training{
    background-image: url('/img/header_03.jpg');
      height: 55vH;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      justify-content: center;
      align-items: center;
      background-attachment: scroll;
  }

   #training .training-caption{
    display: flex;
    align-items: center;
    justify-content: center; /* Optional: Zentriert auch horizontal */
    height: 100%; /* Sollte auf die Höhe des umgebenden Containers angepasst sein */
    text-align: center; /* Optional: Textzentrierung innerhalb der Box */
    color: #FFF;
  }
  #training .logo_nav{height: 40px;}

  @media(max-width: 992px){ }
  .header_studios{
  background-image: url('/img/header_03.jpg');
  height: 60vH;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
  background-attachment: scroll;
  color: #FFF;
  }

.hover_shadow{}
.hover_shadow:hover{--bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35) !important;box-shadow: var(--bs-box-shadow) !important;}

#preise .card{border: 0;}
#preise .card:hover{  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35) !important;}
#preise .card-header{background-color: inherit;text-align: center;border: 0;}
#preise .card-body{text-align: center;}
#preise .card-footer{background-color: inherit;text-align: center;border: 0;}
#preise .head_zusatz{background-color: var(--bs-danger);color: #FFF;text-align: center;display: inline-flex;font-size: .8rem;}

#preise_section .mobile_switch{display: none; visibility: hidden;}
#preise_section .desktop_switch{display: inherit; visibility: visible;}
@media(max-width: 992px){
#preise_section .mobile_switch{display: inherit; visibility: visible;}
#preise_section .desktop_switch{display: none; visibility: hidden;}
}

#slide_preise .card{border: 0;}
#slide_preise .card-header{background-color: inherit;text-align: center;border: 0;}
#slide_preise .card-footer{background-color: inherit;text-align: center;border: 0;}
#slide_preise .card-body{text-align: center;}
#slide_preise .head_zusatz{background-color: var(--bs-danger);color: #FFF;text-align: center;display: inline-flex;font-size: .8rem;}

#POPUP_frame {position: relative;}
/*#POPUP_Modal .btn-close { background-color: #FFF; position: absolute; top: 10px; right: 10px; z-index: 1051; }*/
#POPUP_Modal .modal-dialog {max-width: 700px !important;}
#POPUP_Modal .modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: inherit;
  padding-top: 0.8rem !important;
  padding-right: 0.8rem !important;
  padding-left: 0.8rem !important;
}

#probetraining{
background-image: url('/img/header_03.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
justify-content: center;
align-items: center;
background-attachment: scroll;
color: #FFF;
}
.bg-FA-opacity{background-color: rgba(16, 26, 38, 0.7);}

.number_input{max-width: 100px;}
#form_probetraining .tabFORM{min-height: 340px;}
#form_probetraining .form-check-input:checked {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
}
.flatpickr-day.selected,   .flatpickr-day.selected:focus,   .flatpickr-day.selected:hover,    .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: var(--bs-info) !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: var(--bs-info) !important;
}


.info_popup{
    max-width: 60px;
    max-height: 200px;
    position: fixed;
    bottom: 130px;
    left: 0px;
    font-size: 0.9rem;
    font-weight: 600;
    background-color: var(--bs-info);
    z-index: 1019;
    text-align: center;
    color: #ffffff !important;
    writing-mode: vertical-lr !important;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 7px;
    cursor: pointer;
    text-transform: uppercase;
}
.info_popup:hover{background-color:  rgba(var(--bs-info-rgb), 0.725);}

#studios_front   .progress, .progress-stacked {
      --bs-progress-height: 1.6rem;
      --bs-progress-font-size: 0.85rem;
      --bs-progress-bg: var(--bs-secondary-bg);
      --bs-progress-border-radius: var(--bs-border-radius);
      --bs-progress-box-shadow: var(--bs-box-shadow-inset);
      --bs-progress-bar-color: var(--bs-FA);
      --bs-progress-bar-bg: var(--bs-success);
      --bs-progress-bar-transition: width 0.6s ease;
      display: flex;
      height: var(--bs-progress-height);
      overflow: hidden;
      font-size: var(--bs-progress-font-size);
      background-color: var(--bs-progress-bg);
      border-radius: var(--bs-progress-border-radius);
      min-width: 320px;
      max-width: 320px;
      font-weight: 600;
  }
  @media(max-width: 992px){
    #studios_front   .progress, .progress-stacked {
          --bs-progress-height: 1.2rem;
          display: flex;
          height: var(--bs-progress-height);
          overflow: hidden;
          font-size: var(--bs-progress-font-size);
          background-color: var(--bs-progress-bg);
          border-radius: var(--bs-progress-border-radius);
          min-width: 250px;
          max-width: 250px;
          font-weight: 600;
      }


   }
  #day_kurse_canvas .offcanvas.offcanvas-start { width:  450px; border: 0;}
  #day_kurse_canvas .offcanvas-body{
       display: flex;
       align-items: center;
       justify-content: center;
       height: 100%;

  }

  @media(max-height: 800px){
  #day_kurse_canvas  .offcanvas-body{
         display: block;
         align-items: center;
         justify-content: center;
         height: 100%;
    }
  }
  .hover-warning:hover{color: var(--bs-warning);cursor: pointer;}
  .text-bg-dark-canvas {color: #fff!important; background-color: RGBA(var(--bs-FA-rgb),var(--bs-bg-opacity,0.95))!important;}
  .map-container {
      position: relative;
      width: 100%;
      height: 350px;
  }
  .map-container iframe {
      width: 100%;
      height: 100%;
      filter: grayscale(100%) brightness(80%);
      border: 0;
  }

  .map-container:hover iframe {
      width: 100%;
      height: 100%;
      filter: grayscale(0%) brightness(100%);
      border: 0;
  }

  .btn-close {
  color: v#FFF !important;
  fill: #FFF !important;
}
.close_modal_mitgliedschaft{
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 25px;
  right: 25px;
  line-height: 2.5rem;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 1200;
  text-align: center;
  color: #FFF !important;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-decoration: none;
}



 .tooltip-inner {
   max-width:  300px !important;
   padding: 1rem 1rem !important;
   color: var(--bs-tooltip-color);
   text-align: left !important;
   background-color:  rgba(16, 26, 38, 0.98) !important;
   border-radius: var(--bs-tooltip-border-radius);
   font-size: 0.8rem !important;
   box-shadow: var(--bs-box-shadow)!important;
}

.day_head{
  font-weight: 700;
  font-size: 0.8rem;
  background-color: var(--bs-info);
  border-radius: 5px;
  margin-bottom: 15px;
  color: #FFF;
  padding-top: 3px;
  padding-bottom: 3px;
}
  @media(max-width: 992px){
    .day_head{
      font-weight: 700;
      font-size: 0.8rem;
      background-color: var(--bs-info);
      border-radius: 5px;
      margin-bottom: 15px;
      margin-top: 3rem;
      color: #FFF;
      padding-top: 3px;
      padding-bottom: 3px;
      padding-left: 3rem;
      padding-right: 3rem;
      display: inline-block;
    }

  }
.kurs_head_kalstrasse{
  background-image: url('/img/karlstrasse_01.jpg');
    height: 55vH;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    background-attachment: scroll;
}
.kurs_head_hagsfeld{
  background-image: url('/img/hagsfeld_01.jpg');
    height: 55vH;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
    background-attachment: scroll;

}
 #kursplan .kurs-caption{
  display: flex;
  align-items: center;
  justify-content: center; /* Optional: Zentriert auch horizontal */
  height: 100%; /* Sollte auf die Höhe des umgebenden Containers angepasst sein */
  text-align: center; /* Optional: Textzentrierung innerhalb der Box */
  color: #FFF;
}
#kursplan .kursplan_height{min-height: 170px;}
@media(max-width: 992px){#kursplan .kursplan_height{min-height: inherit;}}



.cookie-wf{
position: fixed;
max-width: 550px;
background-color: var(--bs-white);
background-color: rgba(255, 255, 255, 0.75) !important;
backdrop-filter: blur(15px) saturate(150%);
-webkit-backdrop-filter: blur(15px) saturate(150%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--bs-border-radius-lg);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
bottom: 10px;
left: 10px;
right: 10px;
padding: 35px;
border-radius: 5px;
z-index: 1020;
}

.hidden-cookie{display: none; visibility: hidden;}
.show-cookie{
  display: block;
  visibility: visible;
  -webkit-animation-duration: 1s;
     animation-duration: 1s;
     -webkit-animation-duration: 2;
     animation-duration: 2;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both

}
.form-check-input:checked {
  background-color: var(--bs-info) !important;
  border-color: #0d6efd;
}

.galerie-p {  --bs-modal-padding: 1rem !important;padding-bottom: 0rem !important;}
@media(max-width: 992px){
.galerie-p { --bs-modal-padding: 0.3rem !important;padding-bottom: 0rem !important;}
}
#galerie img{/*filter: grayscale(100%); opacity: 0.8;*/}
#galerie img:hover{/*filter: grayscale(0%);opacity: 1;*/}
#galerie .logo_gal{filter: grayscale(100%); opacity: 0.3;}
#galerie .logo_gal:hover{filter: grayscale(100%); opacity: 0.3;}


#Krafttraining, .Krafttraining {
  background-image: url('/img/CARUSEL_01.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
}

#Ausdauertraining, .Ausdauertraining {
  background-image: url('/img/CARUSEL_02.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
}

#Functional, .Functional{
  background-image: url('/img/CARUSEL_03.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
}


#Kurse, .Kurse {
  background-image: url('/img/CARUSEL_05.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
}




#Krafttraining:hover,
#Ausdauertraining:hover,
#Functional:hover,
#Kurse:hover {
  animation: zoomIn 1s ease 1;
  /*background-size: calc(120% + 10vW);*/
  background-position: center center;
}

@media(max-width: 1200px){
  #Krafttraining:hover,
  #Ausdauertraining:hover,
  #Functional:hover,
  #Kurse:hover {
    animation: zoomIn 1s ease 1;
    /*
    background-size: calc(120% + 15vW);*/
    background-position: center center;
  }  }

  @media(max-width: 992px){
    #Krafttraining:hover,
    #Ausdauertraining:hover,
    #Functional:hover,
    #Kurse:hover {
      animation: zoomIn 1s ease 1;
      /*background-size: calc(120% + 20vW);*/
      background-position: center center;
    }  }


#heylight .col{
    cursor: pointer;
    padding: inherit;
    height: 75vH;
}


#heylight  .caption-heylight {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
}

@keyframes zoomIn {
  0% {background-size: calc(100% + 15vH);}
  100% {background-size: calc(110% + 20vH);}
}
.heylight_mobile_head{
  display: inline-block;
  text-transform: uppercase !important;
  font-weight: 800!important;
  border-radius: var(--bs-border-radius)!important;
  background-color: var(--bs-FA-tr)!important;
  color: #FFF  !important;
  padding-right: 1rem!important;
  padding-left: 1rem!important;
  font-size: calc(0.225rem + 3.8vw);
  padding-top: 0.2rem!important;
  padding-bottom: 0.2rem !important;
}
#heylight .caption-heylight-head{
      text-transform: uppercase !important;
      font-weight: 800!important;
      border-radius: var(--bs-border-radius)!important;
      background-color: var(--bs-FA-tr)!important;
      color: #FFF  !important;
      padding-right: 1rem!important;
      padding-left: 1rem!important;
      font-size: calc(0.625rem + 0.8vw);
      padding-top: 0.2rem!important;
      padding-bottom: 0.2rem !important;
}


.carusel_mobile_heylight{
height: 75vH;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
text-transform: uppercase;
}


#carousel_big_points .carousel-inner{height: 40vH;}
#carousel_big_points .carousel-item{
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;

  position: absolute;
}
#carousel_big_points .col{
  height: 100%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 8%;
}
#carousel_big_points .content_big_points{height: 100%; }
#big_points {height: 50vh;}
#big_points .carousel-inner,
#big_points .carousel-item {
  height: 100%;
  background-color: #FFF;
}

/* Zentrierung der Caption */
#big_points .carousel-caption {
  position: absolute;
  text-align: center;
  color: var(--bs-FA);
  max-width: 900px;
  height: 100%;
  bottom: inherit;
  top: 35%;
}

/* Styling für die Überschrift */
#big_points .carousel-caption  {
  font-size: calc(2rem + 0.2rem);
  font-weight: bold;
}
#big_points .display-7{
font-size: calc(0.9rem + 0.9vW);
}





.scroll-button:hover {
  background-color: #009fe1;
  color: #FFF;
}

.scroll-button {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background-color: #009fe1;
  color: #FFF;
  font-size: 23px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  cursor: pointer;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.scroll-button.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-button i {
  position: absolute;
}

.progress-ring {
  width: 100%;
  height: 100%;
  position: absolute;
}

.progress-ring__background {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
}

.progress-ring__progress {
  fill: none;
  stroke: #009fe1;
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}




@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px black) drop-shadow(0 0 10px black);
  }
  50% {
    filter: drop-shadow(0 0 15px white) drop-shadow(0 0 30px white);
  }
}

section.video-section {
     position: relative;
     height: 100vh;
     overflow: hidden;
   }

   section.video-section video {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }
   .video-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.4);
     display: flex;
     justify-content: center;
     align-items: center;
     color: white;
     text-align: center;
     padding: 2rem;
     flex-direction: column!important;
   }
   .video-overlay h1 {
     font-size: 3rem;
     text-shadow: 2px 2px 8px rgba(0,0,0,0.7);

   }
   .video-overlay svg {
     width: 70vw;
     animation: glowPulse 1.5s ease-in-out infinite;
   }



   .bg-navbar{
     background-color: rgba(16, 26, 38, 0.9); /* halbtransparent */
      backdrop-filter: blur(12px); /* Unschärfeeffekt */
      -webkit-backdrop-filter: blur(12px); /* Safari Support */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* optionaler Schatten für Tiefe */
      border-bottom: 1px solid rgba(16, 26, 38, 0.5); /* optionaler unterer Rand */
   }
   .dropdown-menu {
       --bs-dropdown-zindex: 1090;
       --bs-dropdown-min-width: 18rem;
       --bs-dropdown-padding-x: 0;
       --bs-dropdown-padding-y: 0.95rem;
       --bs-dropdown-spacer: 0.125rem;
       --bs-dropdown-font-size: 0.9rem;
       --bs-dropdown-color: #FFF;
       --bs-dropdown-bg: rgba(16, 26, 38, 0.7);
       --bs-dropdown-border-color: rgba(16, 26, 38, 0.7);
       --bs-dropdown-border-radius: var(--bs-border-radius);
       --bs-dropdown-border-width: var(--bs-border-width);
       --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
       --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
       --bs-dropdown-divider-margin-y: 0.2rem;
       --bs-dropdown-box-shadow: var(--bs-box-shadow);
       --bs-dropdown-link-color: var(--bs-white);
       --bs-dropdown-link-hover-color: var(--bs-warning);
       --bs-dropdown-link-hover-bg: rgba(16, 26, 38, 0.9);
       --bs-dropdown-link-active-color: #fff;
       --bs-dropdown-link-active-bg: #0d6efd;
       --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
       --bs-dropdown-item-padding-x: 2.9rem;
       --bs-dropdown-item-padding-y: 0.55rem;
       --bs-dropdown-header-color: rgba(16, 26, 38, 0.7);
       --bs-dropdown-header-padding-x: 1rem;
       --bs-dropdown-header-padding-y: 0.1rem;

       display: none;
       min-width: var(--bs-dropdown-min-width);
       padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
       margin: 0;
       font-size: var(--bs-dropdown-font-size);
       font-weight: 900 !important;
       text-transform: uppercase;
       color: var(--bs-white);
       text-align: left;
       list-style: none;
       background-color: var(--bs-dropdown-bg) !important;
       background-clip: padding-box;
       border: 0;
       border-radius: var(--bs-dropdown-border-radius);
       border: 0.2rem solid  rgba(255, 255, 255, 0.3);
   }
   .nav-item.dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
   }
   #modal_probetraining .modal-content {
   background-color: rgba(255, 255, 255, 0.95) !important;
   backdrop-filter: blur(15px) saturate(150%);
   }


   /* Ripple Effekt */
    .ripple {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.5);
      transform: scale(0);
      pointer-events: none;
    }