/* 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 {
	
	--sidepadding: 10vw;
	
	--bs-body-font-family:'Ubuntu';
	--bs-body-color:#666;
	--bs-body-font-size:1.2rem;
	--bs-border-radius: 1.375rem;
	
}

.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;}

.btn {
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-font-size: 1.3rem;
}

.form-control {
    font-size: inherit;
	border-radius:0;
}


.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;}
}

header {text-align:right;padding:1rem;}
header a {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:.75;
	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;
	
	&::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    width: 100%;
    height: 1rem;
    background: black;
    z-index: -1;
    filter: blur(10px);
    border-radius: 50%;
    opacity: .7;
}
	
	.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;
		}
	}
	
	
	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: 0;
	    width: 100%;
	    text-align: center;
	    left: 0;
	    font-size: 1rem;
	}
	h2 {
		font-size: 1.4rem;
		        font-weight: 300;
		
	}

	& * {
	    color: inherit;
	}
	
	
}


.Linien {
	--primary-color:Teal;
	color:white;
}

.Bogen {
    --primary-color: darkred;
    color: #ffeeee;
}


.SchwarzesBand {
	color: white;
	
	img.foto {
	    aspect-ratio: 0.75;
	    position: absolute;
	    top: 0;
	    left: 0;
	    z-index: -1;
	    box-shadow: none;
	    width: 100%;
	    border-radius: 4px;
	}
	
	h3 {
	}
	h2 {
	    text-shadow: 0 1px 6px BLACK;
	    position: absolute;
	    width: 100%;
	    left: 0;
	    top: 0;
	    overflow: hidden;
	    height: 100%;
	    padding: 1rem;
		&::before {
	    content: '';
	    background: black;
	    position: absolute;
	    height: 2rem;
	    width: 100%;
	    transform: rotate(-45deg);
	    bottom: 0rem;
		right: -25%;
	}
}
}



.galerie {
	
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
	
	img {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100%;
    height: auto;
    object-position: center;
}
}





#kerzenmeer {
	position: relative;
	overflow:hidden;
	background: url(/public/images/bg.jpg);
	min-height: 30rem;
	height: 100vh;
	background-size: cover;
	
	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.jpg);
		height: 12rem;
		width: 12rem;
		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.jpg);
			background-size:contain;
			background-repeat:no-repeat;
			position:absolute;
			width:12rem;height:16rem;
			top:0%;left:50%;
			transform: translate(-46%, -1.5rem);
			mix-blend-mode: screen;
			opacity:calc(3 - 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;
		
	}
	
	
}