body{
    font-family: 'Roboto';
    font-weight: 300;
    color: #333;
    font-size: 18px;
    line-height: 120%;
}

h1, h2{
    font-family: 'Callheart';
    font-weight: normal;
    font-style: normal;
    color: #078bab;
    font-size: 72px;
}
a{
    color: #078bab;
}
.color-primary{
    color: #078bab;
}
.color-secondary{
    color: #06677f;
    
}
.text-size-1{
    font-size: 14px;
}
.text-size-2{
    font-size: 16px;
}
.text-size-3{
    font-size: 18px;
}

.navbar .btn-outline-secondary:link, .navbar .btn-outline-secondary:focus,.navbar .btn-outline-secondary:visited{
    color: #d0fafa;
    border: 2px solid #d0fafa;
    background-color: rgba(7, 139, 171, 0.8);
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 32px;
    text-transform: uppercase;
    
}
.navbar .btn-outline-secondary:hover{
    color: #078bab;
    border: 2px solid #d0fafa;
    background-color: #d0fafa;
}

.navbar .btn-outline-secondary:active{
    color: #d0fafa;
    border: 2px solid #d0fafa;
    background-color: transparent;
}

.navbar{
    background: #078BAB;
    background: -webkit-linear-gradient(0deg, rgba(7, 139, 171, 0) 0%, rgba(7, 139, 171, 0.95) 90%);
    background: -moz-linear-gradient(0deg, rgba(7, 139, 171, 0) 0%, rgba(7, 139, 171, 0.95) 90%);
    background: linear-gradient(0deg, rgba(7, 139, 171, 0) 0%, rgba(7, 139, 171, 0.95) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#078BAB", endColorstr="#078BAB", GradientType=0);
}
.navbar>.container-fluid,.navbar>.container{
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Standardgröße für das Logo */
.navbar-brand img {
    width: 330px; /* Deine ursprüngliche Breite */
    transition: width 0.3s ease-in-out; /* Sanfter Übergang für die Größenänderung */
    transform-origin: center center; /* Wichtig, damit das Bild aus der Mitte skaliert */
}

/* Kleinere Größe, wenn gescrollt wird */
.navbar-scrolled .navbar-brand img {
    width: 260px; /* Die gewünschte kleinere Breite */
}


/* Überschreibt Standard Bootstrap Verhalten, damit der Toggler immer sichtbar ist */
.navbar-toggler {
    display: block !important;
    border: 0px;
    color: #fff;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-toggler-icon {
    /* Standardmäßig ist das Bootstrap Icon ein SVG mit der Farbe currentcolor.
       Wir können die Farbe über filter anpassen, wenn das Icon zu dunkel ist. */
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    /* Dieser Filter macht ein schwarzes Icon weiß. Wenn es bereits weiß ist, ist das nicht nötig.
       Alternativ kannst du eine SVG-Datei direkt manipulieren oder eine andere Farbe setzen,
       falls dein Icon kein reines SVG ist. */
}

/* Stil für den ausklappenden Bereich */
.navbar-collapse.custom-expanded-menu {
    position: absolute; /* Positioniert das Menü unter der Navbar */
    top: 62%; /* Beginnt direkt unter der Navbar */
    left: 0;
    width: 100%;
    box-shadow: 0; /* Leichter Schatten */
    z-index: 1000; /* Stellt sicher, dass das Menü über anderen Inhalten liegt */
    flex-grow: 0; /* Verhindert, dass es unnötigen Platz einnimmt */
}

.navbar-scrolled .navbar-collapse.custom-expanded-menu{
    top: 52%;
}
/* Stellt sicher, dass die Navigationspunkte im ausklappenden Menü nebeneinander liegen */
.navbar-collapse.custom-expanded-menu .navbar-nav {
    display: flex; /* Aktiviert Flexbox für die Listenelemente */
    flex-direction: row; /* Ordnet die Elemente nebeneinander an */
    flex-wrap: wrap; /* Erlaubt das Umbrechen auf mehrere Zeilen bei Platzmangel */
    justify-content: center; /* Zentriert die Links horizontal */
    width: 100%; /* Nimmt die volle Breite des übergeordneten Containers ein */
}

/* Passt den Abstand zwischen den Links an */
.navbar-collapse.custom-expanded-menu .navbar-nav .nav-item {
    margin: 0 10px; /* Horizontaler Abstand zwischen den Links */
}

/* Optional: Anpassung für den Buchungsbutton im ausklappenden Menü */
.navbar-collapse.custom-expanded-menu .btn {
    width: 80%; /* Macht den Button etwas breiter im ausklappenden Menü */
    max-width: 300px; /* Begrenzt die maximale Breite */
    margin-bottom: 10px; /* Abstand zum unteren Rand */
}

/* Media Query für Desktop (ab lg-Breakpoint):
   Versteckt den ausklappbaren Bereich standardmäßig auf größeren Bildschirmen.
   Wird nur sichtbar, wenn der Toggler gedrückt wird.
*/
@media (min-width: 992px) { /* lg-Breakpoint für Desktop */
    .navbar .container {
        display: flex;
        justify-content: space-between; /* Verteilt Hamburger, Logo, Buchen-Button */
        align-items: center;
    }

    .navbar-brand {
        margin-left: auto; /* Zieht das Logo in die Mitte */
        margin-right: auto;
    }

    /* Der ausklappbare Bereich soll auf Desktop standardmäßig versteckt sein,
       es sei denn, der Toggler wird gedrückt. */
    .navbar-collapse.custom-expanded-menu {
        display: none !important; /* Versteckt den ausklappbaren Bereich auf Desktop standardmäßig */
    }

    /* Zeigt den ausklappbaren Bereich, wenn er aktiv ist (nur bei Toggler-Klick) */
    .navbar-collapse.custom-expanded-menu.show {
        display: block !important;
    }
}

/* Anpassung für kleine Bildschirme, falls die Links im aufgeklappten Menü zu eng werden */
@media (max-width: 767.98px) { /* Beispiel: für max. Tablet-Größe im Hochformat */
    .navbar-collapse.custom-expanded-menu .navbar-nav {
        flex-direction: column; /* Links wieder untereinander auf kleinen Bildschirmen */
        align-items: center; /* Zentriert die Links, wenn sie untereinander sind */
    }
    .navbar-collapse.custom-expanded-menu .navbar-nav .nav-item {
        margin: 5px 0; /* Vertikaler Abstand auf kleinen Bildschirmen */
    }
}

.navbar {
    padding-bottom: 0px;
    align-items: flex-start;
    height: 240px;
}

.nav-link, .nav-link:hover {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
    text-shadow: 0px 0px 5px #06677F;
}

.navbar .py-2 {
    padding-top: 0 !important;
}


.carousel-item {
}
.text-body-emphasis{
    color: #078bab!important;
}
.lead{
    font-size: 20px;
}
ul.icon-list{
    color: #06677f;
    font-size: 15px;
    font-weight:400;
    padding: 0;
    margin: 0 0 24px 0;
}
ul.icon-list li{
    list-style-type: none;
    width: 19%;
    padding: 12px;
    display: table-cell;
    text-align: center;
    border-right: 1px solid #e3e2e2;
    font-weight: 500;
}
ul.icon-list li:last-child{
    border-right: 0px;
}

ul.bullet-list{
    color: #06677f;
    font-size: 17px;
    font-weight:400;
    padding-left: 15px;
}
ul.bullet-list li{
    margin-bottom: 16px;
}

.modal-content {
    background-color:;
}
.lightbox a{
    background:#078bab;
    display: block;
}

.lightbox a:hover:before {
content: "\F62C";
    color: #fff;
    font-family: bootstrap-icons !important;
    height: 0;
    display: block;
    position: relative;
    top: 50px;
    background: transparent;
    text-decoration: none;
}

.lightbox a img:hover{
    opacity: 0.3;
}

.btn-outline-secondary{
    color: #078bab;
    border: 2px solid #078bab;
    background-color: none;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 32px;
    text-transform: uppercase;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus, .btn-outline-secondary:visited{
    color: #078bab;
    border: 2px solid #078bab;
    background-color: #fff;
}

.btn-primary{
    color: #fff;
    border: 2px solid #078bab;
    background-color: #078bab;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 32px;
    text-transform: uppercase;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:visited{
    color: #078bab;
    border: 2px solid #078bab;
    background-color: #fff;
}

.btn-lg{
    padding: 8px 24px;  
}

.booking-links a{
    color: #078bab;
    text-decoration: none;
   text-transform:uppercase;
   font-weight: bold;
   margin-right: 24px;
   font-size: 16px;
}
.booking-links a i{
    color: #7dc2d3;
    text-decoration: none;
   font-weight:100;
}
.contact-form{
    background-color: #eeeeee;
}
.source-img{
    margin-top: -40px;
    color: #eeeeee;
    text-shadow: -1px 3px 3px rgba(0,0,0,0.8);
    font-weight: 300;
    font-size: 15px;
}
.form-control{
    border-radius: 32px;
}

.form-floating>.form-control, .form-floating>.form-control-plaintext, .form-floating>.form-select {
    height: unset;
    min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
    line-height: 1.25;
    padding: 25px;
}
.form-floating>label {
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 2;
    max-width: 100%;
    height: 100%;
    padding: 1rem 1rem;
    overflow: hidden;
    color: rgba(var(--bs-body-color-rgb), .65);
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--bs-border-width) solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-floating>.form-control-plaintext:focus, 
.form-floating>.form-control-plaintext:not(:placeholder-shown), 
.form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown),
.form-floating>.form-control {
    padding-top: 30px;
    padding-bottom: 30px;

}

.form-floating>.form-control-plaintext~label,
.form-floating>.form-control~label,
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
    text-transform: uppercase;

}

.row.contact-form>*{
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

footer{
    background: #6EBDCF;
    background: linear-gradient(0deg,rgba(110, 189, 207, 1) 0%, rgba(84, 175, 197, 1) 100%);
    color: #fff;
}
footer .footer-nav{
    background: #3FA7BF;
    background: linear-gradient(0deg, rgba(63, 167, 191, 1) 0%, rgba(59, 164, 189, 1) 100%);
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
}

footer .footer-nav .nav-item a{
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
}
footer .copyright{
    text-transform:none;
    font-weight: 100;
}

#Top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    left: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #078bab; /* Set a background color */
    color: #ffffff; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    border-radius: 50%; /* Rounded corners */
    font-size: 26px;
    width: 50px;
    height: 50px;
  }
  
  #Top:hover {
    background-color: #3FA7BF; /* Add a dark-grey background on hover */
  }

#statusMessage .alert.alert-info{
    font-weight: 400!important;
    color: #078bab!important;
    background: rgba(110, 189, 207, .2)!important;
    border: 0!important;
    font-size: 16px!important;
    border-radius: 0!important;
}

