/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #E89F78;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #F0F2EF;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 50px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 10px;
  line-height: 56px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #E89F71;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px 0px 0px;
  border-radius: 25px;
  transition: all .3s;
}

.icon-button a i {
  background-color: #f35525;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-left: -1px;
}

.icon-button a:hover {
  color: #f35525;
}

.icon-button a:hover i {
  color: #fff;
}

.main-button a {
  display: inline-block;
  background-color: #E89F71;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #f35525;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #F0F2EF;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #E89F78;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #AFD5AA;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.sub-header {
  background-color: #fff;
  padding: 10px 0px;
  border-bottom: 1px solid #eee;
}

.sub-header ul li {
  display: inline-block;
}

.sub-header ul.social-links {
  text-align: right;
}

.sub-header ul.social-links li {
  margin-left: 8px;
}

.sub-header ul.social-links li a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #cdcdcd;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header ul.social-links li a:hover {
  background-color: #f35525;
}

.sub-header ul.info li {
  font-size: 14px;
  color: #7a7a7a;
  border-right: 1px solid #eee;
  margin-right: 25px;
  padding-right: 25px;
}

.sub-header ul.info li:last-child {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

.sub-header ul.info li i {
  font-size: 20px;
  color: #f35525;
  margin-right: 8px;
}

.background-header {
  background-color: #fff;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  position: relative;
  background-color: #AFD5AA;
  height: 100px;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  line-height: 100px;
  font-size: 28px;
  text-transform: uppercase;
  color: #F0F2EF
  font-weight: 700;
  letter-spacing: 2px;
}

.background-header .main-nav .logo h1 {
  line-height: 80px;
}

.header-area .main-nav ul.nav {
  flex-basis: 100%;
  margin-top: 30px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 50px;
  line-height: 100px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  font-weight: 500;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #F0F2EF;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: .25px;
}

.logo-img {
  display: block;              /* empfiehlt sich bei transform */
  height: auto;                /* entfernt das 100%-Mapping auf Container */
  max-height: 100px;           /* Ausgangshöhe */
  width: auto;
  transition: max-height 0.3s ease;
}


.header-area .main-nav .nav li:last-child a {
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  border-radius: 20px;
  padding-left: 0px;
}

.header-area .main-nav .nav li:last-child a i {
  background-color: #E89F71;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  margin-left: -1px;
}

.header-area .main-nav .nav li:last-child:hover a {
  background-color: #1e1e1e;
}

.header-area .main-nav .nav li:last-child:hover a i {
  color: inherit;
}

.header-area .main-nav .nav li:hover a {
  color: #f35525;
}

.header-area .main-nav .nav li a.active {
  color: #f35525;
}


.background-header .main-nav .nav li a.active {
  color: #f35525;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #F0F2EF;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}


.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #F0F2EF;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #F0F2EF;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #F0F2EF;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.visible{
  display:inline !important;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }

}

@media (max-width: 767px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #AFD5AA;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 400;
    color: #F0F2EF;
    background-color: #AFD5AA;
     border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #AFD5AA;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #E89F71!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }


    /* Wenn Sticky aktiviert ist (z. B. durch Scroll) */
    .header-area.background-header .logo-img {
      max-height: 70px !important;
  }
  .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  }
  .header-area {
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #AFD5AA;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner .item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 220px 20% 320px 20%;
  margin-top: 0px;
}

.main-banner .item-1 {
  background-image: url(../images/heckenschnitt.jpg);
}

.main-banner .item-2 {
  background-image: url(../images/terrassenbau.png);
}

.main-banner .item-3 {
  background-image: url(../images/pflasterarbeiten.jpg);
}

.main-banner .item span.category {
  background-color: #AFD5AA;
  color: #F0F2EF;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 6px 15px;
  display: inline-block;
  margin-bottom: 30px;
}

.main-banner .item span.category em {
  font-style: normal;
  color: #F78764;
}

.main-banner .item h2 {
  font-size: 62px;
  font-weight: 700;
  text-transform: uppercase;
  color: #F0F2EF;
  line-height: 72px;
  width: 50%;
  margin-bottom: 0px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

/* Container */
.slider {
  position: relative;
  width: 100%;
  height: 600px;
  margin: auto;
  overflow: hidden;
}

/* Slides-Wrapper */
.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Einzelner Slide */
.slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* Aktiver Slide */
.slide.active {
  opacity: 1;
}


/* BUTTON-STYLING (speziell benannt) */
.slider-btn-prev,
.slider-btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  padding: 0.5em 1em;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 0.25rem;
  z-index: 10;
}

