/* =========================================================
   1. BASIS
   ========================================================= */

.owl-carousel {
  cursor: grab;
  cursor: -webkit-grab;
}

.container .owl-carousel {
  cursor: default;
}

.container .content-slider-with-large-controls,
.container .content-slider-with-large-controls-autoplay {
  margin-bottom: 50px;
  border: 1px solid #f5f5f5;
}

/* Hover Navigation */
.controls-hover .owl-nav {
  display: none;
}
.controls-hover:hover .owl-nav {
  display: block;
}

/* Nav Grundposition */
.controls-normal .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 0;
  margin-top: -15px;
  z-index: 10;
}

/* Buttons */
.controls-normal .owl-nav .owl-prev,
.controls-normal .owl-nav .owl-next {
  position: absolute;
  background: rgba(0,0,0,0.5);
  color: transparent;
  padding: 5px;
  transition: all 0.2s ease;
}

.controls-normal .owl-nav .owl-prev { left: 0; }
.controls-normal .owl-nav .owl-next { right: 0; }

/* Icons */
.controls-normal .owl-nav .owl-prev::after,
.controls-normal .owl-nav .owl-next::after {
  font-family: "iconfont";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Prev */
.controls-normal .owl-nav .owl-prev::after {
  content: "\f104";
  left: 12px;
}

/* Next */
.controls-normal .owl-nav .owl-next::after {
  content: "\f105";
  right: 12px;
}

/* Hover Animation */
.controls-normal .owl-nav .owl-prev:hover {
  padding-left: 25px;
  padding-right: 10px;
  color: #fff;
}
.controls-normal .owl-nav .owl-next:hover {
  padding-right: 25px;
  padding-left: 10px;
  color: #fff;
}

/* =========================================================
   2. DOTS
   ========================================================= */

.owl-dots {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

.owl-dot span {
  display: block;
  width: 9px;
  height: 9px;
  margin: 5px 3px;
  border-radius: 20px;
  background: #fff;
  opacity: 0.5;
}

.owl-dot.active span,
.owl-dot:hover span {
  opacity: 1;
}

/* Big Dots */
.big-controls .owl-dot span {
  width: 60px;
  height: 4px;
  border-radius: 0;
}

@media (max-width:575px) {
  .big-controls .owl-dot span {
    width: 30px;
    height: 5px;
  }
}

/* =========================================================
   3. BOTTOM DOTS VARIANTEN
   ========================================================= */

.dots-bottom .owl-dot span {
  width: 20px;
  height: 3px;
  background: #683b10;
  border-radius: 0;
}

.dots-bottom .owl-dot.active span {
  width: 8px;
  height: 8px;
  border-radius: 5px;
}

/* =========================================================
   4. NEWS NAV (MIT COMMENT CONTENT)
   ========================================================= */

.controls-news-bottom .owl-nav {
  position: absolute;
  bottom: 0;
  right: -0.25rem;
  width: 90px;
  display: flex;
  justify-content: space-between;
}

.controls-news-bottom .owl-nav button {
  width: 50%;
  height: 44px;
  position: relative;
  background: transparent;
  border: none;
}

/* Icon Basis */
.controls-news-bottom .owl-nav .custom-owl-prev::after,
.controls-news-bottom .owl-nav .custom-owl-next::after {
  font-family: "iconfont";
  padding: 10px;
  background: var(--wf-color1);
  display: inline-block;
}

/* Prev */
.controls-news-bottom .owl-nav .custom-owl-prev::after {
  /* content: "\f104"; */
  content: "\e9f7";
}

/* Next */
.controls-news-bottom .owl-nav .custom-owl-next::after {
  /* content: "\f105"; */
  content: "\e9f9";
}

.controls-news-bottom .owl-nav button:hover::after {
  background: var(--wf-color4);
  color: var(--wf-color1);
}

/* =========================================================
   5. ARROWS PRICE
   ========================================================= */

.controls-arrows-price .owl-nav {
  position: absolute;
  top: 0;
  width: 100%;
  margin-top: 25px;
}

.controls-arrows-price .owl-nav button {
  position: absolute;
  background: transparent;
  border: none;
  font-size: 50px;
}

.controls-arrows-price .owl-prev { left: -35px; }
.controls-arrows-price .owl-next { right: 10px; }

/* =========================================================
   6. SMALL BOTTOM CONTROLS
   ========================================================= */

.controls-bottom-small .owl-nav {
  width: 100px;
  height:55px;
  position: absolute;
  bottom:0px;
  left:0rem;
  background-color:transparent;
  display: inline-block;
}

.controls-bottom-small.center .owl-nav {
  left:50%;
  transform: translateX(-50%);

}



/* Basis-Styles für die Buttons */
.controls-bottom-small .owl-nav .owl-prev,
.controls-bottom-small .owl-nav .owl-next {
  position: relative; /* wichtig für :after */
  background: none;
  border: none;
  padding: 0;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  height: 100%;
  cursor: pointer;
}


/* Basis-Styles für die Buttons */
.controls-bottom-small .owl-nav button {
  border: none;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  cursor: pointer;

  position: absolute;
  font-size: 40px;
  width:40px;
  line-height: 33px;
  color: var(--wf-color4);
  padding: 10px 5px;
  background-color:transparent;
  text-align: center;
  display:inline-block;
}

.controls-bottom-small .owl-nav .custom-owl-next{
	right:0;

}

/* Gemeinsame Icon-Basis */
.controls-bottom-small .owl-nav .custom-owl-next:after,
.controls-bottom-small .owl-nav .custom-owl-prev:after{
  font-family: "iconfont";
  position: relative;

}

/* Prev */
.controls-bottom-small .owl-nav .custom-owl-prev:after {
  content: "\f104";
}

/* Next */
.controls-bottom-small .owl-nav .custom-owl-next:after {
  content: "\f105";
}

/* Hover Effekte */
.controls-bottom-small .owl-nav button:hover {
  color:#000;
}

.controls-bottom-small .owl-nav {
  display: flex;
 justify-content:space-between;
}

.controls-bottom-small .owl-nav:before {
	content: "";
	position:absolute;
	top:12px;
	left:50px;
	width:0.075rem;
	height:30px;
	background-color:var(--wf-color4);
-webkit-transform: rotate(20deg);	
}


/* =========================================================
   6b. SMALL BOTTOM CONTROLS
   ========================================================= */



.controls-bottom-small-b .owl-nav {
  width: 70px;
  height:55px;
  position: absolute;
  bottom: 0.5rem;
  left:1.25rem;
  background-color:transparent;
  display: inline-block;
}

.controls-bottom-small-b.center .owl-nav {
  left:50%;
  transform: translateX(-50%);

}



/* Basis-Styles für die Buttons */
.controls-bottom-small-b .owl-nav .owl-prev,
.controls-bottom-small-b .owl-nav .owl-next {
  position: relative; /* wichtig für :after */
  background: none;
  border: none;
  padding: 0;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  height: 100%;
  cursor: pointer;
}


/* Basis-Styles für die Buttons */
.controls-bottom-small-b .owl-nav button {
  border: none;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  cursor: pointer;

  position: absolute;
  font-size: 20px;
  width:33px;
  line-height: 22px;
  color: var(--wf-color1);
  padding: 7px 5px 8px 5px;
  background-color: var(--wf-color3);
  text-align: center;
  display:inline-block;
}

.controls-bottom-small-b .owl-nav .custom-owl-next{
	right:0;

}

/* Gemeinsame Icon-Basis */
.controls-bottom-small-b .owl-nav .custom-owl-next:after,
.controls-bottom-small-b .owl-nav .custom-owl-prev:after{
  font-family: "iconfont";
  position: relative;

}

/* Prev */
.controls-bottom-small-b .owl-nav .custom-owl-prev:after {
  content: "\f104";
}

/* Next */
.controls-bottom-small-b .owl-nav .custom-owl-next:after {
  content: "\f105";
}

/* Hover Effekte */
.controls-bottom-small-b .owl-nav button:hover {
  background-color: var(--wf-color4);
}

.controls-bottom-small-b .owl-nav {
  display: flex;
 justify-content:space-between;
}


@media (min-width: 992px) {

.controls-bottom-small-b .owl-nav {
  width: 94px;
  height:55px;
  position: absolute;
  bottom: clamp(10px, 10.8vw + 0.75rem, 50px);
  left: clamp(10px, 10.8vw + 0.75rem, 50px);

}

/* Basis-Styles für die Buttons */
.controls-bottom-small-b .owl-nav button {


  font-size: 25px;
  width:45px;
  line-height: 33px;
  padding: 8px 5px;
  text-align: center;
  display:inline-block;
}

}


/* =========================================================
   6c. SMALL BOTTOM CONTROLS
   ========================================================= */



.controls-bottom-small-c .owl-nav {
  width: 70px;
  height:55px;
  position: absolute;
  bottom: 0.5rem;
  left:1.25rem;
  background-color:transparent;
  display: inline-block;
}

.controls-bottom-small-c.center .owl-nav {
  left:50%;
  transform: translateX(-50%);

}



/* Basis-Styles für die Buttons */
.controls-bottom-small-c .owl-nav .owl-prev,
.controls-bottom-small-c .owl-nav .owl-next {
  position: relative; /* wichtig für :after */
  background: none;
  border: none;
  padding: 0;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  height: 100%;
  cursor: pointer;
}


/* Basis-Styles für die Buttons */
.controls-bottom-small-c .owl-nav button {
  border: none;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  cursor: pointer;

  position: absolute;
  font-size: 20px;
  width:33px;
  line-height: 22px;
  color: var(--wf-color1);
  padding: 7px 5px 8px 5px;
  background-color: var(--wf-color3);
  text-align: center;
  display:inline-block;
}

.controls-bottom-small-c .owl-nav .custom-owl-next{
	right:0;

}

/* Gemeinsame Icon-Basis */
.controls-bottom-small-c .owl-nav .custom-owl-next:after,
.controls-bottom-small-c .owl-nav .custom-owl-prev:after{
  font-family: "iconfont";
  position: relative;

}

/* Prev */
.controls-bottom-small-c .owl-nav .custom-owl-prev:after {
  content: "\e9f7";
}

/* Next */
.controls-bottom-small-c .owl-nav .custom-owl-next:after {
  content: "\e9f9";
}

/* Hover Effekte */
.controls-bottom-small-c .owl-nav button:hover {
  background-color: var(--wf-color4);
}

.controls-bottom-small-c .owl-nav {
  display: flex;
 justify-content:space-between;
}


@media (min-width: 992px) {

.controls-bottom-small-c .owl-nav {
  width: 94px;
  height:55px;
  position: absolute;
  bottom: clamp(10px, 10.8vw + 0.75rem, 50px);
  left: clamp(10px, 10.8vw + 0.75rem, 50px);

}

/* Basis-Styles für die Buttons */
.controls-bottom-small-c .owl-nav button {
  font-size: 25px;
  width:45px;
  line-height: 33px;
  padding: 8px 5px;
  text-align: center;
  display:inline-block;
}

}





/* =========================================================
   6d. SMALL BOTTOM COUNTER CONTROLS
   ========================================================= */

.controls-bottom-counter {
	padding-bottom:3rem;
}

.controls-bottom-counter .owl-nav {
  width: 140px;
  height:40px;
  position: absolute;
  bottom: -1.8rem;
  left:50%;
  transform: translateX(-52%);

  background-color:transparent;
  display: inline-block;
}

.controls-bottom-counter.center .owl-nav {
  left:50%;
  transform: translateX(-50%);

}



/* Basis-Styles für die Buttons */
.controls-bottom-counter .owl-nav .owl-prev,
.controls-bottom-counter .owl-nav .owl-next {
  position: relative; /* wichtig für :after */
  background: none;
  border: none;
  padding: 0;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  height: 100%;
  cursor: pointer;
}


/* Basis-Styles für die Buttons */
.controls-bottom-counter .owl-nav button {
  border: none;
  width: 50%; /* Damit Prev/Next nebeneinander stehen */
  cursor: pointer;

  position: absolute;
  font-size: 20px;
  width:33px;
  line-height: 22px;
  color: var(--wf-color2);
  padding: 7px 5px 8px 5px;
  background-color:transparent;
  text-align: center;
  display:inline-block;
}

.controls-bottom-counter .owl-nav .custom-owl-next{
	right:0;

}

/* Gemeinsame Icon-Basis */
.controls-bottom-counter .owl-nav .custom-owl-next:after,
.controls-bottom-counter .owl-nav .custom-owl-prev:after{
  font-family: "iconfont";
  position: relative;

}

/* Prev */
.controls-bottom-counter .owl-nav .custom-owl-prev:after {
  content: "\e9f7";
}

/* Next */
.controls-bottom-counter .owl-nav .custom-owl-next:after {
  content: "\e9f9";
}

/* Hover Effekte */
.controls-bottom-counter .owl-nav button:hover {
  color: var(--wf-color4);
}

.controls-bottom-counter .owl-nav {
  display: flex;
 justify-content:space-between;
}


/* =========================================================
   7. controls-villakunt-1 CONTROLS
   ========================================================= */
/* Navigation – rote Fläche */
.controls-villakunt-1 .owl-nav {
  position: absolute;
  bottom:2rem;
  right:2rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  /* nur falls deine rote Fläche eine feste Höhe hat */
  width:100px;
  height:25px;
}


/* Buttons */
.controls-villakunt-1 .owl-nav button {
  position: relative;

  border: none;
  padding: 0;
  margin: 0;

  width: 50%;
  height: 100%;

  cursor: pointer;

  font-size: 42px;
  line-height: 1;

  color: transparent;
  background: transparent;

  display: flex;
  align-items: center;
}


/* Prev links */
.controls-villakunt-1 .owl-nav .owl-prev {
  justify-content: flex-start;
}


/* Next rechts */
.controls-villakunt-1 .owl-nav .owl-next {
  justify-content: flex-end;
}


/* Icon-Basis */
.controls-villakunt-1 .owl-nav .custom-owl-next::before,
.controls-villakunt-1 .owl-nav .custom-owl-prev::before,
.controls-villakunt-1 .owl-nav .custom-owl-next::after,
.controls-villakunt-1 .owl-nav .custom-owl-prev::after {
  font-family: 'icon-villakuntbunt';

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  line-height: 1;
}


/* beide Prev-Icons ganz links */
.controls-villakunt-1 .owl-nav .custom-owl-prev::before,
.controls-villakunt-1 .owl-nav .custom-owl-prev::after {
  left: 0;
}


/* beide Next-Icons ganz rechts */
.controls-villakunt-1 .owl-nav .custom-owl-next::before,
.controls-villakunt-1 .owl-nav .custom-owl-next::after {
  right: 0;
}


/* Farben */
.controls-villakunt-1 .owl-nav .custom-owl-next::after,
.controls-villakunt-1 .owl-nav .custom-owl-prev::after {
  color: #88c6a1;
}

.controls-villakunt-1 .owl-nav .custom-owl-next::before,
.controls-villakunt-1 .owl-nav .custom-owl-prev::before {
  color: #f4d684;
}



.controls-villakunt-1 .owl-nav .custom-owl-next:hover::before,
.controls-villakunt-1 .owl-nav .custom-owl-prev:hover::before {
  color: #fff;
}


/* =========================================================
   8. controls-villakunt-2 CONTROLS
   ========================================================= */
/* Navigation – rote Fläche */
.controls-villakunt-2 .owl-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left:0;
  

  display: flex;
  justify-content: space-between;
  align-items: center;

  width:100%;
  padding-left:1.5rem;
  padding-right:1.5rem;
  /* nur falls deine rote Fläche eine feste Höhe hat */
  height: 40px;
  
}


/* Buttons */
.controls-villakunt-2 .owl-nav button {
  position: relative;

  border: none;
  padding: 0;
  margin: 0;

  width: 50%;
  height: 100%;

  cursor: pointer;

  font-size: 80px;
  line-height: 1;

  color: transparent;
  background: transparent;

  display: flex;
  align-items: center;
}


@media (max-width: 1200px) {

.controls-villakunt-2 .owl-nav button {
	 transform: scale(0.95);
}

}

@media (max-width: 575px) {

.controls-villakunt-2 .owl-nav button {
	 transform: scale(0.85);
}

}

@media (max-width: 480px) {

.controls-villakunt-2 .owl-nav button {
	 transform: scale(0.70);
}

}

/* Prev links */
.controls-villakunt-2 .owl-nav .owl-prev {
  justify-content: flex-start;
}


/* Next rechts */
.controls-villakunt-2 .owl-nav .owl-next {
  justify-content: flex-end;
}


/* Icon-Basis */
.controls-villakunt-2 .owl-nav .custom-owl-next::before,
.controls-villakunt-2 .owl-nav .custom-owl-prev::before,
.controls-villakunt-2 .owl-nav .custom-owl-next::after,
.controls-villakunt-2 .owl-nav .custom-owl-prev::after {
  font-family: 'icon-villakuntbunt';

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  line-height: 1;
}


/* beide Prev-Icons ganz links */
.controls-villakunt-2 .owl-nav .custom-owl-prev::before,
.controls-villakunt-2 .owl-nav .custom-owl-prev::after {
  left: 0;
}


/* beide Next-Icons ganz rechts */
.controls-villakunt-2 .owl-nav .custom-owl-next::before,
.controls-villakunt-2 .owl-nav .custom-owl-next::after {
  right: 0;
}


/* Farben */
.controls-villakunt-2 .owl-nav .custom-owl-next::after,
.controls-villakunt-2 .owl-nav .custom-owl-prev::after {
  color: #88c6a1;
}

.controls-villakunt-2 .owl-nav .custom-owl-next::before,
.controls-villakunt-2 .owl-nav .custom-owl-prev::before {
  color: #f4d684;
}

.controls-villakunt-2 .owl-nav .custom-owl-next:hover::before,
.controls-villakunt-2 .owl-nav .custom-owl-prev:hover::before {
  color: #fff;
}


/* Prev */
.controls-villakunt-2 .owl-nav .custom-owl-prev::after {
  content: "\e903";
}

.controls-villakunt-2 .owl-nav .custom-owl-prev::before {
  content: "\e906";
}


/* Next */
.controls-villakunt-2 .owl-nav .custom-owl-next::after {
  content: "\e907";
}

.controls-villakunt-2 .owl-nav .custom-owl-next::before {
  content: "\e908";
}



/* Prev */
.controls-villakunt-1 .owl-nav .custom-owl-prev::after {
  content: "\e903";
}

.controls-villakunt-1 .owl-nav .custom-owl-prev::before {
  content: "\e906";
}


/* Next */
.controls-villakunt-1 .owl-nav .custom-owl-next::after {
  content: "\e907";
}

.controls-villakunt-1 .owl-nav .custom-owl-next::before {
  content: "\e908";
}



/* Container für die Nav-Buttons */
.controls-normal-no-text .owl-nav {
  width: 100%;
  height: 0;
  position: absolute;
  top: 50%;
  margin-top:-17px;
  z-index: 10;
}


/* Basis-Styles für die Buttons */
.controls-normal-no-text .owl-nav .owl-prev,
.controls-normal-no-text .owl-nav .owl-next {
  display: inline-block;
  position: absolute;
 }
 
.controls-normal-no-text .owl-nav .owl-prev {
	left:5px;
} 

.controls-normal-no-text .owl-nav .owl-next {
	right:35px;
} 

@media (min-width: 481px) {

.controls-normal-no-text.wf-prev-next .owl-nav .owl-prev {
	left:145px;
} 

.controls-normal-no-text.wf-prev-next .owl-nav .owl-next {
	right:175px;
} 

} 

/* Basis-Styles für die Buttons */
.controls-normal-no-text .owl-nav button {
  border: none;
  position: absolute;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background:rgba(0,0,0, 0.35);  

  font-size: 18px;
  line-height: 18px;
  color: #fff;
  text-align: center;
  padding:8px 13px;
  display:inline-block;
}

.controls-normal-no-text.controls-color .owl-nav button {
  background:var(--wf-color1);  
  color: #fff;
}

/* Gemeinsame Icon-Basis */
.controls-normal-no-text .owl-nav .custom-owl-next:after,
.controls-normal-no-text .owl-nav .custom-owl-prev:after{
  font-family: "iconfont";
  position: relative;

}

/* Prev */
.controls-normal-no-text .owl-nav .custom-owl-prev:after {
  content: "\f104";
  color:#fff;

}

/* Next */
.controls-normal-no-text .owl-nav .custom-owl-next:after {
  content: "\f105";
  color:#fff;
}

/* Hover Effekte */
.controls-normal-no-text .owl-nav .custom-owl-prev:hover,
.controls-normal-no-text .owl-nav .custom-owl-next:hover {
  background: #000;
  color: #fff;
}


@media (min-width: 768px) {

.controls-normal-no-text .owl-nav button {
  font-size: 25px;
  line-height: 25px;
  text-align: center;
  padding:10px 15px;  
}

.controls-normal-no-text .owl-nav .owl-next {
	right:43px;
} 

.controls-normal-no-text .owl-nav {
  margin-top:-22px;
}


}


/* =========================================================
   7. STRETCH HEIGHT (WICHTIG)
   ========================================================= */

.owl-strech-height .owl-stage {
  display: flex;
  align-items: stretch;
}

.owl-strech-height .owl-item {
  display: flex;
}

.owl-strech-height .wf-owl-strech-item-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.owl-strech-height .wf-btn-flex {
  margin-top: auto;
}

/* =========================================================
   8. MOBILE NAV (ADD REMOVE)
   ========================================================= */

@media (max-width:767px) {

  .owl-slider-add-remove {
    padding-bottom: 1rem;
  }

  .owl-slider-add-remove .owl-nav {
    width: 160px;
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
  }

  .owl-slider-add-remove .owl-prev::after {
    content: "\e939";
    left: 20px;
  }

  .owl-slider-add-remove .owl-next::after {
    content: "\e93a";
    right: 20px;
  }
}

/* =========================================================
   9. OPTIONAL CENTER IF NOT FULL
   ========================================================= */

.owl-not-full .owl-stage {
  margin: 0 auto;
}


/* =========================================================
   10. Counter
   ========================================================= */
   
.wf-owl-counter-slider-wrapper {
	position:relative;
}
   
.wf-owl-counter-item-wrapper{
  display:flex;
  justify-content:center;
}

.wf-owl-counter-button{
  pointer-events: none;	
  font-size:17px;
  line-height:1em;
  font-weight:300;
}

.wf-owl-pagination-current,
.wf-owl-pagination-total{
  display:inline-block;
  text-align:center;
}


.wf-owl-pagination-current {
	font-size:1.4em;
}


.wf-top-visible-counter .wf-owl-counter-button {
    position: absolute;
    z-index: 20;
    top: 1.25rem;
    left:1.20rem;

    color: #fff;
	letter-spacing:-0.05em;
    background: rgba(0,0,0,0.35);
    padding: 0.65rem 0.75rem;
}