.buch {
	aspect-ratio:.707;
	position:relative;
	width:16rem;
	perspective: 1000px;
	transition:transform 1s cubic-bezier(0.57, -0.01, 0.3, 0.98), filter 1s cubic-bezier(0.57, -0.01, 0.3, 0.98);
	--primary-color:#eed;
	margin-bottom: 10rem;
	
	&::after {
        content: '';
        position: absolute;
        bottom: -1rem;
        width: 100%;
        height: 1rem;
        background: black;
        z-index: -2;
        filter: blur(10px);
        border-radius: 50%;
        opacity: .4;
        transform: rotate(6deg);
    }
	
	.cover {
		background-image: linear-gradient(0deg, rgba(0,0,0,0.2),transparent);
		background-color:var(--primary-color);
		height: 100%;
		transform: rotate3d(0, 1, 0, 331deg);
		transform-origin: 0 50%;
		border-radius: 4px;
	    text-align: center;
		transform-style: preserve-3d;
		transition:transform .5s cubic-bezier(0.42, 0, 0.08, 1.02), background-color .5s cubic-bezier(0.42, 0, 0.08, 1.02);
		padding: 1rem;
	}
	
	&:hover .cover {
	transform: rotate3d(0, 1, 0, 311deg);
	background-color: color-mix(in srgb, white 30%, var(--primary-color));
	&::after {width:6px;}
	}
	&:hover .back {
	transform: translate3d(20px, 0, -2.5rem) rotate3d(0, 1, 0, 328deg);
	}
	
	&.focus {
	    transform: scale(6.5);
		z-index:1;
		filter: blur(6px);
		
		.cover {
			transform: rotate3d(0, 1, 0, 278deg)!important;
			&::after {width: 4px!important;}
		}
		.back {
			transform: translate3d(2px, 0, -2.5rem) rotate3d(0, 1, 0, 360deg)!important;
		}
		
	}
	
	
	
	.back {
	    transform-style: preserve-3d;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    transform: translate3d(20px, 0, -2.5rem) rotate3d(0, 1, 0, 331deg);
		transition:transform .5s cubic-bezier(0.42, 0, 0.08, 1.02);
	    z-index: -1;
	    transform-origin: 0;
	    border-radius: 4px;
	    background-color: var(--primary-color);
		background-image: url(/public/images/buchinnenschatten.png);
		background-size: 100%;
	}
	
	
	.back,.cover {
		&::after {
            content: '';
            position: absolute;
            right: 0;
            width: 10px;
			transition:width 0.5s cubic-bezier(0.42, 0, 0.08, 1.02);
            height: calc(100% - 1.5px);
            background: color-mix(in srgb, black 20%, var(--primary-color));
            top: 1px;
            z-index: -1;
            transform-origin: 0 0;
            transform: translateX(83%) rotate3d(0, 1, 0, 95deg);
            border-radius: 0 3px 3px 0;
		}
	}
	
	.seiten {
	    position: absolute;
		background-image: url(/public/images/seiten.jpg);
        background-size: 330% 102%;
	    right: 0.5rem;
	    height: calc(100% - 1.2rem);
	    top: .6rem;
	    width: 2.5rem;
	    transform: translate3D(0, 0, 2.5rem) rotate3d(0, 1, 0, -90deg);
	    transform-origin: 100% 0;
	    z-index: 1;
	    transform-style: preserve-3d;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		border-top: 1px solid rgba(255,255,255, 0.7);
		
		&::after {
    		content: '';
    	background: linear-gradient(0deg, #eee, white);
    	position: absolute;
    	width: 550%;
		height: calc(100% + 2px);
		transform: translate3d(2.5rem, 0rem, 0) rotate3d(0, 1, 0, 270deg);
		transform-origin: 0%;
		left: 0;
		top: -1px;
		}
	}
	
	.design {
        position: absolute;
        inset: 0;
        background-size: cover;
        border-radius: 5px;
    }
	
	img.foto {width:90%;height:auto;aspect-ratio:1.2;object-fit:cover;}
	
	a {
		color:transparent;
		position:absolute;
		height:100%;
		width:100%;
		top:0;left:0;
		z-index:1;
	}
	
h3 {
        position: absolute;
        bottom: -9rem;
        width: 100%;
        text-align: center;
        left: 0;
        font-size: 16px;
	font-weight:200;
    }
h2 {
		font-size: 22px;
        font-weight: 400;
        position: absolute;
        bottom: -8.1rem;
        text-align: center;
        width: 100%;
        white-space: nowrap;
}

	& * {
	    color: inherit;
	}
	
	
}



/*************************************/


.buch.Sterne {
	.cover {
		background:url("/public/images/buch/no-photo-stars.jpg");
		background-size:cover;
	}
	img {display:none;}
}

.buch.Nebel {
	.cover {
		background:url("/public/images/buch/no-photo-fog.jpg");
		background-size:cover;
	}
	img {display:none;}
}

.buch.Blume {
	.cover {
		background:url("/public/images/buch/no-photo-flower.jpg");
		background-size:cover;
	}
	img {display:none;}
}

.buch.Pfad {
	.cover {
		background:url("/public/images/buch/no-photo-path.jpg");
		background-size:cover;
	}
	img {display:none;}
}
.buch.Blumen {
	.cover {padding:1px 0 0 1px;}
	.design {
		position:absolute;
		inset:0;
		background:url("/public/images/buch/floral-collage.png");
		background-size:cover;
	}
    img.foto {
        height: 88.7%;
        margin: 16% 0 0 auto;
        display: block;
        width: auto;
        aspect-ratio: 0.63;
        border-radius: 0 0 5px 0;
    }
}


.buchdetail.Blumen {
    background-image: url("/public/images/Blumen.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 20%;
}
.buchdetail.Floral-Dunkelgrün {
    background: url(/public/images/Floral.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 25%;
}


.buch.Herbstlaub {
	
	img.foto {
        width: 86%;
        height: auto;
        aspect-ratio: .6;
        object-fit: cover;
    }
	
	.design {
    background: url(/public/images/buch/photo-leaves.png);
    background-size: 100%;
}
}

.buch.Minimal-Grau,.buch.Minimal-Weiss {

	.design {
    background-image: url(/public/images/buch/photo-minimal-grey.png);
}
img.foto {
    width: 88%;
    aspect-ratio: .78;
    margin-top: 16%;
}

}

.buch.Minimal-Weiss .design {background-image: url(/public/images/buch/photo-minimal-white.png);}

.buch.Floral-Dunkelgrün, .buch.Floral-Rot {

	.design {
    background-image: url(/public/images/buch/photo-green-floral.png);
}
img.foto {
	width: 90%;
    aspect-ratio: .71;
    margin-top: 10%;
}

}

.buch.Floral-Rot .design {background-image: url(/public/images/buch/photo-red-floral.png);}


.buch.Stein {

	.design {
    background-image: url(/public/images/buch/photo-stone.png);
}
img.foto {
	width: 93%;
	aspect-ratio: .78;
	margin-top: 14%;
    }

}

.buch.Holz {

	.design {
    background-image: url(/public/images/buch/photo-wooden.png);
}
img.foto {
        width: 82%;
        aspect-ratio: .64;
        margin-top: 9%;
    }

}

.buch.Kinderhimmel {

	.design {
    background-image: url(/public/images/buch/photo-sky-kids.png);
}
img.foto {
width: 97%;
        aspect-ratio: .72;
        margin-top: 6%;
    }

}
.buch.Weltraumnebel {

	.design {
    background-image: url(/public/images/buch/photo-nebula.png);
}
img.foto {
	width: 89%;
	aspect-ratio: .65;
	margin-top: 5%;
    }

}

.buch.Dunkle-Blumen {

	.design {
    background-image: url(/public/images/buch/photo-black-flowers.png);
}
img.foto {
	width: 94%;
        aspect-ratio: .75;
        margin-top: 11%;
    }

}