/* Spezifische Positionen */
.slider-btn-prev { left: 1rem; }
.slider-btn-next { right: 1rem; }

/* Hover-Effekt */
.slider-btn-prev:hover,
.slider-btn-next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Optional: Text im Slide etwas zentrieren */
.header-text {
  bottom: 2rem;
  left: 2rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}


/* 
---------------------------------------------
Featured Style
--------------------------------------------- 
*/

.featured .left-image {
  position: relative;
}

.featured .left-image img {
  border-radius: 25px;
}

.featured .left-image a {
  display: inline-block;
  width: 240px;
  height: 70px;
  line-height: 110px;
  background-color: #E89F71;
  border-radius: 20px;
  text-align: center;
  padding-left: 10px;
  position: absolute;
  left: 0px;
  bottom: -55px;
}

.featured .section-heading {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 60px;
}

.featured .section-heading h2 {
  width: 70%;
}

.featured .accordion {
  margin-left: 10px;
  margin-right: 10px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #AFD5AA;
  --bs-accordion-border-color: none;
  border: none !important;
}

.featured .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.featured .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #F0F2EF;
}

.featured .accordion-button:not(.collapsed) {
  color: #E89F78;
  background-color: #AFD5AA;
  outline: none;
}
.accordion-item {
    color: #77591F !important;

}

.featured .accordion-button::after {
  display: none;
}

.featured #headingThree {
  border-bottom: none;
}

.featured .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.featured .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;

  background-color: #AFD5AA;
}

.featured .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.featured .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.featured .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.featured .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.featured .info-table ul li h4 span {
  font-size: 15px;
  color: #F0F2EF;
  font-weight: 400;
}

/* 
---------------------------------------------
Video Style
--------------------------------------------- 
*/

.video {
  background-image: url(../images/video-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 100px 0px;
  position: relative;
}

.video .background {
 position: relative;



}

.video-content {
  margin-top: -240px;
}

.video .section-heading h2 {
  color: #F0F2EF;
}

.video-content .video-frame {
  position: relative;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.video-content .video-frame img {
  border-radius: 10px;
}

.video-content .video-frame a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-26px, -26px);
  width: 52px;
  height: 52px;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #f35525;
  outline: 15px solid rgba(254, 85, 37, 0.5);
  font-size: 18px;
}

/* 
---------------------------------------------
Fun Facts Style
--------------------------------------------- 
*/

.fun-facts {
  text-align: center;
  margin-top: 50px;
}

.fun-facts .counter {
  background-color: #AFD5AA;
  position: relative;
  border-radius: 10px;
  width: 270px;
  padding: 20px 0px;
  display: inline-block;
}

.fun-facts .counter h2,
.fun-facts .counter p {
  display: inline-flex;
  vertical-align: middle;
}

.fun-facts .counter p {
  text-align: left;
  font-size: 16px;
  color: #F0F2EF;
  font-weight: 600;
  line-height: 28px;
}

.fun-facts .counter h2 {
  margin-right: 25px;
  font-size: 35px;
  color: #E89F71;
}

.fun-facts .counter:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #E89F71;
  border-radius: 50%;
  content: '';
  right: -25px;
  top: -25px;
}


/* 
---------------------------------------------
Best Deal Style
--------------------------------------------- 
*/

.best-deal {
  background-color: #AFD5AA;
  padding: 100px 0px;
}

.best-deal .tab-content img {
  padding: 0px 45px;
}

.best-deal .tabs-content .nav-link {
  font-size: 16px;
  font-weight: 500;
  background-color: #1e1e1e !important;
  border-radius: 25px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0px 25px;
  color: #fff;
}

.best-deal .tabs-content .nav-tabs .nav-link.active {
  background-color: #f35525 !important;
  color: #fff;
}

.best-deal .tabs-content ul.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 80px;
  align-items: end;
  justify-content: end;
  margin-top: -130px;
}

.best-deal .tabs-content ul.nav-tabs li {
  padding-right: 0px;
  border-right: none;
  margin-left: 20px;
}