#statusMessage .alert.alert-success{
    font-weight: 400!important;
    color: #017f7b!important;
    background: rgba(1, 127, 123, .1)!important;
    border: 0!important;
    font-size: 16px!important;
    border-radius: 0!important;
}

#statusMessage .alert.alert-danger{
    font-weight: 400!important;
    color: #e0285c!important;
    background: rgba(224, 40, 92, .1)!important;
    border: 0!important;
    font-size: 16px!important;
    border-radius: 0!important;
}
.accordion h2{
    font-family: 'Roboto';
}
.accordion{
    border: 0!important;
    border-radius: 0!important;
}
.accordion-button, .accordion-collapse, .accordion-button:not(.collapsed)  {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 1rem;
    color: #078bab;
    text-align: left;
    background-color: #f0f0f0;
    border: 0!important;
    border-radius: 0!important;
    overflow-anchor: none;
}

.accordion-collapse {
    color: #333;
}
.accordion-item,
.accordion-item:first-of-type,
.accordion-item:last-of-type {
    border: 0!important;
    border-radius: 0!important;
    border-bottom: 1px solid #fff;
}
.accordion-body{
    padding-top: 0px!important;
    padding-bottom: 0px!important;
    height: 100%;
}

/* Blendet das Standard-Bootstrap-Akkordeon-Icon aus */
.accordion-button::after {
    display: none; /* Verhindert die Anzeige des Standardpfeils */
}

