/* CSS Westerwaldcamper */


/* #### Farben ####
Dunkelgrau: 81.84.98
#515462

Dunkelgr�n: 111.141.128
#6F8D80

Gr�n: 166.170.143
#A6AA8F

Sand: 214.198.158
#D6C69E

Hellorange: 231.198.153
#E7C699
*/
:root {
  --dunkelgrau: #515462;
  --dunkelgruen: #6F8D80;
  --gruen: #A6AA8F;
  --sand: #D6C69E;
  --hellorange: #E7C699;
  }


/* ----------- Erzeugt ein langsames Scrollen --------------- */
html {
	scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/* ----------- langsames Scrollen ende --------------- */

body {
  height: 100%;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #515462;
  text-decoration: none;
}

h1,h2,h3,h4,h5
{font-family: 'Exo 2', sans-serif;
color: #515462;
text-decoration: none;
}

/* --------  Backgrounds ------------- */

.bg-dunkelgrau {
background: #515462;
}

.bg-dunkelgruen {
background: #A6AA8F;
}

.bg-gruen {
background: #A6AA8F;
}

.bg-sand {
background: #D6C69E;
}

.bg-hellorange {
background: #E7C699;
}

.dunkelgruen {
color: #6f8d80;
}

/* --------  Button ------------- */

.bot1 {
font-size: 1.2rem;
color: #fff;
background: #515462;
padding: 5px 15px;
border: 1px solid #fff;
border-radius: 24px;
}

.bot1:hover {
color: #fff;
background: transparent;
}


.bot2 {
font-size: 1.01rem;
color: #fff;
background: #515462;
padding: 5px 15px;
border: 1px solid transparent;
border-radius: 24px;
}

.bot2:hover {
color: #fff;
background: transparent;
border: 1px solid #fff;
}

@media (max-width: 991.98px) { 
.bot2 {
font-size: 0.91rem;
padding: 3px 12px;
border-radius: 14px;
}
}

@media (max-width: 767.98px) { 
.bot2 {
font-size: 0.91rem;
padding: 4px 8px;
border-radius: 14px;
}
}

@media (max-width: 575.98px) { 
.bot2 {
font-size: 0.91rem;
padding: 4px 8px;
border-radius: 14px;
}
}




/* -------- Nav ------------- */

.sp-megamenu-parent li.sp-menu-item {
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

/* Nva Link Under line */
.sp-megamenu-parent li.sp-menu-item::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #000;
    transition: width .4s;
}

/* Nva Link Under line on Hover */
.sp-megamenu-parent > li:hover::after {
    width: 100%;
    transform: width .4s;
}


.sp-megamenu-parent > li > a {
color: #515462;
line-height: 20px;
font-weight: 600;

}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
color: #6F8D80;
font-weight: 600;
}

.sp-megamenu-parent > li:hover > a {
color: #6F8D80;
}

.sp-megamenu-parent > li.active > a {
font-weight: 600;
color: #6F8D80;
}

/* ----------- Dropdown Menü ------------- */
.sp-megamenu-parent .sp-dropdown li > a {
font-weight: 600;
}


.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a:hover {
color: #515462;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
    font-size: 12px;
}

/* ----------- Offcanvas ------------- */

.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:hover, .offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus, .offcanvas-menu .offcanvas-inner .sp-module ul > li span:focus {
    color: #515462;
}

#offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fa:focus, #offcanvas-toggler > .fa:active {
    color: #6f8d80;
}

/* ---------- Strich neben Suchfeld im Main-Men� ------------ */
#menu-right .sp-module:first-child {
  border-right: 0px;
  padding-right: 3px;
}

/* ---------- Header Home ------------ */

.carousel-caption {
    position: absolute;
    right: 15%;
    top: 60px;
    left: 15%;
    bottom: auto;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

#carouselCamper .carousel-caption {
background-color: rgba(111,141,128, 0.6);
}



#carouselCamper .carousel-caption h5 {
color: #fff;
font-size: 4.0rem;
}

#carouselCamper .carousel-caption p {
color: #fff;
font-size: 1.6rem;
}

.carousel-caption2 {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10;
}

