@import url('/huepercdn/fonts/sora/fonts.css');

/***** text markierungs farben *****/
::-moz-selection {
	color: #fff;
	background: var(--mds-dark);
}

::selection {
	color: #fff;
	background: var(--mds-dark);
}


/***** colors *****/
:root {
  --mds-almost-white: #f7f7f7;
  --mds-dark: #3b3b3b;
  --mds-light-grey: #9b9b9b;
  --mds-website: #5c5a48;

  /* couches */
  --lerici: #70655f;
  --lerici-bg: #e5e0dd;
  --granada: #4f8184;
  --granada-bg: #e1e1e1;
  --luna: #728478;
  --luna-bg: #dbe1dd;
  --key-west: #8f6a3e;
  --key-west-bg: #ede5db;
  --matera: #85473e;
  --matera-bg: #f1e0dd;
  --bern: #776a5f;
  --bern-bg: #d9d7d4;
  --darwin: #5e6764;
  --darwin-bg: #cad6d5;
  --ibiza: #4a8282;
  --ibiza-bg: #e8e9e8;
  --hudson: #8fa4c5;
  --hudson-bg: #e3e8f0;
  --lodi: #a19ea2;
  --lodi-bg: #e3e2e3;
  --loya: #516370;
  --loya-bg: #eaecee;
  --livo: #516370;
  --livo-bg: #eaecee;
  --monza: #837560;
  --monza-bg: #dad6cf;
  --pamplona: #476b77;
  --pamplona-bg: #d1dadd;
  --varda: #c2b7a2;
  --varda-bg: #ede9e3;
  --velden: #575656;
  --velden-bg: #dddddd;
  --sarah: #bcb356;
  --sarah-bg: #ebe8cc;
}




/***** main elements *****/
body {
  background-color: var(--mds-almost-white);
  font-family: 'Sora', sans-serif !important;
  font-weight: 200;
  color: var(--mds-dark);
}

a {
  color: var(--mds-website);
  padding-bottom: 1px !important;
  border-bottom: 1px solid var(--mds-website);
  transition: 0.2s ease-in-out;
  font-size: unset;
}

a:hover, 
a:focus {
  color: var(--mds-light-grey);
  border-bottom: 1px solid var(--mds-light-grey);
  text-decoration: none;
}

p, 
ul, 
li {
  font-size: 1.2rem;
  line-height: 1.8rem;
}

h1, 
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-weight: 400 !important;
}

h2,
.h2 {
  font-size: 1.8rem;
  line-height: 2.2rem;
}

h3,
.h3 {
  font-size: 1.6rem;
  line-height: 2rem;
}

h4,
.h4 {
  font-size: 1.4rem;
  line-height: 1.8rem;
}

@media (max-width: 768px) {
  p, 
  ul, 
  li {
    font-size: 1rem;
    line-height: 1.6rem;
  }

  h2,
  .h2 {
    font-size: 1.6rem;
    line-height: 2rem;
  }

  h3,
  .h3 {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }

  h4,
  .h4 {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
}

.text-small,
.small {
  font-size: 1rem;
  line-height: 1.7rem;
}

@media (max-width: 768px) {
  .text-small,
  .small {
    font-size: 0.8rem;
    line-height: 1.5rem;
  }
}

.headline {
  width: 1200px;
}

b, 
strong {
  font-weight: 400;
}




/***** utilities *****/
.progress-bar {
  background-color: var(--mds-website) !important;
}

.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.41) !important;
}

.p-fix .col-12 {
  padding-left: 0px !important;
}

.border {
  border-width: 3px !important;
}

.text-italic {
  font-style: italic;
}

@media (max-width: 576px) {
  .inklusive {
    font-size: 1rem;
  }
}

.artikel {
	padding: 0px 30px;
}

@media (max-width: 768px) {
  .artikel {
    padding: 0px 5px;
  }
}

.bg-website-outline {
  border: 2px dotted var(--mds-website);
}

.shadow-lg {
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1) !important;
}




/***** rounded corners */
.rounded-corners,
.rounded-corners .carousel-item img {
  border-radius: 60px;
}

@media (max-width: 768px) {
  .rounded-corners,
  .rounded-corners .carousel-item img {
    border-radius: 30px;
  }
}

.rounded-corners-top {
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
}