/* Stil für den Akkordeon-Button, um das Icon und den Text auszurichten */
.accordion-button {
    display: flex; /* Nutze Flexbox für Ausrichtung */
    align-items: center; /* Vertikale Zentrierung von Icon und Text */
    gap: 10px; /* Abstand zwischen Icon und Frage */
}

/* Zustand: Akkordeon geschlossen */
.accordion-button.collapsed .faq-icon {
    display: inline-block; /* Zeigt das Plus-Icon */
}

.accordion-button.collapsed .faq-icon-active {
    display: none; /* Versteckt das Minus-Icon */
}

/* Zustand: Akkordeon geöffnet */
.accordion-button:not(.collapsed) .faq-icon {
    display: none; /* Versteckt das Plus-Icon */
}

.accordion-button:not(.collapsed) .faq-icon-active {
    display: inline-block; /* Zeigt das Minus-Icon */
}

/* Optional: Feinjustierung für das Akkordeon-Body-Padding, damit es zum Icon passt */
.accordion-body {
    padding-left: calc(1rem + 10px + 1em); /* Standard-Padding + Icon-Größe + Gap, anpassen falls nötig */
}

.accordion-button:not(.collapsed) {
    color: none!important;
    background-color: none!important;
    box-shadow: none!important;
}


@media (max-width: 540px) { 
    .navbar-brand img {
        width: 160px; /* Die gewünschte kleinere Breite */
    }
    .navbar-scrolled .navbar-brand.mx-auto,
    .navbar-brand.mx-auto{
        margin-right: 12px !important;
        margin-left: auto !important;
    }
    .navbar-scrolled .navbar-brand img {
    width: 160px; /* Die gewünschte kleinere Breite */
    }
    .navbar-scrolled .navbar-collapse.custom-expanded-menu,
    .navbar-collapse.custom-expanded-menu{
    top: 80px;
    padding-top: 10px;
    background: rgba(7, 139, 171, 0.8);
    }
    .navbar-scrolled .navbar-collapse.custom-expanded-menu .navbar-nav .nav-item,
    .navbar-collapse.custom-expanded-menu .navbar-nav .nav-item {
        margin: 0 0 6px 0;
    }
    .navbar-scrolled .nav-link, .navbar-scrolled .nav-link:hover,
    .nav-link, .nav-link:hover{
        padding: 0px;
    }
    .navbar-scrolled.navbar>.container-fluid, .navbar-scrolled.navbar>.container
    .navbar>.container-fluid, .navbar>.container {
    padding-bottom: 10px;
    }
    .navbar {
    height: 80px;
    background: #078BAB;
    }
    .carousel {
    margin-top: 80px;
}
}
@media (max-width: 576px) {
    .container, .container-sm {
        max-width: unset;
    }
}

.lightbox-caption em{
    background: rgba(0, 0, 0, 0.6);
    border-radius: 16px;
    display: inline-block;
    text-align: center;
    padding: 8px 16px !important;
    margin: 8px auto !important;
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
}

#myCarousel .carousel-control-next, #myCarousel  .carousel-control-prev {
    top: 0%!important;
}
.carousel-control-next, .carousel-control-prev {
    top: -10%!important;
}

@media (max-width: 576px) {
    #myCarousel .carousel-control-next, #myCarousel  .carousel-control-prev {
    top: 0%!important;
    }
    .carousel-control-next, .carousel-control-prev {
        top: -30%!important;
    }
}