/* Floating Buttons */
.floating-buttons1, .floating-buttons2 {
    position: fixed;
    z-index: 1050;
  }
  
  .floating-buttons1 {
    top: 23%;
    left: 97.5%;
  }
  
  .floating-buttons2 {
    top: 31%;
    left: 97.5%;
  }

  .floating-buttons3 {
    top: 40%;
    left: 97.5%;
  }
  
  .floating-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50px;
    height: 50px;
    background-color: #000000;
    color: #FFFFFF; /* Set Icon color to black */
    border-radius: 5px 0 0 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    padding-left:20px;
  }
  
  .floating-btn2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    color: #FFFFFF; /* Set Icon color to black */
    border-radius: 5px 0 0 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    padding-left:20px;
  }

  .floating-btn2:hover {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 50px;
    height: 50px;
    background-color: #25d366;
    color: #FFFFFF; /* Set Icon color to black */
    border-radius: 5px 0 0 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    padding-left:20px;
  }
  


  .floating-btn:hover {
    transform: scale(1.1);
  }
  
  .button-text {
    display: none; /* Standardmäßig ausblenden */
  }
  
  .button-text:hover {
    opacity: 1;
    margin-left: 10px;
    text-decoration: none;
    color:#FFFFFF;
  }  

  .bg-dark {
    background-color: #343a40 !important;
  }

  .bg-dark2 {
    background-color: #8c9bab !important;
  }

  .navbar-light .navbar-nav .nav-link {
    color: #000000;
    text-transform: uppercase;
    padding: 15px 25px;
    font-weight: 600;
  }

  .navbar-nav .nav-link:hover {
    color:#000000 !important;
    background-color:#FFFFFF;
  }

  .navbar-nav .nav-link:focus {
    color:#000000 !important;
    background-color:#FFFFFF;
  }

  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

  .head-logo {width:193px;
             height:193px;}


  .navbar-brand {display: flex;
                align-items: center;
                text-decoration: none;}

            .pacifico {
                font-family: 'Pacifico', cursive;
                font-size:45px; /* Schriftgröße anpassen */
                margin: 0;
                line-height: 1.2; /* Zeilenhöhe für "Christoph" und "Winter" */
                color:#000000;
                font-weight: 100;
            }
    
            .pacifico span {
                display: block; /* Jeder Name in einer eigenen Zeile */
            }

/* Styling für die Steuerung */
.custom-control1 {
    width: 50px;
    height: 50px;
    background-color: #000000; 
    border-radius: 50%; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    opacity: 1; 
    transition: background-color 0.3s ease, opacity 0.3s ease;
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 10; 
    padding-left: 10px;
  }
  
  .custom-control2 {
    width: 50px;
    height: 50px;
    background-color: #000000; 
    border-radius: 50%; 
    display: flex;
    justify-content: center; 
    align-items: center; 
    opacity: 1; 
    transition: background-color 0.3s ease, opacity 0.3s ease;
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    z-index: 10; 
    padding-left: 10px;
  }
  
  .custom-control-prev {
    left: 30 !important;
  }
  
  .carousel-control-prev {
    left: 3% !important;
    color:#FFFFFF;
  }
  
  .carousel-control-next {
    right: 3% !important;
    color:#FFFFFF;
  }
  
  .custom-control-next {
    right: 30px; 
  }
  
  .custom-control:hover {
    background-color: #000000; 
    opacity: 1; 
  }
  
  .custom-icon {
    background-color: transparent; 
    width: 16px; 
    height: 16px; 
    display: inline-block; 
    margin: 0; 
    position: relative; 
    color:#FFFFFF;
  }
  
  
  .custom-icon1 {
    background-color: transparent; 
    width: 16px;
    height: 16px; 
    display: inline-block; 
    position: relative; 
    color:#FFFFFF;
    margin-right: 10px;
  }
  
  .custom-icon2 {
    background-color: transparent; 
    width: 16px; 
    height: 16px; 
    display: inline-block; 
    position: relative; 
    color:#FFFFFF;
    margin-right: 10px;
  }
  

  h5 {
    font-size: 1.25rem;
    color: #000000 !important;
    font-weight: bold;
  }


  .content-area {
    padding: 2rem 0; /* Oben und unten etwas Platz */
}

.text-center {
    text-align: center;
}

.mb-4 {
    margin-bottom: 2rem;
}

img {
    border-radius: 8px; /* Rundung für Bilder */
}

hr {
  box-sizing: content-box;
  height: 3px;
  overflow: visible;
  border-color: #FFF !important;
}