.carousel-caption2 img{
max-width: 200px;
}

@media (max-width: 991.98px) { 
#carouselCamper .carousel-caption h5 {
font-size: 3.0rem;
}
}

@media (max-width: 767.98px) { 
.carousel-caption2 img{
max-width: 120px;
}
#carouselCamper .carousel-caption h5 {
font-size: 3.0rem;
}
}

@media (max-width: 575.98px) { 
.carousel-caption2 img{
max-width: 100px;
}
}
/* ---------- Aufmacher Start ------------ */
#sp-position3 {
z-index: 2;
background: #A6AA8F;
margin-top: -30px;
}

#sp-position3 h1{
color: #fff;
padding: 20px 0px;
}

@media (max-width: 767.98px) { 
#sp-position3 h1{
font-size: 1.11rem;
}
}

@media (max-width: 575.98px) { 
#sp-position3 h1{
font-size: 0.91rem;
}
}


/* ---------- Content ------------ */
.article-list .article .featured-article-badge {
display: none;
}

.article-list .article {
  border: none;
}

#sp-main-body {
    padding: 50px 0;
}

#sp-main-body p{
line-height: 1.5;
}

.jumptarget {
  position: relative;
  width: 10px;
  z-index: 0;
  }
  
  .jumptarget:before {
  width: 10px;
  display: block;
  content: " ";
  margin-top: -128px;
  height: 128px;
  visibility: hidden;
  }

/* ---------- Startauswahl ------------ */

#startauswahl h3{
color: #fff;
}

#startauswahl p{
color: #fff;
margin-top: 10px;
padding-bottom: 20px;
}

.bg-dunkelgruen-soft {
background: rgba(111,141,128, 0.6);
}

.bg-dunkelgrau-soft {
background: rgba(81,84,98, 0.4);
}

#startauswahl .con {
position:relative;
}
#startauswahl .bor {
border-bottom: 1px solid rgba(81,84,98, 0.4);
}

#startauswahl .boden {
position:absolute;
display: block;
height: auto; 
width: 100%;
text-align: center;
bottom:0;
padding-top: 20px;
padding-bottom: 20px;
}

/* ----------  Display Grid mit Boxen -------------*/

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0;
}

.box {
  padding: 6px;
  text-align: center;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 1rem;
  margin-bottom: 20px;  
}

.box p, .box h5 {
color: #fff;
}
.box h5 {
font-size: 1.75rem;
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}

.box img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}

/* ----------- Fahrzeuge -----------*/
/* lined tabs */

.nav-link {
color: #515462;
}

.lined .nav-link {
  font-weight: 700;
  color: #515462;
  border: none;
  border-bottom: 3px solid transparent;
}

.lined .nav-link:hover {
  color: #515462;
  border: none;
  border-bottom: 3px solid transparent;
}

.lined .nav-link.active {
  background: none;
  color: #555;
  border-color: #6F8D80;
}

#fahrzeuge td{
line-height: 26px;
padding: 0px 10px;

}
/* ----------- Grid Buchen--------------- */
.buchen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  grid-gap: 0.6rem;
  }
  
  .buchen-box {
  padding: 16px 6px;
  text-align: center;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 6;
  height: auto;
  }
  .buchen-box h3{
  display: block;
  background-color: #fff;
  margin-inline: -6px;
  margin-top: -16px;
  padding-bottom: 16px;
  }
  
  .buchen-box h5{
  display: block;
  background-color: rgba(255, 255, 255, 0.4);
  margin-inline: -6px;
  padding-block: 10px;
  }
/* ----------- Grid Versicherung Buchen--------------- */
.versicherung-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  grid-gap: 0.6rem;
  }
  
  .versicherung-box {
  padding: 16px 6px;
  text-align: center;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  height: auto;
  }
  
  .versicherung-box h5{
    display: block;
    background-color: rgba(255, 255, 255, 0.4);
    margin-inline: -6px;
    margin-top: -16px;
    padding: 16px 6px;
    }
/* ----------- Grid Partner--------------- */
.partner-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
column-gap: 0.6rem;
row-gap: 0.4rem;
}

.partner-box {
padding: 16px 6px;
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
height: auto;
}

