@font-face {
  font-family: 'Nunito Sans';
  src: url('/fonts/NunitoSans-VariableFont_YTLC,opsz,wdth,wght.ttf') format('ttf');
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
}

:root {
    --bs-secondary: #124755;
    --color-petrol: #124755;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(4rem + 2vh);
}

body {
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6, li {
  color: var(--bs-secondary) !important;
}

h2 {
    color: #333;
}

section i {
    color: #007bff;
}

.custom-overlay-text {
  color: rgb(47, 102,100) !important;
}

p {
    color: var(--bs-secondary) !important;
}


.text-secondary {
    color: var(--bs-secondary) !important;
}

.navbar-brand img {
  heigth: 40px;
}

.centered-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 3vw; /* Abstand zwischen den Menüpunkten */
}

.centered-menu .navbar-brand img {
    width: 60px; /* Logo-Größe */
    height: auto;
}

.custom-big-logo {
	max-height: 400px;
	width: auto;
}

.custom-navbar {

  background-color: #2e6665 !important; 

  letter-spacing: 2px;

}

.navbar .nav-link {
    transition: color 0.3s ease-in-out;
}

.navbar .nav-link:hover {
    color: #f8f9fa; /* Hellgrau */
}

.banner {
    position: relative;
}

.banner img {
    width: 100%;      /* Volle Breite der Seite */
    max-height: 80vh; /* Höchstens 80% der Bildschirmhöhe */
    object-fit: cover; /* Schneidet das Bild passend zu */
}
.overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    /*background: rgba(51, 127, 136, 0.5);*/
    background: rgba(185, 223, 223, 0.85);
    padding: 20px;
    border-radius: 10px;
    width: 30%;
}

.hero {
    position: relative;
    height: 80vh;
    background: url('../img/hero01.jpg') center/cover no-repeat;
}

.mobile-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Logo bleibt in der Mitte */
    top: 10px;
}

.responsive-img {
    max-width: 80%; /* Reduziert die Bildgröße */
    height: auto;   /* Hält das Seitenverhältnis */
    object-fit: cover; /* Falls nötig, um das Bild zuzuschneiden */
}

.custom-bg-primary {
    background-color: #F5F5F5!important;
}

.custom-bg-secondary {
    background-color: #b9dfdf !important;
}

.custom-hr {
    all: unset; /* Setzt alle Standardstile zurück */
    display: block; 
    width: 100%;
    height: 4px; /* Dicke der Linie */
    background-color: #a6d8d7;
    margin: 2rem 0 5vh;
    transition: background-color 2s ease-in-out;
}

/* Sicherstellen, dass Padding die Farbe nicht beeinflusst */
.custom-hr.in-view {
    background-color: #2e6665;
}

/* Falls Bootstrap oder andere Frameworks Padding setzen */
.custom-hr {
    padding: 0 !important;
    border: none !important;
    box-sizing: content-box; /* Verhindert, dass Padding oder Border die Größe beeinflussen */
}

.custom-footer p {
  color: gainsboro !important; 
}

.custom-link-primary {
  color: #DCDCDC !important;
}

.custom-link-primary:hover {
  color: #75c7c7 !important;
}

.custom-link-secondary {
  color: #124755 !important;
}

.custom-link-secondary:hover {
  color: #212529 !important;
}

.custom-insta {
	text-decoration: none;
}

#map {
  height: 400px;
}



/* Mobile */

@media (max-width: 992px) {
    .custom-big-logo {
		max-height: 250px;
    }

    .hero {
    	height: 110vh;
    }
}

@media (max-width: 768px) {
    .overlay {
        width: 80%;
        padding: 20px;
    }

    .centered-menu {
        display: block;
        text-align: center;
    }

    .navbar-toggler {
    	margin-left: auto !important;
   	margin-right: 0 !important;
  }

    .navbar-brand {
    	max-width:50%;
    }

    .custom-big-logo {
    	max-height: 200px;
    }

    .hero {
    	height: 110vh;
    }
}

@media (max-width: 480px) {
    .overlay {
        width: 90%; 
        padding: 10px; 
    }

    .overlay img {
    	max-width: 50%;
	height: auto;
    }

    .navbar-brand img {
	max-width: 20%;
	height: auto;
    }

    .lead, li {
    	font-size: 0.95rem;
    }

    .custom-fa15x {
    	font-size: 1.5em;
    }

    h4 {
    	font-size: 1.1rem;
    }

    .custom-gmap {
    	width: 100% !important;
    }

    .custom-big-logo {
    	max-height: 150px;
    }

    .hero {
    	height: 110vh;
    }

}

@media (max-width: 992px) and (min-width: 768px) {
    .hero {
        height: 100vh;
    }
}