.best-deal .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.best-deal .info-table ul li {
  display: block;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

.best-deal .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.best-deal .info-table ul li span {
  font-size: 20px;
  color: #1e1e1e;
  font-weight: 700;
  float: right;
  display: inline-block;
}

.best-deal .tabs-content {
  padding: 0px;
  background-color: transparent;
}

.best-deal .tabs-content h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 30px;
}

.best-deal .icon-button {
  margin-top: 30px;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties .item {
  background-color: #AFD5AA;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
}

.properties .item img {
  border-radius: 10px;
}

.properties .item span.category {
  background-color: #E89F71;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #F0F2EF;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 25px;
}

.properties .item h4 {
  font-size: 19px;
  margin: 25px 0px;
}

.properties .item h4 a {
  color: #F0F2EF;
}

.properties .item ul li {
  display: inline-block;
  font-size: 15px;
  color: #F0F2EF;
  margin-right: 20px;
}

.properties .item ul li span {
  font-weight: 600;
  color: #F0F2EF;
}

.properties .item ul {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.properties .item h6 {
  font-size: 20px;
  color: #E89F71;
  margin-top: 6px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}

.properties .item .main-button {
  text-align: center;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact {
  padding: 50px 0px 150px 0px;
  position: relative;
  overflow: hidden;
}

.contact .background{
  background-image: url(../images/stadtpark.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: absolute;
  height: 65%;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 0;
filter: blur(5px);
  }

.contact .section-heading {
  position: relative;
  z-index: 1;
  padding-bottom: 50px;
}

.contact .section-heading h2 {
  color: #F0F2EF;
  font-size: clamp(1.2rem, 5vw, 2.5rem);
}

.contact-content {
  margin-top: -240px;
  position: relative;
  z-index: 1;
}

.contact-content #map {
  border-radius: 10px;
  margin-bottom: 60px;
}

.contact-content .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content .phone {
  margin-right: 15px;
}

.contact-content .email {
  margin-left: 15px;
}

.contact-content .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-content .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-content .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-content #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-content #contact-form input,
.contact-content #contact-form select, /* Hinzugefügt für die Auswahlbox */
.contact-content #contact-form textarea {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-content #contact-form select {
  height: 44px; /* Gleiche Höhe wie das Inputfeld */
  -webkit-appearance: none; /* Entfernt das Standard-Styling des Browsers */
  -moz-appearance: none;
  appearance: none;
  background-color: #f6f6f6;
  border-radius: 22px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
}

.contact-content #contact-form textarea {
  height: 150px;
  max-height: 180px;
  padding: 15px 15px;
}

.contact-content #contact-form button {
  background-color: #AFD5AA;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #F0F2EF;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-content #contact-form button:hover {
  background-color: #f35525;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer.footer-no-gap {
  margin-top: 0px;
}

footer {
  padding-top: 50px;
  margin-top: 150px;
  background-color: #AFD5AA;

  min-height: 150px;
  height: auto;
}

footer p {
  text-align: center;
  line-height: 40px;
  color: #F0F2EF;
  font-size: 16px;
  font-weight: 400;
}

footer p a {
  color: #F0F2EF;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.50;
}


/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0px;
  text-align: center;
}

