@font-face {
  font-family: "Lovelo-Black";
  src: url("../fonds/Lovelo-Black.eot");
  src: url("../fonds/Lovelo-Black.eot?#iefix") format("embedded-opentype"),
    url("../fonds/Lovelo-Black.woff2") format("woff2"),
    url("../fonds/Lovelo-Black.woff") format("woff"),
    url("../fonds/Lovelo-Black.ttf") format("truetype");
}

@font-face {
  font-family: "Rafale";
  src: url("../fonds/Rafale-BG.ttf") format("truetype");
  /* Weitere Formate können hinzugefügt werden, wenn benötigt */
}

html {
  scroll-behavior: smooth;
  transition: scroll-behavior 0.5s ease-in-out;
}

body {
  margin: 0;
  font-family: "Lovelo-Black", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  scroll-behavior: smooth;
}

body::-webkit-scrollbar {
  display: none;
}

header {
  margin: 0;
}

menu {
  background: #b09f94;
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  position: sticky;
  top: 0;
  z-index: 101;
}

main {
  position: relative;
  width: 60%;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
}

form {
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

footer {
  display: flex;
  background: #b09f94;
  width: 100%;
  bottom: 0;
}

.footer {
  width: 100%;
  background-color: #b09f94;
}

.foot-links a img {
  width: 15px; 
  height: 15px;
}

.head {
  width: 98vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 12px;
}

.logo {
  height: 100%;
  display: flex;
  align-items: center;
}

.logo img {
  cursor: pointer;
  width: 300px;
}

.kontact {
  gap: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.whup {
  width: 100px;
  height: 100px;
}

.tel-mail a {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: #474647;
  text-decoration: none;
}

.tel-mail a img {
  width: 35px;
}

.whup a img {
  width: 100%;
  height: 100%;
}

.info-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f9f9f9;
}

.info-cintain a:hover {
  color: #b09f94;
}

.info-img img {
  height: 100%;
  width: 70%;
  object-fit: cover;
}

.menu-contain {
  width: 50vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: sticky;
  top: 0;
  overflow-x: scroll;
}

.menu-contain a {
  cursor: pointer;
  color: #474647;
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.menu-contain a:hover {
  background: #474647;
  color: #b09f94;
  border-radius: 5px;
  
}

.slider-container {
  position: relative;
  overflow: hidden;
  height: 700px;
}

.slider {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  transition: transform 1s ease-in-out;
}

.slide {
  min-width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.slide img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.img-info {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 70%;
  right: 0;
  width: 50%;
  height: 100px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.img-info::before {
  content: " ";
  position: absolute;
  border-bottom: 100px solid #b09f949e; /* Höhe der Abschrägung einstellen */
  border-left: 100px solid transparent;
  width: 100%;
}

.img-info-head {
  position: absolute;
  top: 60%;
  width: 50%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.img-info-head::before {
  content: " ";
  position: absolute;
  border-top: 100px solid #b09f949e; /* Höhe der Abschrägung einstellen */
  border-right: 100px solid transparent;
  width: 100%;
}

.info-text {
  color: white;
  margin: 0;
  z-index: 100;
}

.info-text p {
  margin: 0;
}

.dots-container {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.dot {
  height: 5px;
  width: 19.7%;
  background-color: #b09f94;
  cursor: pointer;
  
}

.dot.active {
  background-color: #474647;
}

.slider-navigation {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  transform: translateY(-50%);
  z-index: 1;
}

.nav-btn {
  cursor: pointer;
  padding: 15px;
  background-color: #b09f949e;
  color: #474647;
  border: none;
  border-radius: 4px;
  font-size: 18px;
}

.nav-btn:hover {
  background-color: #4746479e;
  color: #b09f94;
}

.btn-li {
  position: absolute;
  left: 12px;
}

.btn-re {
  position: absolute;
  right: 12px;
}

.abaut-info {
  font-family: "Rafale";
}

.about-contain {
  position: relative;
  overflow: hidden;
  padding: 0 12px 12px 0;
}

.abaut-text {
  height: auto;
  box-sizing: border-box;
  padding: 12px;
  background-color: #f9f9f9;
}

.icon-container {
  display: flex;
  width: 60vw;
  height: 180px;
  justify-content: space-around;
  align-items: stretch;
}

.icon-info {
  width: 250px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.icon-img {
  width: 80px;
  height: 80px;
}

.icon-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

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

.icon-text p {
  margin: 0;
}

.img-top {
  float: right; /* Neues Styling für die Bilder */
  width: 35%;
  height: 97%;
  padding: 12px;
  object-fit: cover;
}

.img-bot {
  float: left; /* Neues Styling für die Bilder */
  width: 35%;
  height: 97%;
  padding: 12px;
  object-fit: cover;
}

.img-li {
  float: left;
  padding: 12px;
  height: 95%;
  width: 50%;
  object-fit: contain;
}

.headline {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 45px;

  background-color: #b09f9463;
  color: #f9f9f9;
}

.headline h2 {
  margin: 0;
}
.infobuttons {
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 52px;
}

.infobuttons-fix {
  width: 100%;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.infobuttons button,
.infobuttons-fix button,
.infobuttons-fix a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  border-radius: 25px;
}

.infobuttons-fix button:hover,
.infobuttons-fix a:hover {
  filter: drop-shadow(5px 5px 5px #474647);
}

.infobuttons button img,
.infobuttons-fix button img,
.infobuttons-fix a img {
  width: 100%;
  object-fit: contain;
}

.main-icon {
  position: fixed;
  left: 80.5%;
  top: 50vh;
  transform: translate(0, -50%);
}

.formular {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-data {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form-data input {
  width: 250px;
  height: 25px;
  border: none;
}

.form-data label {
  color: #474647;
  font-size: 0.8rem;
}

.form-data textarea {
  width: 100%;
  height: 100px;
}

.footer-contain {
  width: 25%;
  color: #474647;
  padding: 12px;
}

.footer-contain p {
  font-family: "Rafale";
}

.foot-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: #474647;
  border-bottom: 2px solid #474647;
}

.fooot-icon {
  width: 25px;
  height: 25px;
}

.foot-links {
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.foot-links a {
  display: flex;
  gap: 10px;
  padding: 3px 10px 3px 0;
  text-decoration: none;
  color: #474647;
  font-family: "Rafale";
  cursor: pointer;
}

.foot-links a:hover {
  width: max-content;
  padding: 3px 10px 3px 0;
  text-decoration: underline 2px solid;
  background-color: #474647;
  color: #b09f94;
  border-radius: 8px;
}

.social-media {
  height: 65px;
  display: flex;
  flex-direction: column;
}

.social-media-con {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.social-media-con p {
  margin: 0;
}

.social-media-con img {
  width: 35px;
  height: 35px;
}

#nachObenButton {
  display: none; /* Anfangs verstecken */
  position: fixed; /* Position fixieren, damit er immer sichtbar bleibt */
  bottom: 20px; /* Abstand vom unteren Rand des Bildschirms */
  right: 20px; /* Abstand vom rechten Rand des Bildschirms */
  background-color: transparent;
  border: none; /* Kein Rand */
  border-radius: 5px; /* Abrundung der Ecken */
  cursor: pointer; /* Zeiger ändern, wenn der Benutzer darüber fährt */
}

#nachObenButton img {
  width: 45px;
  width: 45px;
}

#nachObenButton:hover {
  filter: drop-shadow(5px 5px 5px #474647);
}

.adsimple {
  padding: 12px;
}

.adsimple-122757288 {
  font-family: "Rafale";
}

.adsimple h2 ,.adsimple h1 {
  font-family: "Lovelo-Black";
}

.buttons {
  width: 25%;
  display: none;
}

.buttons a {
  padding: 0;
  border:none;
  background-color: transparent;
  width: 45px;
  height: 45px;
}

.buttons a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}