@media (max-width: 768px) {
  .rounded-corners-top {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

.rounded-corners-bottom {
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

@media (max-width: 768px) {
  .rounded-corners-bottom {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
  }
}


/* small */
.rounded-corners-sm,
.rounded-corners-sm .carousel-item img {
  border-radius: 35px;
}

@media (max-width: 768px) {
  .rounded-corners-sm,
  .rounded-corners-sm .carousel-item img {
    border-radius: 20px;
  }
}

.rounded-corners-left-sm {
  border-top-left-radius: 35px;
  border-bottom-left-radius: 35px;
}

@media (max-width: 768px) {
  .rounded-corners-left-sm {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}




/***** xl container *****/
.xl-container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 576px) {
  .xl-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-right: 35px;
  }
}

@media (min-width: 1400px) { 
  .xl-container {
    max-width: 1800px;
  }
}




/***** price *****/
.price-wrap {
  padding-top: 20px !important;
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.price {
  text-align: right;
  font-size: 3.5rem;
  font-weight: 600;
  padding-right: 40px;
}

@media (max-width: 1200px) {  
  .price {
    font-size: 3rem;
  }
}

@media (max-width: 768px) {
  .price {
    text-align: left;
    font-size: 2.6rem;
    padding: 0px 29px;
    margin-top: -30px;
  }
}

.price-suffix {
	text-align: right;
	font-size: 1.3rem;
	font-weight: 200 !important;
	letter-spacing: 0px !important;
	padding-top: 14px;
	padding-right: 40px;
}




/***** buttons *****/
.btn-primary {
	background-color: var(--mds-website) !important;
	border: 1px solid var(--mds-website) !important;
	color: var(--mds-almost-white) !important;
	padding: 13px 40px !important;
	border-radius: 0px;
	transition: 0.2s ease-in-out;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  text-transform: none;
}

@media (max-width: 768px) {
  .btn-primary {
    font-size: 1rem !important;
  }
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--mds-almost-white) !important;
  border: 1px solid var(--mds-website) !important;
  color: var(--mds-website) !important;
}

.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--mds-almost-white) !important;
  border: 1px solid var(--mds-website) !important;
  color: var(--mds-website) !important;
}

.btn-secondary {
	background-color: transparent !important;
	border: 1px solid var(--mds-website) !important;
	color: var(--mds-website) !important;
	padding: 13px 40px !important;
	border-radius: 0px;
	transition: 0.2s ease-in-out;
  font-size: 1.2rem !important;
  font-weight: 300 !important;
  text-transform: none;
}

@media (max-width: 768px) {
  .btn-secondary {
    font-size: 1rem !important;
  }
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--mds-website) !important;
  border: 1px solid var(--mds-website) !important;
  color: var(--mds-almost-white) !important;
}

.modelle .btn-secondary {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .modelle .btn-secondary {
    font-size: 1rem !important;
  }
}


/* artikel button */
.btn-artikel {
  font-size: 1.2rem;
  font-weight: 300;
  padding: 12px 40px 13px;
}

@media (max-width: 768px) {
  .btn-artikel {
    font-size: 1rem !important;
  }
}

.btn-artikel-position {
  margin-top: -32px;
}




/***** hotspots *****/
.hotspot-text {
	font-family: 'Sora', sans-serif;
  font-weight: unset;
  font-size: 1.1rem;
}

.popover {
	border: none;
	-webkit-box-shadow: 5px 5px 23px -1px rgba(0,0,0,0.22);
	box-shadow: 5px 5px 23px -1px rgba(0,0,0,0.22);
}

.popover-body {
  font-family: 'Sora', sans-serif;
  font-weight: 200;
	padding: 25px;
	color: var(--mds-dark) !important;
	background-color: var(--mds-almost-white);
	border-top-left-radius: 30px !important;
	border-top-right-radius: 30px !important;
	border-bottom-left-radius: 30px !important;
	border-bottom-right-radius: 30px !important;
}


.btn-danger {
  background-color: #fff;
  border: solid 1px #fff !important;
  color: #222222;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
  border: solid 1px #fff !important;
  background-color: #fff;
  box-shadow: none !important;
  color: #222222;
}

.btn.spot {
  line-height: 0.4 !important;
  width: 35px;
  height: 35px;
  padding: 0px 0px;
  transition: 0.2s ease-in-out;
  border-radius: 90px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .btn.spot {
    width: 30px;
    height: 30px;
  }
}

