@charset "UTF-8";
/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
:root {
  --red-light: #EB8D94;
  --blue-superlight: #D4EDF8;
  --brown-light: #CB9B61;
  --green-light: #88d66c;
}

/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
h1, h2, h3, h4, h5 {
  text-transform: none;
  white-space: normal;
  font-family: Inter, sans-serif;
  font-weight: 900;
  color: black;
  margin: 0 0 20px 0;
  padding: 0;
  margin-bottom: 15px;
}
h1.green, h2.green, h3.green, h4.green, h5.green {
  color: #50aa30;
  font-weight: 900;
  margin-bottom: 24px;
}
h1.green--subline, h2.green--subline, h3.green--subline, h4.green--subline, h5.green--subline {
  display: inline-block;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
h1.green--subline::after, h2.green--subline::after, h3.green--subline::after, h4.green--subline::after, h5.green--subline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 300px;
  height: 50px;
  margin-top: 6px;
  background-image: url("img/gallery-line-green.png");
  background-size: contain;
  background-repeat: no-repeat;
}
h1.green span, h2.green span, h3.green span, h4.green span, h5.green span {
  color: #88d66c;
}
h1.blue, h2.blue, h3.blue, h4.blue, h5.blue {
  color: #32A9DE;
  font-weight: 900;
  margin-bottom: 25px;
}
h1.blue--subline, h2.blue--subline, h3.blue--subline, h4.blue--subline, h5.blue--subline {
  display: inline-block;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
h1.blue--subline::after, h2.blue--subline::after, h3.blue--subline::after, h4.blue--subline::after, h5.blue--subline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 300px;
  height: 50px;
  margin-top: 6px;
  background-image: url("img/gallery-line-blue.png");
  background-size: contain;
  background-repeat: no-repeat;
}
h1.blue span, h2.blue span, h3.blue span, h4.blue span, h5.blue span {
  color: #8CCEEC;
}
h1.red, h2.red, h3.red, h4.red, h5.red {
  color: #E1515B;
  font-weight: 900;
  margin-bottom: 25px;
}
h1.red--subline, h2.red--subline, h3.red--subline, h4.red--subline, h5.red--subline {
  display: inline-block;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
h1.red--subline::after, h2.red--subline::after, h3.red--subline::after, h4.red--subline::after, h5.red--subline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 300px;
  height: 50px;
  margin-top: 6px;
  background-image: url("img/gallery-line-red.png");
  background-size: contain;
  background-repeat: no-repeat;
}
h1.red span, h2.red span, h3.red span, h4.red span, h5.red span {
  color: #EB8D94;
}
h1.black, h2.black, h3.black, h4.black, h5.black {
  color: black;
  font-weight: 900;
  margin-bottom: 25px;
}
h1.black span, h2.black span, h3.black span, h4.black span, h5.black span {
  color: #333;
}
h1.brown, h2.brown, h3.brown, h4.brown, h5.brown {
  color: #A17035;
  font-weight: 900;
  margin-bottom: 25px;
}
h1.brown--subline, h2.brown--subline, h3.brown--subline, h4.brown--subline, h5.brown--subline {
  display: inline-block;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}
h1.brown--subline::after, h2.brown--subline::after, h3.brown--subline::after, h4.brown--subline::after, h5.brown--subline::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25%;
  width: 300px;
  height: 50px;
  margin-top: 6px;
  background-image: url("img/gallery-line-brown.png");
  background-size: contain;
  background-repeat: no-repeat;
}
h1.brown span, h2.brown span, h3.brown span, h4.brown span, h5.brown span {
  color: #CB9B61;
}

h1 {
  font-size: 44px;
  line-height: 46px;
}

h2 {
  font-size: 34px;
  line-height: 36px;
}

p {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 26px;
}
p.bigger {
  font-size: 17px;
  line-height: 28px;
}

.trenner_100 {
  display: block;
  padding-bottom: 40px;
  clear: both;
}
@media (min-width: 992px) {
  .trenner_100 {
    padding-bottom: 100px;
  }
}