.page-heading.haupt {
  background-image: url(../images/background-sub.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}


.page-heading.gruenschnitt {
  background-image: url(../images/heckenschnitt.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading.zaunbau {
  background-image: url(../images/zaun.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading.pflasterarbeiten {
  background-image: url(../images/pflasterarbeiten.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading.gartenpflege {
  background-image: url(../images/gartenpflege.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading.maurerarbeiten {
  background-image: url(../images/maurerarbeiten.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
.page-heading.neugestaltung {
  background-image: url(../images/umgestaltung.jpeg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading.poolbau {
  background-image: url(../images/pool.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading.individuelles {
  background-image: url(../images/sonderanfragen.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}


.page-heading.terrasse {
  background-image: url(../images/terrassenbau.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-heading span {
  border-radius: 10px;
  background-color: #E89F78;
  color: #F0F2EF;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 25px;
  display: inline-block;
  margin-bottom: 30px;
}

.page-heading span a {
  color: #F0F2EF;
}

.page-heading h3 {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties ul.properties-filter {
  list-style: none;
  text-align: center;
  margin-bottom: 70px;
}

.properties ul.properties-filter li {
  display: inline-block;
  margin: 5px 8px;
}

.properties ul.properties-filter li a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  color: #F0F2EF;
  background-color: #E89F71;
  padding: 12px 25px;
  border-radius: 5px;
  transition: all .3s;
}

.properties ul.properties-filter li a.is_active {
  background-color: #f35525;
  color: #fff;
}

.properties ul.properties-filter li a.is_active:hover {
  color: #fff;
}

.properties ul.properties-filter li a:hover {
  color: #f35525;
}

.properties ul.pagination {
  margin-top: 50px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.properties ul.pagination li {
  display: inline-block;
  margin: 0px 5px;
}

.properties ul.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  transition: all .3s;
}

.properties ul.pagination li a:hover,
.properties ul.pagination li a.is_active {
  background-color: #f35525;
  color: #fff;
}


/* 
---------------------------------------------
Single Page Style
--------------------------------------------- 
*/

.single-property .main-image img {
  float: none;
}

.single-property .main-content h4 {
  font-size: 25px;
  margin-top: 25px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.single-property .main-content span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 40px;
}

.single-property .accordion {
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #AFD5AA;
  --bs-accordion-border-color: none;
  border: none !important;
}

.single-property .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.single-property .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.single-property .accordion-button:not(.collapsed) {
  color: #f35525;
  background-color: #AFD5AA;
  outline: none;
}

.single-property .accordion-button::after {
  display: none;
}

.single-property #headingThree {
  border-bottom: none;
}

.single-property .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.single-property .info-table {

  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  margin-left: 60px;
}

.single-property .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.single-property .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.single-property .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.single-property .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.single-property .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}


/* 
---------------------------------------------
Contact Page Style
--------------------------------------------- 
*/

.contact-page #map {
  margin-top: 100px;
}

.contact-page .section-heading {
  margin-bottom: 40px;
  margin-right: 280px;
}

.contact-page p {
  margin-bottom: 50px;
}

.contact-page .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
  display: inline-block;
  min-width: 360px;
}

.contact-page .phone {
  margin-bottom: 30px;
}

.contact-page .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-page .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-page .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-page #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-page #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-page #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-page #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-page #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-page #contact-form button:hover {
  background-color: #f35525;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h1 {
    line-height: 80px !important;
  }
  .best-deal .tabs-content .nav-link {
    font-size: 14px;
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
  }
  .best-deal .tabs-content ul.nav-tabs li {
    margin: 0px 5px;
  }
  .properties ul.properties-filter li a {
    font-size: 14px;
    padding: 10px 15px;
  }
  .properties ul.properties-filter li {
    margin: 5px;
  }
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  .header-area .main-nav .logo h1 {
    line-height: 100px;
  }
  .background-header .main-nav .logo h1 {
    line-height: 80px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 3px;
    padding-right: 3px;
  }
  .header-area .main-nav .nav li:last-child a {
    padding-right: 15px;
  }
  .main-banner .item h2 {
    width: 100%;
  }
  .featured .section-heading {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 100px;
  }
  .featured .accordion {
    margin-left: 0px;
    margin-right: 0px;
  }
  .featured .info-table {
    margin-top: 45px;
  }
  .fun-facts .counter {
    margin-bottom: 45px;
  }
  .best-deal .section-heading {
    text-align: center;
  }
  .best-deal .tabs-content ul.nav-tabs {
    margin-top: 0px;
    justify-content: center;
  }
  .best-deal .info-table {
    margin-bottom: 45px;
  }
  .best-deal .tab-content img {
    padding: 0px;
  }
  .best-deal .tabs-content h4 {
    margin-top: 45px;
  }
  .properties .item h6 {
    text-align: center;
    margin-bottom: 15px;
  }
  .properties .item .main-button {
    text-align: center;
  }
  .properties .item ul li {
    margin-right: 10px;
    font-size: 13px;
  }
  .contact-content .phone {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .contact-content .email {
    margin-left: 0px;
    margin-bottom: 45px;
  }
  .contact-content #contact-form {
    margin-left: 0px;
  }
  .single-property .info-table {
    margin-left: 0px;
    margin-top: 45px;
  }
  .contact-page .section-heading {
    margin-right: 0px !important;
  }
  .contact-page #contact-form {
    margin-left: 0px;
    margin-top: 60px;
  }
  .best-deal .info-table ul li span {
    float: right !important;
    width: auto !important;
  }
}



/* 1. Grundstruktur */
.calculator {
  margin-top: 70px;
  width: 100%;
  height: auto;
  background-image: url(../images/calculatorbg.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
  /* padding: 220px 20% 320px 20%;  <-- hier komplett raus */
  padding: 40px 40px 40px 40px;         /* kleineres Padding, damit Inhalt sichtbar bleibt */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
    align-items: flex-start;  /* ⬅️ oben bündig statt zentriert */
    justify-content: center;

  align-self: flex-start;  /* bleibt oben kleben */
    transition: height 0.4s ease;
}





/* Alle Seiten: starten rechts außen und versteckt */
/* Grid-Layout für den Calculator-Inhalt */
.slider-page.parent {
  width: 100%;
  height: 100%;
  padding: 20px;
  text-align: center;
  color: #F0F2EF;
  background: transparent;
  z-index: 1;
  position: relative;
  top: 0; left: 0;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex;                 /* wichtig für zentrierung */
  justify-content: center;
  align-items: center;
}


/* Container bekommt jetzt auto-Height und eine Transition */
.slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* auto-Height, mit Transition */
  height: auto;
  transition: height 0.4s ease;
}




/* 2. Alle Pages grundlegend */
.slider-page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;              /* damit sie die volle Höhe des Containers einnehmen */
  box-sizing: border-box;
  padding: 20px;             /* dein Wunsch-Padding */
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 1;
}

/* 3. Vorherige Page fährt nach links raus */
.slider-page.prev {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}

/* 4. Aktive Page fährt rein und bleibt oben */
.slider-page.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}



/* Button-Styling */
/* Layout der Button-Gruppe */
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* Grundstil für jeden Service-Button */
.service-btn,
.nav-btn{
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 350px;       /* Optional: Maximalbreite pro Button */
  height: 70px;           /* Button-Höhe */
  border: none;
  border-radius: 15px;
  overflow: hidden;       /* Damit das Bild im Rahmen bleibt */
  cursor: pointer;
  padding: 0;
  background-color: #E89F71;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);

  transition: all .3s;
}

.service-btn:hover,
.nav-btn:hover {
  background-color: #f35525;
}

.btn-img {
  flex: 0 0 20%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(2px);
}

/* Text-Teil: 80% Breite, linksbündig */
.btn-text {
  flex: 0 0 80%;
  padding: 0 15px;
  font-size: 1rem;
  font-weight: 400;
  color: #F0F2EF;
  text-align: left;
}

/* Input-Styling */
input[type="number"] {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 80%;
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .buttons {
    flex-direction: column; /* Buttons untereinander */
    align-items: stretch;   /* füllt die Breite aus */
  }

  .service-btn {
    width: 100%;            /* jeder Button in voller Breite */
    box-sizing: border-box; /* damit Padding korrekt gerechnet wird */
  }
}



@media (max-width: 1200px) {
  .best-deal .info-table ul li span {
    float: none;
    width: 100%;
  }
  .contact-page .section-heading {
    margin-right: 100px;
  }
}


/* ----- Ergänzte und bereinigte CSS: styles.css ----- */

/* Container: Entferne Content-Cutoff */

.div1 {
grid-area: 4 / 1 / 6 / 5;
padding: 10px;
font-size: 1rem;
line-height: 1.4;
color: #F0F2EF;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
position: relative;
min-height: auto;
bottom: 0;
}

.div2 {
grid-area: 5 / 5 / 6 / 7;
}

.div3 {
grid-area: 4 / 5 / 5 / 7;
}

.div4 {
grid-area: 4 / 6 / 5 / 7;
}

.div5 {
grid-area: 1 / 1 / 2 / 4;
}

.div6 {
grid-area: 1 / 4 / 2 / 7;
}

.div7 {
grid-area: 2 / 1 / 3 / 4;
}

.div8 {
grid-area: 2 / 4 / 3 / 7;
}

.div9 {
grid-area: 3 / 1 / 4 / 4;
}

.div10 {
grid-area: 3 / 4 / 4 / 7;
}

/* Seite 3: Kombinierte Bereiche */
#page-3 .div5 {
grid-area: 1 / 1 / 2 / 7;
}

#page-3 .div6 {
display: none;
}

#page-3 .div7 {
grid-area: 2 / 1 / 3 / 7;
}

#page-3 .div8 {
display: none;
}

#page-3 .div9 {
grid-area: 3 / 1 / 4 / 7;
}

#page-3 .div10 {
display: none;
}

.grid-wrapper {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: auto;
gap: 8px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

.footerinhalt {
margin: 0;
color: #fff;
}

.question-container input[type="text"],
.question-container select {
width: 100%;
height: 44px;
border-radius: 22px;
background-color: #f6f6f6;
border: none;
margin-bottom: 30px;
font-size: 0.875rem;
padding: 0 15px;
appearance: none;
}

.question-container select {
background-image: url("../images/chevron-down.svg");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
}

.question-container input[type="checkbox"] {
width: 20px;
height: 20px;
border-radius: 4px;
background-color: #f6f6f6;
border: none;
margin-right: 10px;
vertical-align: middle;
cursor: pointer;
appearance: none;
position: relative;
}

.question-container input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 3px;
left: 6px;
width: 6px;
height: 12px;
border: solid #E89F71;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}

.question-container label {
display: block;
margin-bottom: 10px;
font-size: 1.25rem;
color: #F0F2EF;
}

.question-container label + input,
.question-container label + select {
margin-bottom: 30px;
}

.question-container .question-box {
background-color: #AFD5AA;
padding: 15px 10px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
margin-bottom: 5px;
max-width: 400px;
width: 100%;
}

.ergebnis {
background-color: #AFD5AA;
padding: 15px 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
}

.contact-function {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 350px;
height: 44px;
border: none;
border-radius: 22px;
background-color: #E89F71;
color: #fff;
cursor: pointer;
transition: all .3s;
}

.contact-function:hover {
background-color: #f35525;
}

/* Fix: Span-Farbe auf Seite 1 */
#page-1 .div1 span {
color: #F0F2EF;
}

/* Einheitliches Styling für Nav-Buttons */
.nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 350px;
height: 44px;
border: none;
border-radius: 22px;
background-color: #E89F71;
color: #fff;
cursor: pointer;
transition: all .3s;
}

.nav-btn:hover {
background-color: #f35525;
}

/* overrides für Seite 3 Buttons (div2 & div3) */
#page-3 .div2 .nav-btn,
#page-3 .div3 .nav-btn {
max-width: 100%;
font-size: 1rem;
}

#page-2 .grid-wrapper {
  padding-top: 20px;  /* genau definierter Abstand */
}
#page-3 .grid-wrapper {
  padding-top: 30px;
}


