/* ubuntu-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/ubuntu-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ubuntu-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/ubuntu-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ubuntu-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/ubuntu-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	
	--primary-color: #426998;
	
	--sidepadding: 7vw;
	
	--bs-body-font-family:'Ubuntu';
	--bs-body-color:#202020;
	--bs-body-bg:#FDFAF4;
	--bs-body-font-size:24px;
	--bs-border-radius: 1.375rem;
	
}


body {
    background: url(/public/images/background.jpg);
    background-size: 100% auto;
}

body::before {
    content: '';
    display: none;
    position: absolute;
    height: 3000px;
    inset: 0;
    background: url(Gedenkseite.jpg);
    background-size: 1440px auto;
    background-position: center 0;
    z-index: 1200;
    background-repeat: no-repeat;
    opacity: 0.3;
}


header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: #706F6F;
    font-size: 16px;
    font-weight: 200;
    text-align: right;
	position:absolute;
	z-index: 1111;
	left: auto;
    right: calc(var(--sidepadding) + 2rem);
    top: 3.4rem;
    padding: 0;
	
a,a:hover {position:relative;text-decoration:none;}


a::after {
	content: '';
	position: absolute;
    right: -1.6rem;
    height: 100%;
	width: .5rem;
	background: #706F6F;
    border-radius: 5px;
    transition: height .5s, top .5s;
}
	
a:first-child::after {
    height: 130%;
    top: 0%;
}


a:hover::after,a.hover::after {
    height: .5rem !important;
    top: 0.5rem !important;
}

a:not(:first-child,:last-child)::after {
    height: 160%;
    top: -30%;
}
a:last-child::after {
    height: 130%;
    top: -30%;
}
	
}



#header {
    background: url(/public/images/header.jpg);
    background-size: cover;
    background-position: bottom;
	
	p {max-width:60rem;}
}

.px-5 {padding-left:var(--sidepadding)!important;padding-right:var(--sidepadding)!important;}


a {color:inherit;
	&:hover {
			text-decoration:underline;
			text-underline-offset: 4px;
		    text-decoration-thickness: 2px;
			};
}

h1,h2 {font-weight:700;font-size:58px;margin-bottom:1.5rem;}
h4 {font-size:inherit;font-weight:400;line-height:1.5;}

figure {margin:0;}

figcaption {
    font-size: 16px;
    text-align: center;
    margin-top: 6px;
}

.btn {
    --bs-btn-padding-x: 1.8rem;
    --bs-btn-padding-y: 0.95rem;
    --bs-btn-font-size: 18px;
	--bs-btn-border-radius: 2rem;
	img {margin-right: 6px;}
	&:hover {
		text-decoration:none;
		img {filter: invert(1) saturate(0) brightness(3);}
	}
}

.btn-primary {
	--bs-btn-color: var(--primary-color);
    --bs-btn-bg: white;
    --bs-btn-border-color: #707070;

	--bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: #707070;

	--bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: #707070;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
	



.form-control {
	background:#F9F9FB;
    font-size: inherit;
	color:#b9b9b9;
	border-radius:0;
}
.form-control:focus {
    color: black;
    background-color: white;
}

.form-control[type="search"] {
    padding-left: 3rem;
    background-image: url(/public/images/icon-search.svg?1);
    background-size: 1.3rem;
    background-repeat: no-repeat;
    background-position: .8rem center;
}

.logo {
    height: 10rem;
    width: 20rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    text-decoration: none;
	&:hover {text-decoration:none;}
}


main {
    transition: transform 0s .4s,opacity .5s;
	&.fadeOut {opacity:0;transform:scale(0.7);}
	&.fadeOut.fadeIn  {transition: transform .5s,opacity .5s;
		transform: scale(1)!important;
		opacity: 1!important;
	}
}




.grid-2 {
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:6vw;
}
.grid-3 {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:6vw;
}
.grid-4 {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap:6vw;
}

.imgpreview img, .grid-4 img {
    width: 100%;
}


.imgpreview {
	display:none;
	position:relative;
	margin:.5rem 0 0;
	button {position:absolute;top: 0.6rem;right: 0.7rem;padding:0;color:white;line-height: 0;}
	input {margin-top: .5rem;}
	img {border-radius: var(--bs-border-radius);}
}

.files label {
	box-shadow:0 0 1rem -.5rem;
	padding:0.5rem;
}


.show-I .d-flex > *:nth-child(n+4) {display:none;}
.show-II .d-flex > *:nth-child(n+7) {display:none;}
.show-III .d-flex > *:nth-child(n+10) {display:none;}
.show-III .d-flex > *:nth-child(n+13) {display:none;}
.show-IIII .d-flex > *:nth-child(n+16) {display:none;}
.show-IIIII .d-flex > *:nth-child(n+19) {display:none;}
.show-IIIIII .d-flex > *:nth-child(n+22) {display:none;}
.show-IIIIIII .d-flex > *:nth-child(n+25) {display:none;}
.show-IIIIIIII .d-flex > *:nth-child(n+28) {display:none;}
.show-IIIIIIIII .d-flex > *:nth-child(n+31) {display:none;}




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


.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: -1;
        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:24px;
	font-weight:400;
    position: absolute;
    bottom: -8.5rem;
    text-align: center;
    width: 100%;
}

	& * {
	    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.Blätter {
	
	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 {

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

}

.buch.Floral-Dunkelgrün {

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

}

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



.buchdetail {

	.foto {
		aspect-ratio: .73;
		object-fit: cover;
	}

.kommentare div h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;

	&+p {
    	font-size: 14px;
    	color: #6D7278;
		font-weight:200;
	}
	}

}











.galerie {
	
	display: grid;
    grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #707070;
    width: fit-content;
	
	h3,h4,h5,strong {
		font-size:inherit;
		font-weight:bold;
    grid-column: span 2;
    text-align: center;
}
	
	
	img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
		max-width:12rem;
    height: auto;
    object-position: center;
		box-shadow:0 .5rem .6rem -.4rem rgba(0,0,0,0.3);
}
}



.toast {
    --bs-toast-padding-x: 1.75rem;
    --bs-toast-max-width: 50vw;
    --bs-toast-font-size: 1.5rem;
}


.carousel-control-next, .carousel-control-prev {
    color: #fff;
    opacity: 1;
    left: 2rem;
}
.carousel-control-next {
	right:2rem;
	left:auto;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 3rem;
    height: 3rem;
	    filter: drop-shadow(0px 0px 8px white);
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
}



#kerzenmeer {
	position: relative;
	overflow:hidden;
	background: url(/public/images/bg.jpg);
	min-height: 30rem;
	height: 100vh;
	background-size: cover;
	
	h2 {
		font-size:40px;
    position: absolute;
    color: white;
    z-index: 111;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
}
	p {
    position: absolute;
    z-index: 11;
    left: 50%;
    max-width: 51rem;
    top: 23%;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    font-weight: 200;
    width: 80%;
}
	
	
	button {
	    position: absolute;
	    bottom: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}
	.btn-primary {
	    --bs-btn-color: #112233;
	    --bs-btn-bg: white;
	    --bs-btn-border-color: white;
	}
	
	.space {
		position:relative;
		height:185vh;
		transform: translateY(-85vh);
		width:100%;
		top:0;left:0;
		perspective: 50px;
		overflow:hidden;
		transform-style: preserve-3d;
		perspective-origin: 50% -100%;
		mix-blend-mode: screen;
		}
	.space > * {
		position: absolute;
		background: url(/public/images/stern.png?134567);
		height: 6rem;
		width: 6rem;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		mix-blend-mode: screen;

		--age: 1;
		transform: translate(-50%,-50%) scale(calc(1 - 1 * (var(--age) / 90))) translateZ(calc(max(0rem,(-1 * (var(--age) * var(--age)) / 90 + 7) * 0.1rem)));
		opacity: calc(1 - (var(--age) / 90));
		transition:transform .1s linear,opacity .5s;

		&::after {
			content:'';
			background-image:url(/public/images/kerze.png);
			background-size:contain;
			background-repeat:no-repeat;
			position:absolute;
			width: 17rem;
            height: 25rem;
            top: 0%;
            left: 50%;
            transform: translate(-9%, 0.5rem);
            mix-blend-mode: screen;
            opacity: calc(1.6 - var(--age));
        }

		&.blink {opacity:.5!important;}
		}
}


@media (max-width: 991px) {
	
	.grid-4,.grid-3 {
		
		grid-template-columns: 1fr 1fr;
		
	}
	
	
}


@media (max-width: 578px) {
	
	.grid-4,.grid-3,.grid-2 {
		
		grid-template-columns: 1fr;
		
	}
	
	
}