.far .fa-plus {
  font-weight: 300 !important;
}




/***** frontenslider *****/
.img-thumbnail {
	padding: 0rem;
	background-color: transparent;
	border: none;
	border-radius: 0rem;
	width: 70px;
	height: auto;
  margin: 0px 2px;
  -webkit-box-shadow: 3px 3px 21px -4px rgba(0,0,0,0.2); 
  box-shadow: 3px 3px 21px -4px rgba(0,0,0,0.2);
  z-index: 2;
  position: relative;
}

@media (max-width: 769px) {
  .img-thumbnail {
    width: 45px;
    margin: 5px 2px 0px 2px;
  }
}

.thumbs {
  margin-top: -48px;
}

.choose-your-color {
  width: 200px;
}

@media (max-width: 768px) {
  .choose-your-color {
    width: 170px;
  }
}




/***** cookie & social *****/
#cookiebar {
	background-color: var(--mds-almost-white) !important;
	color: var(--mds-dark) !important;
}

#cookiebarbutton {
	z-index: 9999 !important;
}

#cookiebarbutton,
#socialmenubutton {
  border: none;
	color: var(--mds-dark);
  background-color: var(--mds-almost-white);
  padding: unset !important;
}

#cookiebarbutton:hover,
#cookiebarbutton:focus,
#socialmenubutton:hover,
#socialmenubutton:focus {
  border: none;
	color: #fff;
  background-color: var(--mds-dark);
}

#socialmenubutton i {
  font-weight: 100;
}




/***** accordion *****/
.accordion-button {
	padding: 20px 0px;
}

.accordion-body {
	padding: 0px 0px 25px;
}

.accordion-button::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233B3B3B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233B3B3B'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}




/***** modal *****/
.modal-content {
	border: none !important;
	background-color: var(--mds-almost-white) !important;
	color: var(--mds-dark) !important;
	border-top-left-radius: 60px !important;
	border-top-right-radius: 60px !important;
	border-bottom-left-radius: 60px !important;
	border-bottom-right-radius: 60px !important;
  padding: 30px 35px;
}

@media (max-width: 769px) {
  .modal-content {
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    padding: 20px 15px;
  }
}

.modal-title {
  font-weight: 400 !important;
}

.modal-footer {
  display: block;
  margin-left: auto;
  margin-right: auto;
}




/***** anfrage formular *****/
.form-control {
	font-weight: 200;
	font-size: 1.1rem;
	color: var(--mds-dark) !important;
	background-color: #ddd !important;
	border: 1px solid transparent !important;
  padding: 12px 22px;
}

.form-control::placeholder {
	color: var(--mds-dark);
}

.form-check-label {
  font-size: 1rem !important;
}

.form-check-input {
	--bs-form-check-bg: #ddd;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .3em;
  margin-right: 0.25rem;
	background-color: #ddd;
	border: var(--bs-border-width) solid #ddd;
}




/***** grosses formular *****/
.bg-formular .form-control {
	font-weight: 200;
	font-size: 1.1rem;
	color: var(--mds-dark) !important;
	background-color: #fff !important;
	border: 1px solid transparent !important;
  padding: 12px 22px;
}

.bg-formular .form-control::placeholder {
	color: var(--mds-dark);
}

.bg-formular .form-check-label {
  font-size: 1rem !important;
}

.bg-formular .form-check-input {
	--bs-form-check-bg: #fff;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: .3em;
  margin-right: 0.25rem;
	background-color: #fff;
	border: var(--bs-border-width) solid #fff;
}

.bg-formular .form-check-input:checked[type="checkbox"] {
	background-color: #8d5052;
}

.bg-formular .btn-primary {
  background-color: #8D5052 !important;
  border: 1px solid #8D5052 !important;
  color: #fff !important;
}

.bg-formular .btn-primary:hover,
.bg-formular .btn-primary:focus {
  background-color: transparent !important;
  border: 1px solid #8D5052 !important;
  color: #8D5052 !important;
}




/***** footer *****/
.footer {
	background-color: var(--mds-almost-white) !important;
	color: var(--mds-dark) !important;
}

.border-top {
  border-top: 2px dotted var(--mds-website) !important;
}