@media (max-width: 768px) {
.grid-wrapper {
grid-template-columns: 1fr;
grid-auto-rows: auto;
gap: 16px;
}
.div1, .div2, .div3, .div4, .div5, .div6, .div7, .div8, .div9, .div10 {
grid-area: unset;
width: 100%;
}
  /* 2) Alle Zellen nehmen eine Spalte über die volle Breite ein */
  .grid-wrapper > div {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
.div1 {
font-size: 1rem;
padding: 12px;
min-height: auto;
}
.nav-btn, .contact-function {
font-size: 1rem;
padding: 14px 20px;
width: 100%;
max-width: 100%;
}
h1 {
font-size: 2rem;
word-break: break-word;
}
span, p {
font-size: 1rem;
word-break: break-word;
}
#page-3 .contact-function {
width: 100%;
max-width: 100%;
height: auto;
padding: 12px;
font-size: 1rem;
text-align: center;

  /* 3) (Optional) Buttons als Inline-Flex, damit sie nebeneinander bleiben können,
      wenn du sie z.B. in einem .button-row-Wrapper packst */
  #page-3 .div2 > .nav-btn,
  #page-3 .div3 > .contact-function {
    display: inline-flex;
    width: auto;      /* nicht mehr 100% */
    min-width: 150px; /* oder dein gewünschter Wert */
    justify-content: center;
  }
}
#map iframe {
  width: 100% !important;   /* vollständig in die Breite skalieren */
  height: auto !important;  /* Höhe proportional anpassen */
  max-height: 450px;        /* optional: maximale Höhe begrenzen */
  display: block;           /* entfernt etwaige Inline-Abstände */
}
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.4s;
}