.btn-primary {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}

.btn-primary:hover {
  color: #fff;
  background-color: #333;
  border-color: #333;
}

.btn-primary:focus {
  color: #fff;
  background-color: #333;
  border-color: #333;
}

.text-dark {
  color: #000 !important; /* Schwarz für die Icons */
}

.why-us-section {
  background-color: #f8f9fa; /* Heller, neutraler Hintergrund */
  border: 1px solid #ddd; /* Dezente Begrenzung */
  border-radius: 8px; /* Abgerundete Ecken */
  text-align: center; /* Zentrierter Inhalt */
}

.why-us-heading {
  font-size: 1.8rem; /* Größere Schriftgröße für die Überschriften */
  margin-bottom: 1rem;
}

.why-us-text {
  font-size: 1.1rem; /* Lesbare Schriftgröße */
  color: #555; /* Dezente Textfarbe */
}


.footer-call-to-action {
  background-color: #333; 
  color: #f1f1f1; 
  padding-top: 1.5rem; 
  padding-bottom: 1.5rem; 
  text-align: center; 
  font-size: 1.2rem;
  border-top: 2px solid #444; 
  margin-bottom: -3%;}

.footer-call-to-action p {
  margin-top:-5px;
  margin-bottom:10px; 
}

.footer-link {color:#000000;
                text-decoration: none;}

.footer-link:hover {color:#000000;
                      text-decoration: none;}
  
.footer-head {padding-top:15%;
                margin-left:-10%;}

.content-link {color:#000000 !important;
              text-decoration: none;}

.content-link:hover {color:#000000 !important;
                    text-decoration: none;}

.about-headline {text-align: left !important;
                font-size: 2rem;}
                


@media (max-width: 768px) and (orientation:portrait) {

.head-logo {
    width: 153px;
    height: 153px;
  }

  .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,.1);
    float: right;
    margin-left: 41%;
    margin-bottom: 2%;
  }

  .w-100 {
    width: 100% !important;
    height:180px;
  }

  .carousel-control-next {
    right: 5% !important;
    color: #FFFFFF;
  }
  
  .carousel-control-prev {
    left: 5% !important;
    color: #FFFFFF;
  }

  h1 {
    font-size: 1.5rem;
    padding: 23px;
    margin-top: -6%;
    margin-bottom: -7%;
  }

  h2 {
    font-size: 1.4rem;
    padding-left:20px;
    padding-right:20px;
  }

  h4 {
    font-size: 1.5rem;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
  }

  .carousel {
    position: relative;
    min-width: 100% !important;
  }

  .floating-buttons1 {
    top: 56%;
    left: 84.5%;}

    .floating-buttons2 {
      top: 65%;
      left: 84.5%;
    }

    .floating-buttons3 {
      top: 74%;
      left: 84.5%;
    }
    

    .floating-btn2 {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 50px;
      height: 50px;
      background-color: #25d366;
      color: #FFFFFF; /* Set Icon color to black */
      border-radius: 5px 0 0 5px;
      text-decoration: none;
      transition: all 0.3s ease;
      overflow: hidden;
      padding-left:20px;
    }
  
    .floating-btn2:hover {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 50px;
      height: 50px;
      background-color: #25d366;
      color: #FFFFFF; /* Set Icon color to black */
      border-radius: 5px 0 0 5px;
      text-decoration: none;
      transition: all 0.3s ease;
      overflow: hidden;
      padding-left:20px;
    }

    p {
      margin-top: 0;
      margin-bottom: 1rem;
      padding: 13px;
    }

    .btn-primary {
      color: #fff;
      background-color: #000000;
      border-color: #000000;
      margin-left: 3%;
      margin-bottom: 4%;
      margin-right: 3%;
    }

    .footer-head {
      padding-top: 3%;
      margin-left: -4%;
      margin-bottom: 5%;
    }

    .kontakt-img {margin-left:5%;
     margin-bottom:5%;}

     .kontakt-formular {padding:40px;}

     .galerie-images {margin-left:15%;}

    .about-headline {text-align: center !important;
      font-size: 2rem;}

      .lb-prev, .lb-next {
        display: block !important; /* Sichtbarkeit erzwingen */
        opacity: 1 !important; /* Sichtbar machen */
        z-index: 1000; /* Sicherstellen, dass sie über den Bildern liegen */
    }
    
    .lb-prev {
        left: 10px; /* Abstand vom linken Rand */
    }
    
    .lb-next {
        right: 10px; /* Abstand vom rechten Rand */
    }

}