.trenner_40 {
  display: block;
  padding-bottom: 20px;
  clear: both;
}
@media (min-width: 992px) {
  .trenner_40 {
    padding-bottom: 40px;
  }
}

.trenner_20 {
  display: block;
  padding-bottom: 20px;
  clear: both;
}
@media (min-width: 992px) {
  .trenner_20 {
    padding-bottom: 20px;
  }
}

hr {
  border: none; /* Entfernt die Standardlinie */
  height: 3px; /* Höhe der Linie */
  background-color: #88d66c; /* Grüne Farbe */
  margin: 30px 0 30px 0;
}
@media (min-width: 992px) {
  hr {
    margin: 70px 0 70px 0;
  }
}

/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
.wrapper {
  margin-top: 20px;
  margin-bottom: 60px;
}
@media (min-width: 992px) {
  .wrapper {
    margin-top: 60px;
  }
}

.container {
  position: relative;
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1220px;
  }
}
/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
.footer {
  padding: 40px 0;
  background: white;
  border-top: 1px solid #ebebeb;
  position: relative;
}
.footer p {
  line-height: 14px;
}
.footer--links {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 18px;
  color: black !important;
}
.footer--links a {
  color: black !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 12px;
  padding: 0 0 16px 0;
  display: block;
}
.footer .logo {
  height: 40px;
  margin-bottom: 30px;
}
.footer .icon-svg {
  height: 1.4em;
  color: #363636;
  margin-right: 5px;
}
.footer a {
  text-decoration: none;
}
.footer small {
  margin-top: 0;
  margin-bottom: 0.8rem;
  line-height: 12px;
  display: block;
}
.footer h4 {
  font-size: 18px;
  font-weight: 500;
  color: black;
  margin-bottom: 14px;
}

.low-footer {
  width: 100%;
  background-color: #1b1f17;
  text-align: center;
  color: #CCC;
  text-decoration: none;
  font-size: 14px;
  padding: 15px 0 15px 0;
}
.low-footer a {
  color: #CCC;
  text-decoration: none;
}