.copyright {
  font-size: 0.9rem;
  line-height: 1.5rem;
  padding: 10px 0px 20px;
}

@media (max-width: 769px) {
  .copyright {
    font-size: 0.7rem;
    line-height: 1.3rem;
  }
}




/***** emotions baukasten *****/
/*** hero – ankommen und entspannen ***/
.ankommen-ueberschrift {
  width: 1000px;
  margin-top: -35%;
  position: relative;
  z-index: 9;
}

@media (max-width: 1920px) {
  .ankommen-ueberschrift {
    width: 900px;
    margin-top: -35%;
  }
}

@media (max-width: 1400px) {
  .ankommen-ueberschrift {
    width: 700px;
  }
}

@media (max-width: 1200px) {
  .ankommen-ueberschrift {
    width: 600px;
    margin-top: -35%;
  }
}

@media (max-width: 992px) {
  .ankommen-ueberschrift {
    width: 370px;
    margin-top: -35%;
  }
}

@media (max-width: 768px) {
  .ankommen-ueberschrift {
    width: 320px;
    margin-top: -35%;
  }
}

@media (max-width: 576px) {
  .ankommen-ueberschrift {
    width: 260px;
    margin-top: 15px;
  }
}


/*** formular styles ***/
.bg-formular {
  background-color: #CECBC0;
}

.border-step {
  border: 2px dotted #8D5052;
}


/*** alt gegen neu ***/
.alt-gegen-neu-ueberschrift {
  width: 1200px;
  margin-top: -550px;
  padding-bottom: 100px;
  position: relative;
  z-index: 9;
}

@media (max-width: 1920px) {
  .alt-gegen-neu-ueberschrift {
    width: 900px;
    margin-top: -450px;
    padding-bottom: 80px;
  }
}

@media (max-width: 1400px) {
  .alt-gegen-neu-ueberschrift {
    width: 700px;
  }
}

@media (max-width: 1200px) {
  .alt-gegen-neu-ueberschrift {
    width: 600px;
    margin-top: -280px;
    padding-bottom: 50px;
  }
}

@media (max-width: 992px) {
  .alt-gegen-neu-ueberschrift {
    width: 370px;
    margin-top: -250px;
    padding-bottom: 50px;
  }
}

@media (max-width: 768px) {
  .alt-gegen-neu-ueberschrift {
    width: 320px;
    margin-top: -170px;
    padding-bottom: 30px;
  }
}

@media (max-width: 576px) {
  .alt-gegen-neu-ueberschrift {
    width: 260px;
    margin-top: -121px;
    padding-bottom: 22px;
  }
}

.bg-alt-gegen-neu {
  background-color: #111C12;
  position: relative;
  z-index: 10;
}


/*** 3d planung – visual furniture ***/
.vf-ueberschrift {
  width: 1200px;
  margin-top: -550px;
  position: relative;
  z-index: 9;
}

@media (max-width: 1920px) {
  .vf-ueberschrift {
    width: 900px;
    margin-top: -450px;
  }
}

@media (max-width: 1400px) {
  .vf-ueberschrift {
    width: 700px;
  }
}

@media (max-width: 1200px) {
  .vf-ueberschrift {
    width: 600px;
    margin-top: -280px;
  }
}

@media (max-width: 992px) {
  .vf-ueberschrift {
    width: 370px;
    margin-top: -250px;
  }
}

@media (max-width: 768px) {
  .vf-ueberschrift {
    width: 320px;
    margin-top: -210px;
  }
}

@media (max-width: 576px) {
  .vf-ueberschrift {
    width: 260px;
    margin-top: -141px;
  }
}

.bg-vf {
  background-color: #3B4435;
  position: relative;
  z-index: 10;
  margin-top: -60px;
}

@media (max-width: 576px) {
  .bg-vf {
    margin-top: -30px;
  }
}

.vf-ipad {
  margin-top: -60px;
}