.image-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.rounded-20 {
  border-radius: 20px;
  max-height: 500px; /* z. B. für ein vertikales Layout */
  object-fit: cover;
}

.dienstleistungs-text span{
color: #77591F;
font-height: 1rem;
}




/* ——— Desktop-Stapel-Effekt ——— */
.image-stack-large {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: auto;
}

.image-stack-large img {
  width: 250px;
  border-radius: 30px;
  object-fit: cover;
  position: absolute;
  transition: transform 0.3s ease;
}

.image-stack-large .img1 {
  top: 0;
  left: 0;
  z-index: 2;
  border: 20px solid white;
  border-inner-radius: 20px;
}

.image-stack-large .img2 {
    top: 120px;   /* kleinerer Versatz */
    left: 70px;
  z-index: 1;
}

/* Liste visuell hervorheben */
.highlight-list {
  list-style: none;
  padding-left: 0;
  margin-top: 20px;
}

.highlight-list li {
  background-color: #AFD5AA;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-left: 7px solid #E89F78; /* grünlicher Akzent */
  border-radius: 8px;
  font-weight: 500;
  color: #F0F2EF;
}



/* ——— Mobile: Bilder wieder normal untereinander ——— */
@media (max-width: 767.98px) {
    .image-stack-large {
     position: relative;
     width: 100%;
     max-width: 600px;

      /* NEU: Höhe, damit Text erst darunter kommt */
     height: 330px;               /* passe auf dein Layout an */
    }

  .image-stack-large img {
    /* entferne position: static, damit absolute weiter gilt */
    /* position: static !important; */

    /* optional: passe Größe an, aber behalte absolute */
    width: 80% !important;
    max-width: 250px;
    transform: none; /* oder passe z.B. transform: translate(...) an */
  }

  /* Falls dir die ursprünglichen top/left-Werte zu groß sind, kannst du hier kleinere schreiben: */
  .image-stack-large .img1 {
    top: 0;
    left: 0;
    z-index: 2;
  }
  .image-stack-large .img2 {
    top: 120px;   /* kleinerer Versatz */
    left: 70px;  /* kleinerer Versatz */
    z-index: 1;
  }
}