/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
/* Fullscreen-Video */
/* Hintergrundbereich in voller Breite */
/* Hintergrundbereich in voller Breite */
.homeimg-container-back {
  position: relative;
}
.homeimg-container-back img {
  padding: 0;
}
@media (min-width: 992px) {
  .homeimg-container-back img {
    padding: 0 50px 0 0;
  }
}
.homeimg-container-back::after {
  content: "";
  position: absolute;
  top: -140px;
  left: -140px;
  width: 550px;
  height: 550px;
  background-image: url("img/img-backdrop-green2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: -1;
}

.start-category {
  position: relative;
  padding: 20px;
}
.start-category::after {
  content: "";
  position: absolute;
  top: 20%;
  left: -70px;
  width: 220px;
  height: 220px;
  background-image: url("img/back-contact-stripes.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: -1;
}
.start-category--wrapper {
  display: block;
  border-radius: 10px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  text-decoration: none;
  color: black;
}
.start-category--heading {
  margin: 25px 0 10px 0;
  color: #555 !important;
  font-size: 26px;
  font-weight: 800;
}
.start-category--backdrop {
  position: relative;
}
.start-category--backdrop img {
  margin-bottom: 20px;
  z-index: 0;
}
.start-category--link {
  padding: 5px 0 5px 20px;
  font-size: 16px;
  font-weight: 700;
  color: #50aa30;
  text-decoration: none;
  display: block;
  width: 100%;
  position: relative;
}
.start-category--link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 30px;
  height: 30px;
  background-image: url("img/arrow-right-short-full.svg");
  color: black;
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.contactpage--back {
  padding: 20px 10px 20px 10px;
  background-color: #f9f6f1;
  border-radius: 0;
}
@media (min-width: 992px) {
  .contactpage--back {
    padding: 40px;
    border-radius: 10px;
  }
}
.contactpage--back--text {
  padding-right: 0;
}
@media (min-width: 992px) {
  .contactpage--back--text {
    padding-right: 70px;
  }
}

/* Testimonial Box */
.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Positioniert das innere div unten */
}

.testimonial-box {
  background: #faf7f2;
  padding: 35px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 20px;
}
.testimonial-box--first {
  height: auto;
}
@media (min-width: 992px) {
  .testimonial-box--first {
    height: 250px;
  }
}
.testimonial-box--second {
  height: auto;
}
@media (min-width: 992px) {
  .testimonial-box--second {
    height: 300px;
  }
}
.testimonial-box--third {
  height: auto;
}
@media (min-width: 992px) {
  .testimonial-box--third {
    height: 350px;
  }
}
.testimonial-box--fourth {
  height: auto;
}
@media (min-width: 992px) {
  .testimonial-box--fourth {
    height: 400px;
  }
}
.testimonial-box::before {
  content: "";
  position: absolute;
  top: -15px;
  right: -8px;
  width: 50px;
  height: 35px;
  background-image: url("img/contact-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}

/* Zitat */
.testimonial-text {
  font-style: italic;
  color: #333;
}

/* Kundenname */
.testimonial-name {
  font-weight: bold;
  margin-top: 15px;
  color: #444;
}

.frontpage_contact--btn {
  position: relative;
  padding-left: 60px;
  padding-right: 50px;
  font-size: 22px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  margin-bottom: 60px;
  width: 100%;
  text-align: left;
}
@media (min-width: 992px) {
  .frontpage_contact--btn {
    margin-bottom: 0;
  }
}
.frontpage_contact--btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 30px;
  height: 30px;
  background-image: url("img/arrow-right-short.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.frontpage_contact--phone {
  font-size: 22px;
  position: relative;
  padding: 12px 0 12px 60px;
  margin-bottom: 15px;
  margin-top: 20px;
  border: 1px solid #faf7f2;
  border-radius: 10px;
  background-color: #faf7f2;
  font-family: Inter, sans-serif;
  font-weight: 600;
}
@media (min-width: 992px) {
  .frontpage_contact--phone {
    margin-top: 55px;
  }
}
.frontpage_contact--phone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 30px;
  height: 30px;
  background-image: url("img/phone.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.frontpage--videoprev--image {
  padding: 0;
}
@media (min-width: 992px) {
  .frontpage--videoprev--image {
    padding: 0 15px 20px 80px;
  }
}

.kontakt--btn {
  margin-top: 20px;
  border-radius: 10px !important;
  display: block;
  padding: 10px 10px 10px 60px;
  position: relative;
  text-align: left;
  font-size: 20px;
}
.kontakt--btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  width: 30px;
  height: 30px;
  background-image: url("img/arrow-right-short.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

#map {
  width: 100%;
  height: 500px; /* Höhe der Karte anpassen */
}

/* Hintergrundbereich mit voller Breite und schwarzem Hintergrund */
.video-wrapper {
  width: 100%;
  background-color: #1b1f17;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Video-Container mit fester Größe für große Bildschirme */
.video-container {
  position: relative;
  width: 100%;
  max-width: 1800px; /* Maximale Breite */
  height: 700px; /* Maximale Höhe */
  overflow: hidden;
}

/* Video skaliert sich, überflüssiger Bereich wird verborgen */
.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Video bleibt skaliert und füllt den Container */
  transform: translate(-50%, -50%);
}

/* Overlay für besseren Kontrast */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Dunkles Overlay */
}

/* Text über dem Video */
.video-content {
  padding-top: 25%;
}
.video-content h1 {
  color: rgb(225.25, 244.75, 218.25);
  font-size: 35px;
  line-height: 35px;
}
@media (min-width: 768px) {
  .video-content h1 {
    font-size: 55px;
    line-height: 55px;
  }
}
.video-content h4 {
  color: rgb(147.9, 218.1, 122.7);
  text-transform: uppercase;
  font-size: 25px;
  line-height: 25px;
}
@media (min-width: 768px) {
  .video-content h4 {
    font-size: 35px;
    line-height: 35px;
  }
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 1200px) {
  .video-container {
    height: 500px; /* Kleinere Höhe für mittlere Bildschirme */
  }
}
@media (max-width: 768px) {
  .video-container {
    height: 350px; /* Kleinere Höhe für Mobilgeräte */
  }
}
/*
DETAIL-PAGE PADDINGS
Version: 1.0
      &--red { --svg-color: var(--red-light); }
      &--blue { --svg-color: var(--blue-superlight); }
      &--brown { --svg-color: #EFE0CD; }
      &--green { --svg-color: var(--green-light); }
*/
.detailpage--row {
  margin-bottom: 30px;
  padding-top: 0;
}
@media (min-width: 992px) {
  .detailpage--row {
    margin-bottom: 60px;
    padding-top: 40px;
  }
}
.detailpage--first--img {
  position: relative;
}
.detailpage--first--img img {
  padding: 0;
  margin: 0;
}
@media (min-width: 992px) {
  .detailpage--first--img img {
    margin-top: 70px;
    padding: 0 50px 0 0;
  }
}
.detailpage--first--img::after {
  content: "";
  position: absolute;
  top: -40px;
  left: -140px;
  width: 550px;
  height: 550px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: -1;
}
.detailpage--first--img--green::after {
  background-image: url("img/img-backdrop-green2.png");
}
.detailpage--first--img--blue::after {
  background-image: url("img/img-backdrop-blue.png");
}
.detailpage--first--img--red::after {
  background-image: url("img/img-backdrop-red.png");
}
.detailpage--first--img--brown::after {
  background-image: url("img/img-backdrop-brown.png");
}
.detailpage--first--text {
  padding-top: 30px;
}
@media (min-width: 1400px) {
  .detailpage--first--text {
    padding: 0 80px 0 50px;
  }
}
.detailpage--second--text {
  padding-top: 40px;
}
@media (min-width: 768px) {
  .detailpage--second--text {
    padding: 20px 80px 0 0;
  }
}
.detailpage--second--faq {
  padding-right: 15px;
  padding-top: 40px;
}
@media (min-width: 768px) {
  .detailpage--second--faq {
    padding-right: 80px;
    padding-top: 40px;
  }
}
.detailpage--configurator {
  background-color: #f8f6f1;
  border-radius: 10px;
  padding: 25px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .detailpage--configurator {
    padding: 80px;
    margin-top: 0;
  }
}

.accordion-button {
  padding: 10px;
  line-height: 20px;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: #EEE;
  box-shadow: none;
}

/*
CONTACT BOX
Version: 1.0
*/
.contact-box {
  background-color: #f9f6f1; /* Helles Beige */
  position: relative;
  padding: 30px;
  border-radius: 10px;
  max-width: 500px;
  min-height: 350px;
  margin-top: 30px;
  margin-bottom: 40px;
}
@media (min-width: 576px) {
  .contact-box {
    margin-top: 0;
    margin-bottom: 100px;
    padding: 80px;
  }
}
.contact-box::before {
  content: "";
  position: absolute;
  top: -15px;
  right: -8px;
  width: 50px;
  height: 35px;
  background-image: url("img/contact-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
}
.contact-box::after {
  content: "";
  position: absolute;
  top: 45%;
  left: -170px;
  width: 400px;
  height: 400px;
  background-image: url("img/back-contact-stripes.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: -1;
  transform: rotate(15deg);
}
@media (min-width: 576px) {
  .contact-box--blog {
    margin-top: 0;
    margin-bottom: 100px;
    padding: 40px;
  }
}
.contact-box--blog::after {
  background-image: none;
}
.contact-box--title {
  margin-bottom: 35px;
  font-size: 18px;
}
.contact-box--phone {
  background: white;
  border-radius: 10px;
  font-size: 24px;
  padding: 10px 10px 10px 60px;
  position: relative;
}
.contact-box--phone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  background-image: url("img/phone.png");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}
.contact-box .btn {
  margin-top: 20px;
  border-radius: 10px !important;
  display: block;
  padding: 10px 10px 10px 60px;
  position: relative;
  text-align: left;
  font-size: 20px;
}
.contact-box .btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  width: 30px;
  height: 30px;
  background-image: url("img/arrow-right-short.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.contact-box .contact-info {
  font-size: 18px;
  color: #333;
}

.contact-box a.btn {
  font-weight: bold;
  border-radius: 25px;
}

/*
STRIPES BODY / FOOTER
Version: 1.0
*/
.back-edge {
  position: absolute;
  right: 0;
  z-index: -5;
}

.back-edge-bottom {
  position: absolute;
  bottom: -40px;
  left: -60px;
}

/*
YOUTUBE VIDEO
Version: 1.0
*/
/* Modal-Dialog auf 90% der Breite */
.modal-xl {
  max-width: 90%;
}

/* Dunklerer Modal-Backdrop */
.modal-backdrop {
  background-color: black !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

/* X-Schließen-Button sichtbar und besser positioniert */
.modal-close-button {
  position: absolute;
  top: 10px;
  right: -50px;
  font-size: 1.8rem;
  color: white !important;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1056;
  font-family: "Open Sans", sans-serif !important;
}

/* X-Button Hover-Effekt */
.modal-close-button:hover {
  color: #ccc !important;
}

.newjob {
  border-radius: 10px;
  background: #faf7f2;
  padding: 25px;
  position: relative;
  margin-bottom: 20px;
}

.year {
  font-size: 22px;
  font-weight: 800;
  padding: 15px;
  background-color: #a0e687;
  border-radius: 10px;
  margin-bottom: 7px;
  width: fit-content;
  float: left;
  margin-right: 15px;
  height: 80px;
  clear-after: both;
  padding-top: 26px;
}

.history {
  margin-bottom: 25px;
  display: block;
  float: none;
  clear: both;
}

/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
/* Logo Größe */
.navbar {
  margin-bottom: 15px;
}

.navbar-brand .logo {
  height: 60px; /* Logo anpassen */
  margin-top: 20px;
}
.navbar-brand .logo--sub {
  height: 70px; /* Logo anpassen */
  margin-top: 0;
}
.navbar-brand .logo--sub--water {
  margin-top: 15px;
}

/* Hauptmenü Styling */
.navbar-nav .nav-item {
  padding: 0;
}
.navbar-nav .nav-item a {
  font-size: 1.2rem;
  padding: 8px 20px !important;
  border-radius: 5px;
  margin-left: 5px;
  margin-bottom: 2px;
}
.navbar-nav .nav-item a:hover {
  background-color: #F8F7F3;
}
.navbar-nav .nav-item a.active {
  background-color: #F8F7F3;
}
.navbar-nav .nav-item a.nav-link--small {
  font-size: 1rem;
  padding: 0 20px;
}
.navbar-nav .nav-item a.nav-link--small--brown {
  background-color: rgba(196, 155, 100, 0.5019607843) !important;
}
.navbar-nav .nav-item a.nav-link--small--blue {
  background-color: rgba(154, 206, 235, 0.568627451) !important;
}
.navbar-nav .nav-item a.nav-link--small--red {
  background-color: rgba(235, 141, 148, 0.5215686275) !important;
}
.navbar-nav .nav-item a.nav-link--small--green {
  background-color: #b1df96 !important;
}

/* Fullscreen Menü */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 500;
}

/* Sichtbares Menü */
.fullscreen-menu.show {
  opacity: 1;
  visibility: visible;
}

/* Menüeinträge */
.fullscreen-menu a {
  color: white;
  font-size: 1.5rem;
  margin: 10px 0;
  text-decoration: none;
}

/* Close Button */
.menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 2.5rem;
  color: white;
  cursor: pointer;
  font-weight: 700;
}

/* Mobile Menü Button */
.mobile-menu-button {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: black;
}

/* Mobile: Verstecke Standard-Navigation */
@media (max-width: 991px) {
  .navbar-collapse {
    display: none !important;
  }
  .mobile-menu-button {
    display: block;
  }
}
/*
Theme Name: Erlebnisgarten Theme
Author: Micha
Description: Neue Website 2025
Version: 1.0
*/
.blog_post_list li {
  padding: 7px 0 7px 0;
  color: black;
}
.blog_post_list li a {
  text-decoration: none;
  color: black;
}

.blog__content {
  padding-right: 0;
}
@media (min-width: 992px) {
  .blog__content {
    padding-right: 70px;
  }
}

/*# sourceMappingURL=style.css.map */