/* Robuster Font-Stack im Body */
body,html {
  color: #424106 !important;
  background-color: #eee !important;
  margin: 0;

}
html, body { font-family: "Source Code Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }


/* source-code-pro-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-code-pro-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/source-code-pro-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-code-pro-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/source-code-pro-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-code-pro-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/source-code-pro-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



  
  .navbar a, .navbar a:visited {
    color: #707c4f;
  }
  
  .navbar a:hover {
    color: #424106 !important;
  }
  
  /* Mobile Navbar Hintergrund und Abstand */
.navbar-collapse.collapse.show {
    padding: 2rem 1rem;
    background-color: #eee;
  }
  
  /* Mobile Links */
  .navbar-collapse.collapse.show .nav-link {
    color: #707c4f !important;
    font-size: 1.2rem;
    padding: 0.5rem 0;
  }
  
  /* Hover-Effekt */
  .navbar-collapse.collapse.show .nav-link:hover {
    color: #424106 !important;
  }
  
 .navbar-toggler {
  border: none;
  background-color: #707c4f!important;

}

.navbar-toggler:hover {
  background-color:#424106 !important ;
}
  
  /* Desktop-Styles bleiben normal */
  @media (min-width: 992px) {
    .navbar-collapse {
      background-color: transparent !important;
      padding: 0;
    }
  
    .navbar-nav .nav-link {
      color: #707c4f !important;
      font-size: 1rem;
    }
  }

  .zero{
      margin-top: 0px;
      margin-bottom: 0px;
  }
  
  .hero {
    position: relative;

    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
    overflow: hidden;
    color:#424106;
  }
  

  
  /* Hero-Inhalt über dem Overlay */
  .hero .herotext {
    position: relative;
    z-index: 2;
    color: #424106; /* Textfarbe bleibt normal */
  }
  
  
  /* Für mobile Geräte: fixed durch scroll ersetzen */
  @media (max-width: 768px) {
    .hero {
      background-attachment: scroll; /* Fixed wird auf kleinen Geräten oft nicht unterstützt */
      height: auto;
      padding: 5rem 1rem;
    }
  
    .hero .herotext img {
      width: 70%;
    }
  }
  
  #reviews{
    padding: 3rem;
    align-items: center;
    justify-content: center;
  }
  



  
  .portrait {
    border-radius: 2rem;
    width: 100%;
    max-width: 400px;
    transform: translateY(-5vh);
  }
  
  #about .col-md-7 {
    margin-top: 2rem;
  }
  
  /* Kontakt */
  #contact {
    transform: translateY(2vh);
    
  }

  /* Footer */
  footer {
    background-color: #707c4f;
    color: white;
    text-align: center;
    padding: 2rem 1rem 1rem 1rem;
    position: relative;
  }

  footer a, footer a:hover{
    color:white;
  }
  
  /* Media Queries für kleine Bildschirme */
  @media (max-width: 992px) {
    .navbar .ml-auto {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
    .hero {
      height: auto;
      padding: 5rem 1rem;
    }
  
    #leistungen {
      padding: 3rem 1rem;
    }
  
    .cards {
      flex-direction: column;
      gap: 2rem;
    }
  
    .portrait {
      transform: translateY(0);
    }
  
    #about {
      transform: translateY(0);
    }
  
    #contact {
      transform: translateY(0);
    }
  
    .contact, .maps {
      margin: 1rem 0;
      padding: 1rem;
    }
  }
  
  @media (max-width: 576px) {
    .card-img-top {
      padding: 1rem;
    }
  
    .btn {
      padding: 0.5rem 1rem;
      z-index: 999;
    }
  
    .hero .herotext img {
      width: 70%;
    }
  }
  
  #myBtn{
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  background-color: #a4b07e;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 12px 15px;
  transition: opacity 0.3s ease;
}

#myBtn:hover {
  background-color: #8f9c6d;
}

.gruen{
    color: #a4b07e
}

.btngruen{
  background-color:#a4b07e !important;
  color:#ffffff !important;
}

.btngruen:hover{
  background-color:#707c4f !important;
  color: #a4b07e !important;
}

#angebot, #impressum{
  padding-top: 10vh;
}

.abstand{
  margin-top: 3vh;
}


#angebot p{
  color: #003f46;
}

#angebot li{
  padding: 1vh;
  color:#003f46;
}



ol.v {
  list-style-type: none;
margin-top: 3vh;
}

ul{
  color:#707c4f;
}


iframe{
  border-radius: 3vh;
}
#contact a, #contact a:visited{
  text-decoration: none;
  color:#003f46;
}
#contact a:hover{
  color:#009fb1;
}

form{
  margin-bottom: 10vh;
}

hr{
  border: 0.5px solid #a4b07e !important;
}

.impressumol{
  color:#424106;
}

.contact a, .contact a visited{
   color: #424106 !important;
}

.contact a:hover{
  color:#707c4f !important;
  text-decoration: none !important;
}

.instagram {
  width: 46px;
  height: 46px;
  background-image: url("../images/instahell.png");
  background-size: cover;
  background-position: center;
  transition: background-image 0.3s ease-in-out;
}

.instagram:hover {
  background-image: url("../images/instadunkel.png");
}

.phone {
  width: 46px;
  height: 46px;
  background-image: url("../images/phonehell.png");
  background-size: cover;
  background-position: center;
  transition: background-image 0.3s ease-in-out;
}

.phone:hover {
  background-image: url("../images/phonedunkel.png");
}

.mail {
  width: 46px;
  height: 46px;
  background-image: url("../images/mailhell.png");
  background-size: cover;
  background-position: center;
  transition: background-image 0.3s ease-in-out;
}

.mail:hover {
  background-image: url("../images/maildunkel.png");
}