.impressum {
background-color: #AFD5AA;
padding: 15px 20px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
margin-bottom: 20px;
width: 100%;
}




/* Stelle sicher, dass der Container keine auto-Margins bekommt */
.img-compare-container {
  margin: 0;              /* überschreibt z.B. text-center o.ä. */
  position: relative;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

/* Basis-Bild (Vorher) */
.img-compare-container > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;  /* Bild immer von links oben beginnen */
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

/* Overlay mit Nachher-Bild */
.img-compare-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.properties .item .img-compare-overlay img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;  /* auch hier links oben */
  user-select: none;
  pointer-events: none;

  border-radius: 10px 0 0 10px; !important
}

.img-compare-slider {
  position: absolute;
  top: 50%;
  left: -8px;                          /* halbe Thumb-Breite nach links */
  width: calc(100% + 16px);           /* ganze Breite plus Thumb-Breite */
  transform: translateY(-50%);
  height: 2px;
  background: transparent;
  margin: 0;
  padding: 0;
  z-index: 3;
  cursor: ew-resize;
  appearance: none;
  box-sizing: content-box;            /* wichtig, damit width wie gerechnet greift */
}

/* Track (Linie) */
.img-compare-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  background: transparent;
}
.img-compare-slider::-moz-range-track {
  width: 100%;
  height: 2px;
  background: white;
}

/* Thumb */
.img-compare-slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid #444;
  margin-top: -7px;
}
.img-compare-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid #444;
}

.img-compare-slider:focus {
  outline: none;
}

.img-compare-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;            /* ganz rechts im Overlay */
  width: 2px;          /* Linienbreite */
  height: 100%;
  background: white;   /* Farbe der Linie */
  pointer-events: none;/* verhindert, dass man die Linie „erwischt“ */
}
@media (max-width: 760px) {
  .logo-img {
    max-height: 70px; /* kleinere maximale Höhe für kleine Bildschirme */
  }
}

/* Klasse, die wir per JS hinzufügen */
.logo-img.shrunk {
  max-height: 70px !important;
}