@media (max-width: 576px) {
  .vf-ipad {
    margin-top: 15px;
  }

  .vf-ipad:first-child {
    margin-top: -15px;
  }

  .vf-ipad img {
    width: 320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

.btn-vf {
  background-color: #92AF6E;
  color: #fff;
  border: 1px solid transparent;
  padding: 13px 40px !important;
  font-size: 1.2rem;
  font-weight: 300;
}

.btn-vf:hover,
.btn-vf:focus {
  background-color: #fff;
  color: #92AF6E;
  border: 1px solid transparent;
}




/***** couches *****/
.bg-color-position {
  margin-top: -150px;
  padding-top: 150px;
  z-index: 1;
  position: relative;
}

@media (max-width: 769px) {
  .bg-color-position {
    margin-top: -42px;
    padding-top: 42px;
    z-index: 1;
    position: relative;
  }
}

/***** couches *****/
.bg-color-position-extra {
  margin-top: -50px;
  padding-top: 50px;
  position: relative;
}

@media (max-width: 769px) {
  .bg-color-position-extra {
    margin-top: -22px;
    position: relative;
  }
}

.highlight {
  padding: 50px 0px 60px 40px;
}

@media (max-width: 769px) {
  .highlight {
    padding: 40px 0px 40px 40px;
  }
}


/* lerici */
.bg-lerici-n {
  background-color: var(--lerici-bg);
}

.bg-lerici-dark {
  background-color: var(--lerici);
}

.bg-lerici-outline {
  border: 2px dotted var(--lerici);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-lerici-outline {
    padding-top: 15px;
  }
}

.btn-lerici-n {
  background-color: var(--lerici) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-lerici-n:hover,
.btn-lerici-n:focus {
  background-color: #fff !important;
  color: var(--lerici) !important;
  border: 1px solid transparent !important;
}

.btn-lerici-secondary {
  background-color: var(--lerici-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-lerici-secondary:hover,
.btn-lerici-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--lerici-bg) !important;
  border-color: transparent !important;
}

.highlight-lerici {
  background-color: var(--lerici-bg);
}

.lerici .border-top {
  border-top: 2px dotted var(--lerici) !important;
}

.lerici .border-bottom {
  border-bottom: 2px dotted var(--lerici) !important;
}


/* granada */
.bg-granada-n {
  background-color: var(--granada-bg);
}

.bg-granada-dark {
  background-color: var(--granada);
}

.bg-granada-outline {
  border: 2px dotted var(--granada);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-granada-outline {
    padding-top: 15px;
  }
}

.btn-granada-n {
  background-color: var(--granada) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-granada-n:hover,
.btn-granada-n:focus {
  background-color: #fff !important;
  color: var(--granada) !important;
  border: 1px solid transparent !important;
}

.btn-granada-secondary {
  background-color: var(--granada-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-granada-secondary:hover,
.btn-granada-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--granada-bg) !important;
  border-color: transparent !important;
}

.highlight-granada {
  background-color: var(--granada-bg);
}

.granada .border-top {
  border-top: 2px dotted var(--granada) !important;
}

.granada .border-bottom {
  border-bottom: 2px dotted var(--granada) !important;
}


/* luna */
.bg-luna-n {
  background-color: var(--luna-bg);
}

.bg-luna-dark {
  background-color: var(--luna);
}

.bg-luna-outline {
  border: 2px dotted var(--luna);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-luna-outline {
    padding-top: 15px;
  }
}

.btn-luna-n {
  background-color: var(--luna) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-luna-n:hover,
.btn-luna-n:focus {
  background-color: #fff !important;
  color: var(--luna) !important;
  border: 1px solid transparent !important;
}

.btn-luna-secondary {
  background-color: var(--luna-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-luna-secondary:hover,
.btn-luna-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--luna-bg) !important;
  border-color: transparent !important;
}

.highlight-luna {
  background-color: var(--luna-bg);
}

.luna .border-top {
  border-top: 2px dotted var(--luna) !important;
}

.luna .border-bottom {
  border-bottom: 2px dotted var(--luna) !important;
}


/* key-west */
.bg-key-west-n {
  background-color: var(--key-west-bg);
}

.bg-key-west-dark {
  background-color: var(--key-west);
}

.bg-key-west-outline {
  border: 2px dotted var(--key-west);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-key-west-outline {
    padding-top: 15px;
  }
}

.btn-key-west-n {
  background-color: var(--key-west) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-key-west-n:hover,
.btn-key-west-n:focus {
  background-color: #fff !important;
  color: var(--key-west) !important;
  border: 1px solid transparent !important;
}

.btn-key-west-secondary {
  background-color: var(--key-west-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-key-west-secondary:hover,
.btn-key-west-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--key-west-bg) !important;
  border-color: transparent !important;
}

.highlight-key-west {
  background-color: var(--key-west-bg);
}

.key-west .border-top {
  border-top: 2px dotted var(--key-west) !important;
}

.key-west .border-bottom {
  border-bottom: 2px dotted var(--key-west) !important;
}


/* matera */
.bg-matera-n {
  background-color: var(--matera-bg);
}

.bg-matera-dark {
  background-color: var(--matera);
}

.bg-matera-outline {
  border: 2px dotted var(--matera);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-matera-outline {
    padding-top: 15px;
  }
}

.btn-matera-n {
  background-color: var(--matera) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-matera-n:hover,
.btn-matera-n:focus {
  background-color: #fff !important;
  color: var(--matera) !important;
  border: 1px solid transparent !important;
}

.btn-matera-secondary {
  background-color: var(--matera-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-matera-secondary:hover,
.btn-matera-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--matera-bg) !important;
  border-color: transparent !important;
}

.highlight-matera {
  background-color: var(--matera-bg);
}

.matera .border-top {
  border-top: 2px dotted var(--matera) !important;
}

.matera .border-bottom {
  border-bottom: 2px dotted var(--matera) !important;
}


/* bern */
.bg-bern-n {
  background-color: var(--bern-bg);
}

.bg-bern-dark {
  background-color: var(--bern);
}

.bg-bern-outline {
  border: 2px dotted var(--bern);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-bern-outline {
    padding-top: 15px;
  }
}

.btn-bern-n {
  background-color: var(--bern) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-bern-n:hover,
.btn-bern-n:focus {
  background-color: #fff !important;
  color: var(--bern) !important;
  border: 1px solid transparent !important;
}

.btn-bern-secondary {
  background-color: var(--bern-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-bern-secondary:hover,
.btn-bern-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--bern-bg) !important;
  border-color: transparent !important;
}

.highlight-bern {
  background-color: var(--bern-bg);
}

.bern .border-top {
  border-top: 2px dotted var(--bern) !important;
}

.bern .border-bottom {
  border-bottom: 2px dotted var(--bern) !important;
}


/* darwin */
.bg-darwin-n {
  background-color: var(--darwin-bg);
}

.bg-darwin-dark {
  background-color: var(--darwin);
}

.bg-darwin-outline {
  border: 2px dotted var(--darwin);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-darwin-outline {
    padding-top: 15px;
  }
}

.btn-darwin-n {
  background-color: var(--darwin) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-darwin-n:hover,
.btn-darwin-n:focus {
  background-color: #fff !important;
  color: var(--darwin) !important;
  border: 1px solid transparent !important;
}

.btn-darwin-secondary {
  background-color: var(--darwin-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-darwin-secondary:hover,
.btn-darwin-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--darwin-bg) !important;
  border-color: transparent !important;
}

.highlight-darwin {
  background-color: var(--darwin-bg);
}

.darwin .border-top {
  border-top: 2px dotted var(--darwin) !important;
}

.darwin .border-bottom {
  border-bottom: 2px dotted var(--darwin) !important;
}


/* ibiza */
.bg-ibiza-n {
  background-color: var(--ibiza-bg);
}

.bg-ibiza-dark {
  background-color: var(--ibiza);
}

.bg-ibiza-outline {
  border: 2px dotted var(--ibiza);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-ibiza-outline {
    padding-top: 15px;
  }
}

.btn-ibiza-n {
  background-color: var(--ibiza) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-ibiza-n:hover,
.btn-ibiza-n:focus {
  background-color: #fff !important;
  color: var(--ibiza) !important;
  border: 1px solid transparent !important;
}

.btn-ibiza-secondary {
  background-color: var(--ibiza-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-ibiza-secondary:hover,
.btn-ibiza-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--ibiza-bg) !important;
  border-color: transparent !important;
}

.highlight-ibiza {
  background-color: var(--ibiza-bg);
}

.ibiza .border-top {
  border-top: 2px dotted var(--ibiza) !important;
}

.ibiza .border-bottom {
  border-bottom: 2px dotted var(--ibiza) !important;
}


/* hudson */
.bg-hudson-n {
  background-color: var(--hudson-bg);
}

.bg-hudson-dark {
  background-color: var(--hudson);
}

.bg-hudson-outline {
  border: 2px dotted var(--hudson);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-hudson-outline {
    padding-top: 15px;
  }
}

.btn-hudson-n {
  background-color: var(--hudson) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-hudson-n:hover,
.btn-hudson-n:focus {
  background-color: #fff !important;
  color: var(--hudson) !important;
  border: 1px solid transparent !important;
}

.btn-hudson-secondary {
  background-color: var(--hudson-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-hudson-secondary:hover,
.btn-hudson-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--hudson-bg) !important;
  border-color: transparent !important;
}

.highlight-hudson {
  background-color: var(--hudson-bg);
}

.hudson .border-top {
  border-top: 2px dotted var(--hudson) !important;
}

.hudson .border-bottom {
  border-bottom: 2px dotted var(--hudson) !important;
}


/* lodi */
.bg-lodi-n {
  background-color: var(--lodi-bg);
}

.bg-lodi-dark {
  background-color: var(--lodi);
}

.bg-lodi-outline {
  border: 2px dotted var(--lodi);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-lodi-outline {
    padding-top: 15px;
  }
}

.btn-lodi-n {
  background-color: var(--lodi) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-lodi-n:hover,
.btn-lodi-n:focus {
  background-color: #fff !important;
  color: var(--lodi) !important;
  border: 1px solid transparent !important;
}

.btn-lodi-secondary {
  background-color: var(--lodi-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-lodi-secondary:hover,
.btn-lodi-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--lodi-bg) !important;
  border-color: transparent !important;
}

.highlight-lodi {
  background-color: var(--lodi-bg);
}

.lodi .border-top {
  border-top: 2px dotted var(--lodi) !important;
}

.lodi .border-bottom {
  border-bottom: 2px dotted var(--lodi) !important;
}

/* loya */
.bg-loya-n {
  background-color: var(--loya-bg);
}

.bg-loya-dark {
  background-color: var(--loya);
}

.bg-loya-outline {
  border: 2px dotted var(--loya);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-loya-outline {
    padding-top: 15px;
  }
}

.btn-loya-n {
  background-color: var(--loya) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-loya-n:hover,
.btn-loya-n:focus {
  background-color: #fff !important;
  color: var(--loya) !important;
  border: 1px solid transparent !important;
}

.btn-loya-secondary {
  background-color: var(--loya-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-loya-secondary:hover,
.btn-loya-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--loya-bg) !important;
  border-color: transparent !important;
}

.highlight-loya {
  background-color: var(--loya-bg);
}

.loya .border-top {
  border-top: 2px dotted var(--loya) !important;
}

.loya .border-bottom {
  border-bottom: 2px dotted var(--loya) !important;
}

/* livo */
.bg-livo-n {
  background-color: var(--livo-bg);
}

.bg-livo-dark {
  background-color: var(--livo);
}

.bg-livo-outline {
  border: 2px dotted var(--livo);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-livo-outline {
    padding-top: 15px;
  }
}

.btn-livo-n {
  background-color: var(--livo) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-livo-n:hover,
.btn-livo-n:focus {
  background-color: #fff !important;
  color: var(--livo) !important;
  border: 1px solid transparent !important;
}

.btn-livo-secondary {
  background-color: var(--livo-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-livo-secondary:hover,
.btn-livo-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--livo-bg) !important;
  border-color: transparent !important;
}

.highlight-livo {
  background-color: var(--livo-bg);
}

.livo .border-top {
  border-top: 2px dotted var(--livo) !important;
}

.livo .border-bottom {
  border-bottom: 2px dotted var(--livo) !important;
}

/* monza */
.bg-monza-n {
  background-color: var(--monza-bg);
}

.bg-monza-dark {
  background-color: var(--monza);
}

.bg-monza-outline {
  border: 2px dotted var(--monza);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-monza-outline {
    padding-top: 15px;
  }
}

.btn-monza-n {
  background-color: var(--monza) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-monza-n:hover,
.btn-monza-n:focus {
  background-color: #fff !important;
  color: var(--monza) !important;
  border: 1px solid transparent !important;
}

.btn-monza-secondary {
  background-color: var(--monza-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-monza-secondary:hover,
.btn-monza-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--monza-bg) !important;
  border-color: transparent !important;
}

.highlight-monza {
  background-color: var(--monza-bg);
}

.monza .border-top {
  border-top: 2px dotted var(--monza) !important;
}

.monza .border-bottom {
  border-bottom: 2px dotted var(--monza) !important;
}

/* pamplona */
.bg-pamplona-n {
  background-color: var(--pamplona-bg);
}

.bg-pamplona-dark {
  background-color: var(--pamplona);
}

.bg-pamplona-outline {
  border: 2px dotted var(--pamplona);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-pamplona-outline {
    padding-top: 15px;
  }
}

.btn-pamplona-n {
  background-color: var(--pamplona) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-pamplona-n:hover,
.btn-pamplona-n:focus {
  background-color: #fff !important;
  color: var(--pamplona) !important;
  border: 1px solid transparent !important;
}

.btn-pamplona-secondary {
  background-color: var(--pamplona-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-pamplona-secondary:hover,
.btn-pamplona-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--pamplona-bg) !important;
  border-color: transparent !important;
}

.highlight-pamplona {
  background-color: var(--pamplona-bg);
}

.pamplona .border-top {
  border-top: 2px dotted var(--pamplona) !important;
}

.pamplona .border-bottom {
  border-bottom: 2px dotted var(--pamplona) !important;
}

/* varda */
.bg-varda-n {
  background-color: var(--varda-bg);
}

.bg-varda-dark {
  background-color: var(--varda);
}

.bg-varda-outline {
  border: 2px dotted var(--varda);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-varda-outline {
    padding-top: 15px;
  }
}

.btn-varda-n {
  background-color: var(--varda) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-varda-n:hover,
.btn-varda-n:focus {
  background-color: #fff !important;
  color: var(--varda) !important;
  border: 1px solid transparent !important;
}

.btn-varda-secondary {
  background-color: var(--varda-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-varda-secondary:hover,
.btn-varda-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--varda-bg) !important;
  border-color: transparent !important;
}

.highlight-varda {
  background-color: var(--varda-bg);
}

.varda .border-top {
  border-top: 2px dotted var(--varda) !important;
}

.varda .border-bottom {
  border-bottom: 2px dotted var(--varda) !important;
}

/* velden */
.bg-velden-n {
  background-color: var(--velden-bg);
}

.bg-velden-dark {
  background-color: var(--velden);
}

.bg-velden-outline {
  border: 2px dotted var(--velden);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-velden-outline {
    padding-top: 15px;
  }
}

.btn-velden-n {
  background-color: var(--velden) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-velden-n:hover,
.btn-velden-n:focus {
  background-color: #fff !important;
  color: var(--velden) !important;
  border: 1px solid transparent !important;
}

.btn-velden-secondary {
  background-color: var(--velden-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-velden-secondary:hover,
.btn-velden-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--velden-bg) !important;
  border-color: transparent !important;
}

.highlight-velden {
  background-color: var(--velden-bg);
}

.velden .border-top {
  border-top: 2px dotted var(--velden) !important;
}

.velden .border-bottom {
  border-bottom: 2px dotted var(--velden) !important;
}

/* sarah */
.bg-sarah-n {
  background-color: var(--sarah-bg);
}

.bg-sarah-dark {
  background-color: var(--sarah);
}

.bg-sarah-outline {
  border: 2px dotted var(--sarah);
  padding-top: 40px;
}

@media (max-width: 769px) {
  .bg-sarah-outline {
    padding-top: 15px;
  }
}

.btn-sarah-n {
  background-color: var(--sarah) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}

.btn-sarah-n:hover,
.btn-sarah-n:focus {
  background-color: #fff !important;
  color: var(--sarah) !important;
  border: 1px solid transparent !important;
}

.btn-sarah-secondary {
  background-color: var(--sarah-bg) !important;
  color: var(--mds-dark) !important;
  border-color: transparent !important;
}

.btn-sarah-secondary:hover,
.btn-sarah-secondary:focus {
  background-color: var(--mds-dark) !important;
  color: var(--sarah-bg) !important;
  border-color: transparent !important;
}

.highlight-sarah {
  background-color: var(--sarah-bg);
}

.sarah .border-top {
  border-top: 2px dotted var(--sarah) !important;
}

.sarah .border-bottom {
  border-bottom: 2px dotted var(--sarah) !important;
}



/***** Formular Lodi Sessel *****/
.table {
  --bs-table-bg: #e3e2e3;
  --bs-table-border-color: #3b3b3b;
  --bs-table-color: #3b3b3b;
}