:root {
    --dg: #115923;
    --mg: #1F7334;
    --lg: #2B8C44;
}
body, html {
  height: 100%;
}
.navbar a{
  color: var(--lg) !important;
  font-family: 'Montserrat' !important;
  font-weight: 500 !important;
  font-size: 20pt;
  transition: 0.5s;
}
.navbar a:hover {
  color: var(--lg) !important;
  font-family: 'Montserrat' !important;
  font-weight: 500 !important;
  font-size: 22pt;
}
body {
  font-family: 'Roboto';
  font-size: 110%;
  font-weight: bold;
}
h1 {
    font-family: 'Montserrat';
    font-weight: 500;
    color: var(--mg);
    font-size: 80pt;
}
h2{
    font-family: 'Montserrat';
    font-weight: 400;
    color: var(--mg);
    font-size: 20pt;
}
h3 {
  font-family: 'Montserrat';
    font-weight: 500;
    color: var(--lg);
    font-size: 40pt;
}
h4 {
  font-family: 'Montserrat';
    font-weight: 500;
    color: white;
    font-size: 40pt;
}
h5 {
  font-family: 'Montserrat';
    font-weight: bold;
    color: var(--lg);
    font-size: 30pt;
}
.picCONT {
  overflow: hidden;
  position: relative;
}
.portraits {
  width: 100%;
  height: auto;
  box-shadow: -5px 10px 10px 0px rgba(0,0,0,0.5);
  filter: grayscale(100%);
  transition: 0.5s;
  object-fit: cover;
}
.portraits:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
}
.slideshow{
  width: 100%;
  height: auto;
}
strong {
  color: var(--mg);
  font-size: 140%;
}
.fa-solid {
  color: white;
}
p a{
  text-decoration: none;
  color: black;
}
.slideshowPic {
  width: 100%;
  height: auto;
}
.team {
  background-color: rgb(202, 202, 202);
  padding: 40px;
}
.black {
  background-color: black;
  padding: 10px;
}
.roomPic {
  width: 100%;
  height: auto;
  box-shadow: -5px 5px 10px 5px rgba(0,0,0,0.5);
}
.home {
  background-color: rgb(202, 202, 202);
  padding: 40px;
}
a:hover {
  color: var(--lg);
  text-decoration: none;
}
.footer {
  background-color: black;
  padding: 40px;
}
#map {
  height: 350px;
  width: 100%;
}
.logo {
 height: 15%;
 width: auto;
  
}
 a{
  text-decoration: none;
  color: grey;
}
li {
  font-size: 14pt;
}
p {
  font-size: 14pt;
}
.adresse {
  color: white;
}


@media screen and (max-width: 768px) {
  .navbar a{
    color: var(--lg) !important;
    font-family: 'Montserrat' !important;
    font-weight: 500 !important;
    font-size: 20pt;
    transition: 0.5s;
  }
  .navbar a:hover {
    color: var(--lg) !important;
    font-family: 'Montserrat' !important;
    font-weight: 500 !important;
    font-size: 22pt;
  }
  body {
    font-family: 'Roboto';
    font-size: 110%;
    font-weight: bold;
  }
  h1 {
      font-family: 'Montserrat';
      font-weight: 500;
      color: var(--mg);
      font-size: 40pt;
  }
  h2{
      font-family: 'Montserrat';
      font-weight: 400;
      color: var(--mg);
      font-size: 10pt;
  }
  h3 {
    font-family: 'Montserrat';
      font-weight: 500;
      color: var(--lg);
      font-size: 20pt;
  }
  h4 {
    font-family: 'Montserrat';
      font-weight: 500;
      color: white;
      font-size: 20pt;
  }
  h5 {
    font-family: 'Montserrat';
      font-weight: bold;
      color: var(--lg);
      font-size: 20pt;
  }
  .picCONT {
    overflow: hidden;
    position: relative;
  }
  .portraits {
    width: 100%;
    height: auto;
    box-shadow: -5px 10px 10px 0px rgba(0,0,0,0.5);
    filter: grayscale(100%);
    transition: 0.5s;
    object-fit: cover;
  }
  .portraits:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
  }
  .slideshow{
    width: 100%;
    height: auto;
  }
  strong {
    color: var(--mg);
    font-size: 140%;
  }
  .fa-solid {
    color: white;
  }
  p a{
    text-decoration: none;
    color: black;
  }
  .slideshowPic {
    width: 100%;
    height: auto;
  }
  .team {
    background-color: rgb(202, 202, 202);
    padding: 40px;
  }
  .black {
    background-color: black;
    padding: 10px;
  }
  .roomPic {
    width: 100%;
    height: auto;
    box-shadow: -5px 5px 10px 5px rgba(0,0,0,0.5);
  }
  .home {
    background-color: rgb(202, 202, 202);
    padding: 40px;
  }
  a:hover {
    color: var(--lg);
    text-decoration: none;
  }
  .footer {
    background-color: black;
    padding: 40px;
  }
  #map {
    height: 350px;
    width: 100%;
  }
  .logo {
   height: 10%;
   width: auto;
    
  }
  a{
    text-decoration: none;
    color: grey;
  }
  li {
    font-size: 14pt;
  }
  p {
    font-size: 14pt;
  }
}

.parallax {
  /* The image used */
  background-image: url('../images/doubletrouble.jpg');

  /* Full height */
  height: 100%; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 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: var(--lg); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 16px; /* Increase font size */
line-height: 24px; /* Set the line-height for better alignment inside the box */
text-decoration: none;
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
text-decoration: none;
}
/* montserrat-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: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* montserrat-500 - 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: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


/* roboto-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: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


/* Das Hero Image */
.hero-image {
	/* Mit "linear-gradient" wird das Hintergrundbild (images/photographer.jpg) abgedunkelt, damit der Text leichter lesbar ist */
	background-image: url("../images/bg.jpg");

	/* Höhe des Hero-Images festlegen */
	height: 100vh; /* 50vh macht das Hero-Image nur halb so hoch */

	/* Ausrichtung und Zentrierung des Bildes, damit es auf allen Bildschirmen gut aussieht */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	justify-content: center;
}

/* Platziert einen Text in der Mitte des Bildes (optional) */
.hero-text {
	color: white;
	text-align: center;
	align-self: center;
}

.hero-text button {
	border: none;
	outline: 0;
	display: inline-block;
	padding: 10px 25px;
	color: black;
	background-color: #ddd;
	text-align: center;
	cursor: pointer;
}

.hero-text button:hover {
	background-color: #555;
	color: white;
}