@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: #124278;
--bs-FA-rgb: 18, 66, 120;
--bs-FA-tr: rgba(18, 66, 120, 0.7);
--bs-gray6: #ddd;
--bs-gray1: #1b2536;
--bs-gray2: #6b7178;
--bs-font-sans-serif: "Montserrat", serif;
--bs-background: #cccccc;
}

html{scroll-behavior: smooth;}
body{
background-color: var(--bs-white);
font-family: var(--bs-font-sans-serif)  !important;
font-weight: 300 !important;
color: var(--bs-gray2) !important;
font-size: 1.1rem !important;
letter-spacing: 0.02rem;
overflow-y: scroll;
overflow-x: hidden;
/*
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
*/
}
a {
  color: inherit ;
  text-decoration: none;
}
.tranzp-05{  color: rgba(255,255,255, 0.3) !important;}

.bgbodygg{
  background-image: url("/img/colorful_water_2.jpg");
  background-repeat: no-repeat;
  background-position: bottom !important;
  background-size: cover !important;
  background-attachment: fixed;

}
.pointer{cursor: pointer !important;}
h1,h2,h3,h4,h5,h6,.h5,.h6{font-weight: 300  !important;  color: var(--bs-FA);}

.p-h2o{font-size: 1.6rem !important;}
@media(max-width: 992px){
  .display-5{
    font-size: calc(1.425rem + 1.1vw)!important;
    font-weight: 300;
    line-height: 1.1;
  }
.p-h2o{font-size: 1.0rem !important;}
}

b{font-weight: 600 !important;}
.text-end-mobile{text-align: right !important;}
@media(max-width: 1320px){.display-3 {
    font-size: calc(1.525rem + 2.3vw);
    font-weight: 300;
    line-height: 1.2;
}
.display-6 {
    font-size: calc(1.375rem + 0.5vw);
    font-weight: 300;
    line-height: 1.2;
}
.display-3{
    font-size: calc(1.375rem + 0.5vw);
    font-weight: 300;
    line-height: 1.4;

}
}
@media(max-width: 992px){
  .text-end-mobile{text-align: start !important;}
  .mobile_hiden{display: none; visibility: hidden;}
}

.form-control:focus {
    border-color: var(--bs-light) !important; /* Ändert die Randfarbe */
    box-shadow: 0 0 0 0.15rem rgba(18, 66, 120, 0.85) !important;
}
.fw-bolder {
    font-weight: 400 !important;
}
.massenger_icon{color: var(--bs-FA)!important;}
.massenger_icon:hover{color: rgba(18, 66, 120, 0.65) !important;}
.bg-inherit{background-color: inherit !important;}
.bg-wasser{
  background-image: url('/img/colorful_water_2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  height: 100vh;

}

.bg-wasser_02{
  background-image: url('/img/wasser_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: inherit;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
    height: 100vH;
}

.btn-ssm {
    --bs-btn-padding-y: 0.05rem !important;
    --bs-btn-padding-x: 0.05rem !important;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.bg-freundeskreis{
  background-image: url('/img/babyschwimmen03.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  height: 100vh;
}

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



.middle_content {
      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 */

}

.bg-shuttleservice{
  height: 100vH;
  background-image: url('/img/shuttleservice.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: inherit;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;

}


.bg-FA{background-color: var(--bs-FA); color: var(--bs-white);}
.text-FA{color: var(--bs-FA);}
.nav-FA{font-size: 2rem !important;}
.text-xxs{font-size: 0.8rem !important;}
.fs-7{font-size: 0.7rem !important;}
.py-10 {padding-top: 6rem!important;padding-bottom: 6rem!important;}
.hover-card:hover{box-shadow: var(--bs-box-shadow)!important;}
.fw-bold-xxl {font-weight: 800!important;}
.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
    color: var(--bs-FA) !important;
    text-transform: uppercase!important;
    font-weight: 800 ;
}

.logo_color{
  stroke: #6B7178 !important;
  fill:  #6B7178 !important;
}

.wf_link{
  margin-left: 5px;
  margin-right:  5px;
  font-size: 0.6rem;
  text-decoration: none;
  color: var(--bs-gray2) !important;
}
.wf_link:hover{
  font-weight: bold;
  text-decoration: none;
  color: var(--bs-FA) !important;
}

.card_images_custom{
 height: 280px;
 background-repeat: no-repeat;
 background-position: center !important;
 background-size:  cover !important;
 background-attachment:  scroll;
 border-top-left-radius: var(--bs-card-inner-border-radius);
border-top-right-radius: var(--bs-card-inner-border-radius);
}

.images_row{
 height: 590px;
 background-repeat: no-repeat;
 background-position: center !important;
 background-size: cover !important;
 background-attachment:  scroll;

}

.images_row_tow{
  height: 390px;
  background-repeat: no-repeat;
  background-position: center !important;
  background-size:  cover !important;
  background-attachment:  scroll;

}
.middle_content{
    display: flex;
    	position: inherit;
    flex-direction: column;; /* Vertikale Ausrichtung der Inhalte */
    justify-content: center; /* Vertikale Zentrierung */
    align-items: flex-start; /* Horizontale Zentrierung (optional) */
    height: 100% !inherit; /* Höhe des Containers */
    text-align: left;; /* Zentrierung des Textes (optional) */
}

.bottom_content{
    display: flex;
    	position: inherit;
    flex-direction: column;; /* Vertikale Ausrichtung der Inhalte */
    justify-content: flex-end;; /* Vertikale Zentrierung */
    align-items: flex-start; /* Horizontale Zentrierung (optional) */
    height: 100% !inherit; /* Höhe des Containers */
    text-align: left;; /* Zentrierung des Textes (optional) */
}

.text-dark_shadow{text-shadow: 0px 0px 18px rgba(0, 0, 0, 1);}

#front_artikel .mark, mark {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    color: #fff;
    background-color: rgb(10 10 10 / 30%);
}
.card-text:last-child{margin-bottom: 0;font-size: 0.9rem !important;}
.card {border: var(--bs-card-border-width) solid #efefef !important;}
.form-label{font-size: 0.7rem !important;}
.form-check-input:checked{background-color: var(--bs-FA) !important;border-color: var(--bs-FA) !important;}
.mobile-py-10{
  padding-top: 6rem!important;
  padding-bottom: 6rem!important;
}



#footer_nav .list-group-item{color: #ccc !important;}


#nav_wf{
  background: rgba(255, 255, 255, 1) !important;
 }

#nav_wf .nav-link{
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-right: 1rem;
}

#nav_wf .nav-link:hover{
color: #ccc;
}

.btn-outline-FA {
    --bs-btn-color: var(--bs-FA);
    --bs-btn-border-color: var(--bs-FA);
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: var(--bs-FA);
    --bs-btn-hover-border-color: var(--bs-FA);
    --bs-btn-focus-shadow-rgb: 25,135,84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-FA);
    --bs-btn-active-border-color: #198754;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #198754;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #198754;
    --bs-gradient: none;
}

