/****************** HOME ********************/
html.home,
html.image{

    & .bg{
        background:var(--highlightColor);
    }

    & *{
        color:var(--mainColor);
    }

    & .logo{
        & path, rect{
            fill:var(--mainColor);
        }
    }

}

html.home body{
    .bg{
        &::before{
            content:'';
            background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1280 1080' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)' opacity='1'/><defs><linearGradient id='grad' gradientUnits='userSpaceOnUse' x1='-10' x2='10' y1='0' y2='0' gradientTransform='matrix(3.9189e-15 54 -64 3.3065e-15 640 540)'><stop stop-color='rgba(0,0,0,0.66)' offset='0'/><stop stop-color='rgba(0,0,0,0)' offset='0.65385'/><stop stop-color='rgba(0,0,0,0.7)' offset='1'/></linearGradient></defs></svg>");
            mix-blend-mode: multiply;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity:var(--bgOpacity);
        }
    }
}

.person{
	touch-action: none;
    position: absolute;
    bottom:0;
    left:-1.5rem;
    width:auto;
    cursor:grab;
	height: 40rem;
}

/****************** GALLERY ********************/

/* 

scrollbar-width: none;
-ms-overflow-style: none; 
scroll-snap-type: x mandatory;
scroll-padding-left:4.85rem;
overflow-x: scroll;
overflow-y:visible;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
scroll-behavior: smooth;

&::-webkit-scrollbar {
	display: none;
}	

*/

section.gallery,
section.gallery .ghostSlides {
  overscroll-behavior: contain;
  touch-action: pan-y;
}

section.gallery {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: none;               /* verhindert native Pointer-Gesten */
	overscroll-behavior: contain;     /* hält Safari-History-Swipe & Bounce ab */
	overscroll-behavior-x: contain;
	overscroll-behavior-y: contain;
	user-select: none;
	a,
	img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
		touch-action: none;
		touch-action: none;               /* verhindert native Pointer-Gesten */
		overscroll-behavior: contain;     /* hält Safari-History-Swipe & Bounce ab */
		overscroll-behavior-x: contain;
		overscroll-behavior-y: contain;
		user-select: none;
	}
	touch-action: none;
	overflow: hidden;
	cursor: grab;               /* show “grab” cursor by default */

    padding:0rem 4.85rem;

	position: relative;

	div.slides,
	div.ghostSlides
	{
		&.ghostSlides{
			position: absolute;
			top: 0;
			opacity: 0;
		}
		position: relative;
		display:flex;
		gap: 4rem;
		flex-wrap: nowrap;

		div.sliderItem{
			/* scroll-snap-align: start; */
			display: flex;
			flex-wrap: nowrap;
			gap: .4rem;

			&.textOnly{
				display: flex;
				flex-direction: column;
				align-content: center;
				justify-content: center;
				height: 10rem;
				white-space: nowrap;

				& h1{
					margin-bottom: 0;
				}
			}
			& img{
				display: block;
				box-shadow: rgba(0, 0, 0, 0.34) 0px 4px 6.2px 0px;
				border-radius: 2px;
			}

			& div.content{
				display: flex;
				flex-direction: column;
				position: relative;
				/* transition: ease-in-out transform .2s; */

				&:hover{
					/* transform:scale(1.05);  ?? Z index problem*/
				}

				& div.image{
					display:flex;
					justify-content: end;
					flex-direction: column;
					position: relative;
					a{
						display: block;
						height: 100%;
					}
					a.above {
						position: absolute;
						outline: 1px dashed yellow;
						z-index: 1001;
						top:1px;
						right: 0;
						bottom:10px;
						left:0;
					}

				}

				& div.text{
					display:flex;

					& .sold{
						border-radius: 50%;
						background-color:#f4394a;
						width:1rem;
						height:1rem;
						box-shadow: rgba(0, 0, 0, 0.34) 0px 4px 6.2px 0px;
						margin-left: auto;
						margin-top: .5rem;
					}
				}
			}
		}


    }
}


/****************** PRODUCTS STYLE ********************/
section.image{
	div,a {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		img {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			box-shadow: rgba(0, 0, 0, 0.25) 0 4px 4px 0px;
			border-radius: 4px;
		}
	}



    p.sold{
        color: #f4394a;
    }
}


/****************** ABOUT ********************/
section.about,
div.scrollContent,
section.textOnly{
    padding: 0 1rem 2rem 1.5rem;

    & p, a{
        font-weight: 400;
    }
}