@font-face {
    font-family: 'Black Han Sans';
    src: url('../../assets/font/Black_Han_Sans/BlackHanSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



@keyframes fadeIn {
	/* Die einzelnen Übergänge können mit "from" und "to" angegeben werden */
	from { 
		opacity: 0;
	  } 
	  to { 
		opacity: 1;
	  } 
}

@keyframes fadeIn2 {
	/* Die einzelnen Übergänge können mit "from" und "to" angegeben werden */
	0% { 
		opacity: 0;
	  } 
	  50% { 
		opacity: 1;
	  } 

      100% { 
		opacity: 0.1;
	  } 
}

.breadcrumbs {
  padding-top: 30px;
}

.breadcrumbs a, .float-start{
  color: #6c757d !important;
}



/* icons */
span.icon-schmuck-20, .icon-schmuck-30, .icon-schmuck-50 {
    display: block;
    background-image: url("../../images/icons/icons_schmuck.svg");
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    transition: background-position .3s ease 0.3s;
}

.icon-schmuck-20 {
    width: 20px;
    height: 20px;
    background-size: auto 60px;
}

.icon-schmuck-30 {
    width: 30px;
    height: 30px;
    background-size: auto 90px;
}

.icon-schmuck-50 {
    width: 50px;
    height: 50px;
    background-size: auto 150px;
}

/* -----------    home   ------------- */ 


span.icon-schmuck-20.home {
	background-position: -0px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.homew {
	background-position: -0px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.homeg {
	background-position: -0px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.home {
	background-position: -0px -20px;
}
 span.icon-schmuck-30.home {
	background-position: -0px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.homew {
	background-position: -0px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.homeg {
	background-position: -0px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.home {
	background-position: -0px -30px;
}
 span.icon-schmuck-50.home {
	background-position: -0px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.homew {
	background-position: -0px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.homeg {
	background-position: -0px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.home {
	background-position: -0px -50px;
}
 
/* -----------    hut   ------------- */ 


span.icon-schmuck-20.hut {
	background-position: -20px top;
    width: 40px;
}
 
/* Farben: */ 
span.icon-schmuck-20.hutw {
	background-position: -20px -20px;
    width: 40px;
}
 
/* Farben: */ 
span.icon-schmuck-20.hutg {
	background-position: -20px -40px;
    width: 40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.hut {
	background-position: -20px -20px;
    width: 40px;
}
 span.icon-schmuck-30.hut {
	background-position: -30px top;
    width: 60px;
}
 
/* Farben: */ 
span.icon-schmuck-30.hutw {
	background-position: -30px -30px;
    width: 60px;
}
 
/* Farben: */ 
span.icon-schmuck-30.hutg {
	background-position: -30px -60px;
    width: 60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.hut {
	background-position: -30px -30px;
    width: 60px;
}
 span.icon-schmuck-50.hut {
	background-position: -50px top;
    width: 100px;
}
 
/* Farben: */ 
span.icon-schmuck-50.hutw {
	background-position: -50px -50px;
    width: 100px;
}
 
/* Farben: */ 
span.icon-schmuck-50.hutg {
	background-position: -50px -100px;
    width: 100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.hut {
	background-position: -50px -50px;
    width: 100px;
}
 
/* -----------    band   ------------- */ 


span.icon-schmuck-20.band {
	background-position: -60px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.bandw {
	background-position: -60px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.bandg {
	background-position: -60px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.band {
	background-position: -60px -20px;
}
 span.icon-schmuck-30.band {
	background-position: -90px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.bandw {
	background-position: -90px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.bandg {
	background-position: -90px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.band {
	background-position: -90px -30px;
}
 span.icon-schmuck-50.band {
	background-position: -150px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.bandw {
	background-position: -150px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.bandg {
	background-position: -150px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.band {
	background-position: -150px -50px;
}
 
/* -----------    kette   ------------- */ 


span.icon-schmuck-20.kette {
	background-position: -80px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.kettew {
	background-position: -80px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.ketteg {
	background-position: -80px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.kette {
	background-position: -80px -20px;
}
 span.icon-schmuck-30.kette {
	background-position: -120px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.kettew {
	background-position: -120px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.ketteg {
	background-position: -120px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.kette {
	background-position: -120px -30px;
}
 span.icon-schmuck-50.kette {
	background-position: -200px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.kettew {
	background-position: -200px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.ketteg {
	background-position: -200px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.kette {
	background-position: -200px -50px;
}
 
/* -----------    wir   ------------- */ 


span.icon-schmuck-20.wir {
	background-position: -100px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.wirw {
	background-position: -100px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.wirg {
	background-position: -100px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.wir {
	background-position: -100px -20px;
}
 span.icon-schmuck-30.wir {
	background-position: -150px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.wirw {
	background-position: -150px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.wirg {
	background-position: -150px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.wir {
	background-position: -150px -30px;
}
 span.icon-schmuck-50.wir {
	background-position: -250px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.wirw {
	background-position: -250px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.wirg {
	background-position: -250px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.wir {
	background-position: -250px -50px;
}
 
/* -----------    picture   ------------- */ 


span.icon-schmuck-20.picture {
	background-position: -120px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.picturew {
	background-position: -120px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.pictureg {
	background-position: -120px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.picture {
	background-position: -120px -20px;
}
 span.icon-schmuck-30.picture {
	background-position: -180px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.picturew {
	background-position: -180px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.pictureg {
	background-position: -180px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.picture {
	background-position: -180px -30px;
}
 span.icon-schmuck-50.picture {
	background-position: -300px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.picturew {
	background-position: -300px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.pictureg {
	background-position: -300px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.picture {
	background-position: -300px -50px;
}
 
/* -----------    next   ------------- */ 


span.icon-schmuck-20.next {
	background-position: -140px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.nextw {
	background-position: -140px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.nextg {
	background-position: -140px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.next {
	background-position: -140px -20px;
}
 span.icon-schmuck-30.next {
	background-position: -210px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.nextw {
	background-position: -210px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.nextg {
	background-position: -210px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.next {
	background-position: -210px -30px;
}
 span.icon-schmuck-50.next {
	background-position: -350px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.nextw {
	background-position: -350px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.nextg {
	background-position: -350px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.next {
	background-position: -350px -50px;
}
 
/* -----------    arrow1   ------------- */ 


span.icon-schmuck-20.arrow1 {
	background-position: -160px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.arrow1w {
	background-position: -160px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.arrow1g {
	background-position: -160px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.arrow1 {
	background-position: -160px -20px;
}
 span.icon-schmuck-30.arrow1 {
	background-position: -240px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.arrow1w {
	background-position: -240px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.arrow1g {
	background-position: -240px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.arrow1 {
	background-position: -240px -30px;
}
 span.icon-schmuck-50.arrow1 {
	background-position: -400px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.arrow1w {
	background-position: -400px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.arrow1g {
	background-position: -400px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.arrow1 {
	background-position: -400px -50px;
}
 
/* -----------    arrow2   ------------- */ 


span.icon-schmuck-20.arrow2 {
	background-position: -180px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.arrow2w {
	background-position: -180px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.arrow2g {
	background-position: -180px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.arrow2 {
	background-position: -180px -20px;
}
 span.icon-schmuck-30.arrow2 {
	background-position: -270px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.arrow2w {
	background-position: -270px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.arrow2g {
	background-position: -270px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.arrow2 {
	background-position: -270px -30px;
}
 span.icon-schmuck-50.arrow2 {
	background-position: -450px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.arrow2w {
	background-position: -450px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.arrow2g {
	background-position: -450px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.arrow2 {
	background-position: -450px -50px;
}
 
/* -----------    arrow3   ------------- */ 


span.icon-schmuck-20.arrow3 {
	background-position: -200px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.arrow3w {
	background-position: -200px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.arrow3g {
	background-position: -200px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.arrow3 {
	background-position: -200px -20px;
}
 span.icon-schmuck-30.arrow3 {
	background-position: -300px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.arrow3w {
	background-position: -300px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.arrow3g {
	background-position: -300px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.arrow3 {
	background-position: -300px -30px;
}
 span.icon-schmuck-50.arrow3 {
	background-position: -500px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.arrow3w {
	background-position: -500px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.arrow3g {
	background-position: -500px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.arrow3 {
	background-position: -500px -50px;
}
 
/* -----------    contact   ------------- */ 


span.icon-schmuck-20.contact {
	background-position: -220px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.contactw {
	background-position: -220px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.contactg {
	background-position: -220px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.contact {
	background-position: -220px -20px;
}
 span.icon-schmuck-30.contact {
	background-position: -330px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.contactw {
	background-position: -330px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.contactg {
	background-position: -330px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.contact {
	background-position: -330px -30px;
}
 span.icon-schmuck-50.contact {
	background-position: -550px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.contactw {
	background-position: -550px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.contactg {
	background-position: -550px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.contact {
	background-position: -550px -50px;
}
 
/* -----------    tasche   ------------- */ 


span.icon-schmuck-20.tasche {
	background-position: -240px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.taschew {
	background-position: -240px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.tascheg {
	background-position: -240px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.tasche {
	background-position: -240px -20px;
}
 span.icon-schmuck-30.tasche {
	background-position: -360px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.taschew {
	background-position: -360px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.tascheg {
	background-position: -360px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.tasche {
	background-position: -360px -30px;
}
 span.icon-schmuck-50.tasche {
	background-position: -600px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.taschew {
	background-position: -600px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.tascheg {
	background-position: -600px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.tasche {
	background-position: -600px -50px;
}
 
/* -----------    facebook   ------------- */ 


span.icon-schmuck-20.facebook {
	background-position: -260px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.facebookw {
	background-position: -260px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.facebookg {
	background-position: -260px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.facebook {
	background-position: -260px -20px;
}
 span.icon-schmuck-30.facebook {
	background-position: -390px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.facebookw {
	background-position: -390px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.facebookg {
	background-position: -390px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.facebook {
	background-position: -390px -30px;
}
 span.icon-schmuck-50.facebook {
	background-position: -650px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.facebookw {
	background-position: -650px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.facebookg {
	background-position: -650px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.facebook {
	background-position: -650px -50px;
}
 
/* -----------    instagramm   ------------- */ 


span.icon-schmuck-20.instagramm {
	background-position: -280px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.instagrammw {
	background-position: -280px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.instagrammg {
	background-position: -280px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.instagramm {
	background-position: -280px -20px;
}
 span.icon-schmuck-30.instagramm {
	background-position: -420px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.instagrammw {
	background-position: -420px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.instagrammg {
	background-position: -420px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.instagramm {
	background-position: -420px -30px;
}
 span.icon-schmuck-50.instagramm {
	background-position: -700px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.instagrammw {
	background-position: -700px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.instagrammg {
	background-position: -700px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.instagramm {
	background-position: -700px -50px;
}


/* -----------    Lampe   ------------- */ 


span.icon-schmuck-20.lampe {
	background-position: -300px top;
}
 
/* Farben: */ 
span.icon-schmuck-20.lampew {
	background-position: -300px -20px;
}
 
/* Farben: */ 
span.icon-schmuck-20.lampeg {
	background-position: -300px -40px;
}
 
/* Active: */ 
li.active span.icon-schmuck-20.lampe {
	background-position: -300px -20px;
}
 span.icon-schmuck-30.lampe {
	background-position: -450px top;
}
 
/* Farben: */ 
span.icon-schmuck-30.lampew {
	background-position: -450px -30px;
}
 
/* Farben: */ 
span.icon-schmuck-30.lampeg {
	background-position: -450px -60px;
}
 
/* Active: */ 
li.active span.icon-schmuck-30.lampe {
	background-position: -450px -30px;
}
 span.icon-schmuck-50.lampe {
	background-position: -750px top;
}
 
/* Farben: */ 
span.icon-schmuck-50.lampew {
	background-position: -750px -50px;
}
 
/* Farben: */ 
span.icon-schmuck-50.lampeg {
	background-position: -750px -100px;
}
 
/* Active: */ 
li.active span.icon-schmuck-50.lampe {
	background-position: -750px -50px;
}
 







/* Helper */
.r45 {
    transform: rotate(45deg);
}

.r90 {
    transform: rotate(90deg);
}

.r180 {
    transform: rotate(180deg);
}

.r270 {
    transform: rotate(270deg);
}



.hidden {
    opacity: 0;
}

.btn-warning {
    background-color: transparent;
    border: solid 3px hsl(72, 6%, 30%);
}




body {   
    color: rgb(89, 39, 4);

}

body > section {
    position: relative;
}

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

h4, h5 {
    margin: 20px 0 5px 0;
    font-weight: 600;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
}




.toTop {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99;
    height: 50px;
    padding: 10px;
    background-color: #4f5148;
    border-radius: 50%;
    transition: width .5s .6s, border-radius 0.5s 1s;
    width: 50px;
}

.toTop span:first-child {
    position: absolute;
    right: -400px;
    margin: 0 10px;
    color: white;
    text-decoration: none;
    opacity: 0;
    transition: right 0.5s 1s, opacity .5s;
}








/* header anfang */
header.mainheader {
    display: flex;
    min-height: 550px;
    position: relative;
    background-color: rgb(255, 255, 255);
    justify-content: flex-end;
    align-items: center;
    padding: 0 100px;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(243,243,243,1) 35%, rgba(255,255,255,1) 100%);
}

body.homepage header.mainheader {    
    min-height: calc(100vh - 100px);
}



header.mainheader .herobild {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    /* top: -150px; */
    top: 0;
    bottom: 0;
    background-image: url(../../images/background/indizio-perlenkopf.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100px;
    opacity: 0;
    animation: fadeIn 1.5s 0.5s forwards; 
    mix-blend-mode: multiply;
}

body.homepage header.mainheader .herobild {
    background-attachment: fixed;
    background-position: -100px;
}

header.mainheader .header-box {
    position: relative;
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    width: 650px;
    min-height: 400px;
    background-color: #c4c8b7;
    background-image: url(../../images/background/indizio-gardasee.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: rgb(89, 39, 4);
     opacity: 0;
    animation: fadeIn 1.5s 2.5s forwards;
}

body.homepage header.mainheader .header-box {
    position: absolute;
    z-index: 99;
    right: 100px;
    top: 45%;
}

header.mainheader .header-box:after {
    content:"";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.75);
}

header.mainheader .header-box:after {
    content:"";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    top: 1.5rem;
    bottom: 1.5rem;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.75);
}

header.mainheader .header-box h1, header.mainheader .header-box h2, header.mainheader .header-box p {
    position: relative;
    z-index: 3;
}

header.mainheader .header-box p.h1 {
    font-size: 4rem;
    text-align: center;
    font-family: 'Black Han Sans', sans-serif;
    color: #c4c8b7;
}

header.mainheader .header-box p.h2 {
    font-size: 2.5rem;
    text-align: center;
}

header.mainheader .header-box p.h1 {
    text-align: center;
    line-height: 40px;
}

header.mainheader .header-box p.h4  {
    position: relative;
    top: 10px;
    color: #052e10;
    color: rgb(131, 134, 119);
    color: hsl(72, 6%, 30%);
}

header.mainheader .header-box p {
    text-align: center;
}


header.mainheader .header-box img {
    max-width: 300px;
}



/* Menu allgemein */
li.nav-item, a.nav-link {
    position: relative;
    z-index: 99;
}

ul.mod-menu__sub {
    position: absolute;
    top: -600px;
    left: 0;
    min-width: 180px;
    padding: 10px 10px 20px 10px;
    background-color: white;
    opacity: 0;
    transition: top 0s 1s, opacity 1s 0.5s;
    -webkit-box-shadow: 5px 5px 15px 5px #000000; 
box-shadow: 5px 5px 15px 5px #000000;
}



ul.mod-menu__sub li{
    margin-top: 5px;
}



ul.mod-menu__sub a{
    display: block;
    text-decoration: none;
    padding: 10px;
    color:rgb(89, 39, 4);
    border-top: solid 1px;
    background-color: white;
}

ul.mod-menu__sub li:last-child a{
    border-bottom: solid 1px;
}

ul.mod-menu__sub a:hover{
background-color: #4f5148;
color: white;
}


/* Meta-Nav */
.metanav {
    position: relative;
    z-index: 99;
    background-color: rgba(196, 200, 183,0.90);
    padding-right: 100px !important;
    border-bottom: 0.5px solid rgb(255, 255, 255);
}

body.homepage .metanav {
    position: absolute;
    z-index: 99;
    left:0;
    right: 0;
    padding: 5px 0 0 0;
}



.metanav ul{
    border-radius: 0 0 5px 5px;
}

.metanav ul li{
    background-color: white;
    margin-right: 3px;
    border-top: solid 3px rgba(196, 200, 183,0.90);
    transition: background-color .25s ease 0.1s; 
 }

 .metanav ul li:last-child{
    margin-right: 0;
 }

.metanav a{
    display: flex;
    margin: 0 5px;
    color: rgb(255, 255, 255);
    color: #4f5148;
    border-bottom: solid 3px rgba(196, 200, 183,0.90);
}

.metanav a{
    display: flex;
    align-items: center;
    margin: 0 5px;
    color: rgb(255, 255, 255);
    color: #4f5148;
    border-bottom: solid 3px rgba(196, 200, 183,0.90);
}

.metanav a span:first-child {
    margin-right: 2.5px;
}

.metanav li.active {
    background-color: rgb(89, 39, 4);
}

.metanav li.active a {
    color: white;
    border-bottom: solid 3px white;
}

.metanav li.active a span.icon-schmuck-20.contactg {
    background-position: -220px -20px;
}
/* Meta-Nav */




.mainnav {
    position: relative;
    border-bottom: solid 2px rgb(196, 200, 183);
    background-color: white;
}

body.homepage .mainnav {
    position: absolute;
    z-index: 99;
    left: 100px;
    right: 100px;
    top: 20%;
    background-color: transparent;
}

.mainnav > div{
    padding: 0 100px !important;
}

body.homepage .mainnav {
    border-bottom: none;
}

body.homepage .mainnav > div {
    padding: 0 0 !important;
}

body.homepage .mainnav > div > div{
    min-width: 650px;
}

.navbar-toogler {
    display: none;
    position: absolute;
    right: 50%;
    top: -35px;
    transform: translate(25px);
    z-index: 200;
    width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
    background-color: hsl(72, 6%, 30%);
    border-color: hsl(72, 6%, 25%);
}

.navbar-toogler-text {
    position: absolute;
    left: -10000px;
}

.navbar-toggler-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.navbar-toggler-icon span {
    display: block;
    height: 4px;
    background-color: hsl(72, 6%, 50%);
    transition: all 0.5s ease;
    border-radius: 5px;
}

.navbar-toggler-icon span:first-child {
    margin-top: 0;
}

.mainnav a img{
    width: 150px;
}

.mainnav > ul{
    padding: 5px 0 5px 10px;
}  

.mainnav .nav-link{
    display: flex;
    align-items: center;
    color: rgb(89, 39, 4);
    flex-direction: row;
    font-size: 1rem;
    transition: all .25s ease 0.6s;
}  

.mainnav .active .nav-link, .active .nav-link {
    color: rgb(255, 255, 255);
    background-color: rgb(89, 39, 4);
    border-radius: 2.5px;
    transition: background-color .25s ease 0.1s; 
}

body.homepage .mainnav .nav-link{   
    flex-direction: column;   
    font-size: 1.5rem;
}

body.homepage .mainnav li.textHidden {
    display: flex;
    align-items: center;
}

  
/* Mobile Navigation */
.mobilNav {
    position: absolute;
    top: calc(-100vh - 200px);
    z-index: 100;
    min-height: calc(100vh - 30px);
    /* width: 100%; */
    left: 10px;
    right: 10px;
    background-color: white;
    padding: 20px;
    background-image: url(../../../../images/logo/indizio-logo.svg);
    background-size: 195px auto;
    background-position: center 70px;
    background-repeat: no-repeat;
    transition: all 1s ease;
    -webkit-box-shadow: 0px 2px 15px 2px #000000; 
    box-shadow: 0px 2px 15px 2px #000000;
    border-radius:  0 0 5px 5px;
}

.mobilNav ul:first-child{
margin-top: 150px;
}

.mobilNav ul li{
    margin-top: 8px;
    background-color:rgb(196, 200, 183);
    width: 100%;
    margin: 5px auto 5px auto;
}

.mobilNav ul li.active{
    background-color:rgb(89, 39, 4);
}

.mobilNav ul li.active a{
    color: white;
}

.mobilNav ul a{
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(89, 39, 4);
}

.mobilNav ul a span:first-child {  
    margin: 0 5px 0 0;
}

.mobilNav ul a span.contactg {  
    background-position: -220px top;
}

.mobilNav ul li.active a span.contactg {  
    background-position: -220px -20px;
}

.mobilNavFadeIn {
    transform: translate(0, calc(100vh + 200px));
    transition: all 1s ease;
}

.mobileNavActive .navbar-toggler-icon {
  /*   transform: rotate(90deg); */
    transition: all 1.5s ease;
}




.mobileNavActive .navbar-toggler-icon span:first-child {
    transform: translate(0, 9px) rotate(-45deg);
    transition: all 0.5s ease;
}

.mobileNavActive .navbar-toggler-icon span:first-child+span {
    transform: rotate(45deg);
    transition: all 0.5s ease;
}

.mobileNavActive .navbar-toggler-icon span:last-child {
    opacity: 0;
    transition: all 0.5s ease;
}








@media only screen  and (max-width: 1650px), screen and (max-height: 900px) {
    body.homepage header.mainheader .header-box, body.homepage .mainnav,.mainnav, body.homepage .metanav {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
    }

    body.homepage header.mainheader, header.mainheader {    
        min-height: 550px !important;
    }

    .herobild {
        background-attachment: scroll !important;
        background-position: 100px !important;
    }

    header.mainheader .header-box {
        background-color: transparent;
        background-image: none;
        padding: 0 !important;
        min-height: 300px; 
    }

 

    header.mainheader .header-box .h2{
        font-size: 1.8rem !important;
    }

    header.mainheader .header-box:after {
        content:"";
        display: none;
    }


    .mainnav {   
        padding:  5px 100px !important;
        border-bottom: solid 2px rgb(196, 200, 183) !important;
    }
    .mainnav > div{
        padding: 0 !important;
    }

    .mainnav a.navbar-brand {
    
    }

    body.homepage .mainnav > div > div{
        min-width: auto;
    }

    .mainnav > ul{
        padding: 5px 0 5px 10px;
    }  


    body.homepage .mainnav .nav-link{   
        flex-direction: row;   
        font-size: 1rem;
    }


    
}


@media only screen  and (max-width: 1550px) {
    header.mainheader {
        padding: 0 50px !important;
    }
    .herobild {
        background-position: -100px !important;
    }

    .metanav {
        padding:  0 50px !important;
    }

    .mainnav {   
        padding:  5px 50px !important;
    }
    
}


@media only screen  and (max-width: 1280px) {

    .mainnav > div,body.homepage .mainnav > div , header.mainheader .header-box{
    /*     background-color: rgba(255, 255, 255, 0.9); */
        margin: auto;
    } 
    
    header.mainheader .header-box {
        padding: 15px 0 !important;
    }

 

    header.mainheader .herobild {
        animation: fadeIn2 3.5s 1.1s forwards; 

    }
}

@media only screen  and (max-width: 950px) {
    body.homepage header.mainheader, header.mainheader {
        min-height: 500px !important;
    }

    header.mainheader .herobild {
        background-image: url(../../images/background/indizio-perlenkopf_800.jpg);
        background-size: cover;
    }



    .metanav {
        padding: 0 10px !important;
    }

    .metanav:after {
        content:"";
        width: 60px;
        height: 60px;
        position: absolute;
        bottom: -20px;
        left: 50%;
        margin-left: -30px;
        border-radius: 30px;
        background-color: rgb(196, 200, 183)
    }

    .metanav ul {
        padding-right: 15px;
    }

    .metanav ul li {
        background-color: transparent;
    }

    .metanav .nav-link {
        padding: 10px 0 5px 0;
    }

    .metanav span.icon-schmuck-20 {
        transform: scale(1.5) translate(0, -0.5px);        
    }

    .mainnav {
        padding: 0 !important;
        background-color: white;
        z-index: initial !important;
    }

    .mainnav .navbar-toogler {
        display: block;
    }

    .mainnav > div {
        flex-direction: column;
        justify-content: center !important;
        border-bottom: solid 1px rgb(196, 200, 183);
    }

    .navbar-brand {
        display: block;
        position: absolute;
        top: -35px;
        left: 25px;
        z-index: 99;
        background-color: white;
        border-radius: 10px 10px 0 0;
    }

    .mainnav a img{
        width: 90px;
        margin: 0 10px;
    }






    .mainnav > div > div {
        position: relative;
        display: flex;
        margin: auto;
        padding: 30px 0 10px 0 !important;
    }

    .mainnav ul {
        justify-content: flex-end !important;
        flex-direction: row;
        width: 100% !important;
        margin: 0 0 0 auto;
    }

    .mainnav ul li {
        margin: 0 5px;
    }

    .mainnav ul li a{
        justify-content: center;
       min-width: 46px;
    }
    
    .mainnav .nav-link span+span, .metanav .nav-link span+span {
        position: absolute;
        left: -100000px;
    }

    ul.mod-menu__sub {
        top: -600px !important;
    }
}

@media only screen  and (max-width: 700px) {
    header.mainheader {
        padding: 20px !important;
    }
 

      header.mainheader .header-box p.h1 {
        font-size: 2.2rem;
        line-height: 60px;
    }

    header.mainheader .header-box p.h2 {
        font-size: 1.2rem !important;
    }

    header.mainheader .header-box p.h4  {
        font-size: calc(1rem + .3vw);
    }
}


@media only screen  and (max-width: 360px) {

    .navbar-brand {
        top: -20px;
        left: 15px;
        width: 100px;
        height: 30px;
        background-image: url(../../../../images/logo/indizio-logo-klein.svg);
        background-size: 80px auto;
        background-repeat: no-repeat;
        background-position: center 10px;
    }

    .mainnav a img{
       display: none;
    }
}


@media only screen  and (display-mode: fullscreen)  {
    .herobild {
        background-position: -200px 0 !important;
    }
}





main {
    position: relative;
    padding-bottom: 50px;
    background-color: rgb(196, 200, 183);
}

main:before {
    content:"";
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: -30px;
    z-index: 99;
    height: 30px;
    background-color: rgba(196, 200, 183, 0.9);
    border-top: solid 2px rgb(196, 200, 183) !important;
}

main .page-header h1 {
    font-weight: bold;
}

main .card h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

main .text {
    padding: 10px;
    border: solid 1px rgb(89, 39, 4);
    max-width: 500px;
    margin: auto;
}

.homepage main .text {
  min-height: 300px;
}

.hut-kategorien main .text {
  min-height: 180px;
}


/* Produkt Kategoriebeschreibung */
main .produkte > section {
    margin: 80px 0 50px -20px;
    padding: 40px;
    background-color: #052e10;
    background-color: rgb(131, 134, 119);
    color: white;
    align-self: flex-start;
}

main .produkte > article {

}

main .produkte > article section{
    margin: 80px 20px 0 0;
    padding: 0 0 50px 0;
    border-bottom: solid 2px;
    /* background-color: red; */
}

main .produkte > article section:first-child{
    margin: 0 20px 0 0;
}

main .produkte > article section:last-child{
    border-bottom: none;
}

main .produkte > article section div.col-5{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* background-color: rgb(85, 0, 255); */
}

main .produkte > article section div.col-7{
    padding: 15px;
}



/* Produkte Beschreibung */
main .produkte article h2 {
    margin: 25px 0 25px 0;
    text-align: center;
}

main .produkte article div.page-header h3 a{
    color:rgb(89, 39, 4);
}


/* Produktbilder */
main .produkte figure.vorschauBilderProdukte, main .produkte figure.vorschauBilderProdukte img:first-child {
    position: relative;
    z-index: 99;
}

main .produkte figure.vorschauBilderProdukte img {
    position: absolute;
    top: 0;
    left: 0;
}

main .produkte figure.vorschauBilderProdukte + ul {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}
/* Produktbilder */


.produktFarbe {
    margin: 10px 0 20px 0;
}

.readmore {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.readmore a.btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.mod-articles-category-readmore {
flex-direction: row;
justify-content: flex-start;
}


main .produkte article section div ul + p {
    margin: 40px 0 0 0;
}


/* Artikel-Ansicht */
main .com-content-article > div:not(.page-header){
    padding: 20px;
    background-color: white;
}

.hauptbilder { 
    display: flex;
    gap: 10px;
}

.hauptbilder img{ 
    max-width: 400px;
}



.pagenavigation {
    margin: 50px 0 0 0;
}

.pagenavigation *{
    color: rgb(89, 39, 4);
}

.pagenavigation > ul{
    display: flex;
}

.pagenavigation > ul .previous{
    margin: 0 auto 0 0;
}


.pagenavigation > ul .next{
    margin: 0 0 0 auto;
}

.pagenavigation > ul a{
    display: flex;
    align-items: center;
}

.pagenavigation > ul a span:first-child {
    margin: 0 5px 0 0;
}







main .card figure {
    position: relative;
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: auto;
}

main .card figure > img + div {
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 0;
    margin: 20px;
}

main .card figure div > div {
    width: 100%;
    margin: 10px;
    border: solid 2px white;
}




main .produkte article {
    background-color: white;
}

main .produkte article figure img {
    max-width: 400px;
}

.card .btn, article .btn {
    display: block;
    margin: 50px 0 0 0;
}




body > footer {
    min-height: 200px;
    background-color: #424242;
}

body > footer li {
    margin: 10px 0 0 0;
}

body > footer a{
    display: block;
    padding: 5px 0 5px 0;
    color: white;
    text-decoration: none;
    text-align: right;
}


.homepage .categories-list .col-12:last-child {
    width: 100% !important;
}

.homepage .categories-list .col-12:last-child .card-body {
    display: flex;
    flex-wrap: wrap;
}

.homepage .categories-list .col-12:last-child .card-body h2 {
    width: 100%
}

.homepage .categories-list .col-12:last-child .card-body figure {
    max-width: 300px;
}

@media only screen  and (max-width: 1280px) {
    main .page-header h1 {
        font-weight: normal;
    }
 }

 @media only screen  and (max-width: 1200px) {
    main .produkte > section {
        margin: 80px 0 50px 0;
    }

    main .produkte > article section{
        margin: 80px 0 0 0;
    }



    .homepage .categories-list .col-12:last-child .card-body {
        display: initial;
        flex-wrap: initial;
    }





 }

@media only screen  and (max-width: 1100px) {
    .hauptbilder { 
        flex-direction: column;
    }
 }

 @media only screen  and (max-width: 700px) {
    .pagenavigation > ul a{
        flex-direction: column;
    }
 }





 .com-contact  {
    padding: 50px 20px 0 20px;
 }

 .com-contact legend {
     margin: 25px 0;
 }

 .field-spacer {
     margin: 25px 0;
 }

 .control-group {
     padding: 25px 0 0 0;
 }

 #cleantalk_footer_link {
     display: none;
 }

 div.cookiebuttons a#cookiehintsubmit, div.cookiebuttons a#cookiehintsubmitno {
     background-color: #424242 !important;
     color: white !important;
 }

.breadcrumbs + .page-header h1
{
  padding-top: 0 !important;
}