.btn-FA {
    --bs-btn-color: #FFF;
    --bs-btn-bg: var(--bs-FA);
    --bs-btn-border-color: var(--bs-FA);
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: var(--bs-FA-tr);
    --bs-btn-hover-border-color: var(--bs-FA-tr);
    --bs-btn-focus-shadow-rgb: var(--bs-FA-rgb);
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: var(--bs-FA);
    --bs-btn-active-border-color: var(--bs-FA);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--bs-FA);
    --bs-btn-disabled-border-color: var(--bs-FA);
}


.btn-sm-xxs {
    --bs-btn-padding-y: 0.23rem;
    --bs-btn-padding-x: 0.4rem;
    --bs-btn-font-size: 0.675rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}






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

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

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

}

#carousel_wasserfloh .carousel-caption {
  position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) !important;
   width: 90% !important;
   text-align: center !important;
   color: #fff !important;
}

@media(min-width: 992px){
  #carousel_wasserfloh .carousel-caption {
    position: absolute !important;
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
     width: 80% !important;
     text-align: center !important;
     color: #fff !important;
  }
}

/*
.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 1.25rem;
    left: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}

*/


#carousel_wasserfloh .carousel-indicators [data-bs-target] { height: 15px !important;}

.team_push{
  cursor: pointer;
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 15px;
    left:  15px;
    line-height: 2.5rem;
    font-size: 1.6rem;
    background-color: var(--bs-FA) !important;
    z-index: 100;
    text-align: center;
    color: #FFF !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-decoration: none;
}

.scrolltop {
 width: 40px;
 height: 40px;
 position: fixed;
 bottom: 15px;
 right: 15px;
 line-height: 2.5rem;
 font-size:1.6rem;
 background-color: var(--bs-FA) !important;
 z-index: 100;
 text-align: center;
 color: #FFF !important;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 text-decoration: none;
}
@media(max-width: 992px){
#carousel_wasserfloh .display-1{font-size: 2rem !important;}
#carousel_wasserfloh .fs-2{font-size: 1rem !important;}
.mobile-py-10{
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}
}


/* loading Animation  */
.dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--bs-gray6);
  color: #dc3545;
  box-shadow: 9999px 0 0 -5px var(--bs-gray6);
  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: var(--bs-gray6);
  color: var(--bs-gray6);
}
.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px var(--bs-gray6);
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}
.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px var(--bs-gray6);
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}
@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px var(--bs-gray6);
  }
  30% {
    box-shadow: 9984px 0 0 2px var(--bs-gray6);
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px var(--bs-gray6);
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px var(--bs-gray6);
  }
  30% {
    box-shadow: 9999px 0 0 2px var(--bs-gray6);
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px var(--bs-gray6);
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px var(--bs-gray6);
  }
  30% {
    box-shadow: 10014px 0 0 2px var(--bs-gray6);
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px var(--bs-gray6);
  }
}



#messenger_user{
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: rgba(var(--bs-light-rgb),1);
font-size: 24px;
cursor: pointer;
position: fixed;
bottom: 10px;
right: 10px;
}

#massenger_card{
  width: 100%;
  max-height: 80vh; /* Maximal 70% der Bildschirmhöhe */
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#massenger_modal{
  position: fixed;
  bottom: 10px;
  right: 10px;
  left: auto;
  width: calc(100% - 20px);
  max-width: 540px;
  z-index: 1100;
}


#nav-master {}
  .small-nav-wf {
    animation: open_nac 0.3s linear forwards;
    animation-delay: 0s;
    animation-iteration-count:1;
}

@keyframes open_nac {
  0% {


    padding-top: 0px;
    padding-bottom: 0px;
  }
  50% {

    padding-top: 5px;
    padding-bottom: 5px;
  }

  100% {

    padding-top: 10px;
    padding-bottom: 10px;
  }
}