.partner-box img{
max-width: 80%;
}

.partner-box p:has(img) {
  margin-bottom: 1.5rem;
}

.partner-box p{
margin: 0;
}

/* ---------- Preise ------------ */

#carouselCamper2 .carousel-caption h5 {
color: #fff;
font-size: 4.0rem;
}

@media (max-width: 991.98px) { 
#carouselCamper2 .carousel-caption h5 {
font-size: 3.0rem;
}
}

@media (max-width: 767.98px) { 
#carouselCamper2 .carousel-caption h5 {
font-size: 3.0rem;
}
}


#preise thead, #fahrzeuge thead {
background: #fff;
font-weight: bold;
}

#preise td{
line-height: 46px;
padding: 0px 10px;
font-size: 1.21rem;
}

#preise td.preis{
color: #000;
font-weight: 600;
}

#preise .fas{
color: #6F8D80;
}

@media (max-width: 767.98px) { 
#preise td{
line-height: 26px;
padding: 0px 2px;
font-size: 0.91rem;
}
}

@media (max-width: 575.98px) { 
#preise td{
line-height: 26px;
padding: 0px 2px;
font-size: 0.81rem;
}
}

/* -------------- FAQs ------------- */

#faq .fas{
color: #6F8D80;
}

.collapsible-link::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #333;
  position: absolute;
  top: calc(50% - 1px);
  right: 1rem;
  display: block;
  transition: all 0.3s;
}

/* Vertical line */
.collapsible-link::after {
  content: '';
  width: 2px;
  height: 14px;
  background: #333;
  position: absolute;
  top: calc(50% - 7px);
  right: calc(1rem + 6px);
  display: block;
  transition: all 0.3s;
}

.collapsible-link[aria-expanded='true']::after {
  transform: rotate(90deg) translateX(-1px);
}

.collapsible-link[aria-expanded='true']::before {
  transform: rotate(180deg);
}

/* ---------- Suchformular ------------ */
#searchForm .result-title a {
color: #fff;
}


/* ----------- Kontaktformular------------- */
/* FORM */
div#fox-container-c119  .fox-form select,
div#fox-container-c108  .fox-form textarea,
div#fox-container-c108  .fox-form input[type="text"],
div#fox-container-c108  .fox-form input[type="email"]
{
border: 1px solid #384a42;
border-radius: 0px !important;
color: #000 !important;
background-color: #ffffff !important;
}

div#fox-container-c108 select, 
div#fox-container-c108 input[type="text"], 
div#fox-container-c108 input[type="email"] {
    height: 48px;
    line-height: 18px;
}

div#fox-container-c108  .fox-form input[type="text"]:hover,
div#fox-container-c108  .fox-form input[type="email"]:hover,
div#fox-container-c108  .fox-form textarea:hover,
div#fox-container-c108  .fox-form input[type="text"]:focus,
div#fox-container-c108  .fox-form input[type="email"]:focus,
div#fox-container-c108  .fox-form textarea:focus
{
background-color: rgba(111,141,128, 0.2)!important;
}

div#fox-container-c108 .fox-form-stacked .control-group,
div#fox-container-c108 .fox-form-stacked .controls {
    float: right;
}

div#fox-container-c108 .btn, 
div#fox-container-c108 .btn span {
    color: #fff;
    font-weight: 700;
    background-color: #515462;
    text-shadow: none;
    background-image: none;
    border: 0px;
    border-color: none;
    border-radius: 25px;
    padding: 4px 20px;
}

div#fox-container-c108 .btn:hover, 
div#fox-container-c108 .btn:hover span {
    color: #fff;
    background-color: #6f8d80;
}


/* ---------- Bottom (Footer Links) ------------ */
#sp-footer a, #sp-bottom a {
color: #fff;
}

#sp-footer a, #sp-bottom a:hover {
color: #D6C69E;
}

#sp-bottom .sp-module ul > li {
display: block;
margin-bottom: 5px;
}

#sp-bottom .sp-module ul > li a{
color: #fff;
}

#sp-bottom .sp-module ul > li a:hover{
color: #D6C69E;
}

.sp-copyright {
font-size: 0.81rem;
}