:root {
	--animation-step: .7071s;
	--animation-cross-left-initial-value-01: translateX(0%) scaleX(1) scaleY(1);
	--animation-cross-left-initial-value-02: translateX(-100%) scaleX(1) scaleY(1);
	--animation-cross-right-initial-value-01: translateX(0%) scaleX(-1) scaleY(1);
	--animation-cross-right-initial-value-02: translateX(100%) scaleX(-1) scaleY(1);
	--animation-timing: cubic-bezier(.29,.1,.29,1);
}

html {
	height:100%; 
	max-height:100%;
	width:100%;
	max-width:100%;
	padding:0; 
	margin:0;
	border:0; 
	font-size:76%; 
	font-family:georgia, palatino linotype, times new roman, serif;
	overflow:hidden;
	}

body {
	height:100%; 
	max-height:100%;
	width:100%;
	max-width:100%;
	overflow:hidden; 
	padding:0; 
	margin:0; 
	border:0;
	position: relative;
}

#content {
	position:relative;
	overflow:visible;
	top:0; /*calc(29.29%);*/
    bottom:0; /*calc(29.29%);*/
	display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
	height:100%;
	width:100%;
	border-top:none; 
	border-bottom:none;
}




.bg-wrapper { 
	width:100%;
	max-width:100%;
	height:50%;
	max-height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
@media(orientation: portrait) {
	.bg-wrapper { 
		height: 25%; 
	} 
}
.bg {
	display:none;
	background-size:100% 100%;	
	height:100%;
    width:100%;
}
.cross {
	position:relative;
	height:100%;
	width:100%;
	display:flex;
    justify-content:center;
    margin-left: -100%;
	z-index: 2;
}
.cross .half {
	background-size: 100% 100%;	
	height: 100%;
	aspect-ratio: 4/16;
	animation-name: cross-left-initial;
	animation-timing-function: var(--animation-timing); 
	animation-iteration-count: 1;
	animation-duration:	calc(var(--animation-step) * 3); /* smooth neutral */
	animation-delay: 	calc(var(--animation-step) * 2); /* smooth neutral */
	animation-duration:	calc(var(--animation-step) * 2); /* anspringen */
	animation-delay: 	calc(var(--animation-step) * 0); /* anspringen */
}
.cross .half.left { 
	animation-name: cross-left-initial;
}
.cross .half.right { 
	animation-name: cross-right-initial;
}
@keyframes cross-left-initial {
	0%  { transform: var(--animation-cross-left-initial-value-01) } 
	/* 2x = 0% - 50% - Bewegung auseinander */
	50% { transform: var(--animation-cross-left-initial-value-02) } 
	/* 1x = 25% - 75% - Bewegung zurück doppelt so schnell */
	75% { transform: var(--animation-cross-left-initial-value-01) }
	/* 1x = 25% - 75% - Pause */
	100%  { transform: var(--animation-cross-left-initial-value-01) }
}
@keyframes cross-right-initial {
	0%  { transform: var(--animation-cross-right-initial-value-01) }
	50% { transform: var(--animation-cross-right-initial-value-02) }
	75% { transform: var(--animation-cross-right-initial-value-01) }
	100%  { transform: var(--animation-cross-right-initial-value-01) }
}
/*
.cross:hover .half.left {
	animation:cross-left-hover 2.25s var(--animation-timing) 1;
}
.cross:hover .half.right { 
	animation:cross-right-hover 2.25s var(--animation-timing) 1;
}
@keyframes cross-left-hover {
	0% { transform:translateX(0) scaleX(1) scaleY(1); }
	25% { transform:translateX(-100%) scaleX(1) scaleY(1); }
	37.5% { transform:translateX(-100%) scaleX(1) scaleY(1); }
	50% { transform:translateX(0%) scaleX(1) scaleY(1); }
}
@keyframes cross-right-hover {
	0% { transform:translateX(0%) scaleX(-1) scaleY(1); }
	25% { transform:translateX(100%) scaleX(-1) scaleY(1); }
	37.5% { transform:translateX(100%) scaleX(-1) scaleY(1); }
	50% { transform:translateX(0%) scaleX(-1) scaleY(1); }
}
*/
.logo {
	position: relative;
	height: 100%;
	width: 100%;
	display: flex;
    justify-content: center;
	align-items: end;
	z-index: 1; /* not -1 anymore */
}
/*
@media (min-width:769px) { .logo { display:flex; } }
*/
.logo .half {
	background-size: 100% 100%;	
	height: calc(100% * 21/16);
	opacity: 0;
	aspect-ratio: 11.5/21;
	animation: fade-in 1s 1s forwards, fade-hold-in 1s 2s forwards, fade-out 1s 3s forwards;
}
/*
.logo .half.left { 
	animation-name: logo-after-animation;
}
.logo .half.right { 
	animation-name: logo-after-animation;
}
*/
@keyframes logo-after-animation {
	0% { opacity:0; } /* https://cubic-bezier.com/#.25,.1,.25,1 */
	/* 0.1% { opacity:0; } */ /* 37.5ms -> Unnatürliches, nicht existintes Erscheinen "so kurz wie nur irgendwie möglich" */
	/* 1.25% { opacity:0; } */ /* 37.5ms -> Zackig unnatürlich schockierendes Erscheinen */
	/*2.5% { opacity:1; } */ /* ((75ms)) -> Plötzliches Natürliches Erscheinen  aber etwas chnell im vergleich zum kreuz schließen!!!!!!!!!!2.5% von 3 Sec */ 
	/*5% { opacity:1; }*/ /* ((75ms)) -> Plötzliches Natürliches Erscheinen !!!!!!!!!!2.5% von 3 Sec */ 
	12.5% { opacity:1; }
	/* 25% { opacity:1; } */ /* langsames ausfades es rieselt schon wieder weg, wie ein Sand objekts */
	/* 50% { opacity:0.5; } */ /* etwas zu schnell wieder weggenommen */
	/* 75% { opacity:0; } */ /* erschaffens moment vs. BEgreifensmoment */
	100% { opacity:0; } /* 2.625s -> sehr langer fade out direkt nach dem plötzlichen erscheinen */

/* PIXEL Akkord Relation Haas Effekt 

	wie bei logo die richtungen die miteinanderkommunizieren und gleiche aussage treffen 

	Spalt Tonleiter, Tritonus

*/
}

@keyframes fade-in {
	from { 
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade-hold-in {
	from {
		opacity: 1;
	}
	to {
		opacity: 1;
	}
}
@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes fade-hold-out {
	from {
		opacity: 0;
	}
	to {
		opacity: 0;
	}
}


@media (prefers-color-scheme: dark) { 	
	body { background-color: black; color: white; }
	/*.bg { background-image:url(../.images/spalt-cross-white.svg); }*/ 
	.cross .half.left { background-image: url(.images/spalt-cross-white-half.svg); }
	.cross .half.right { background-image: url(.images/spalt-cross-white-half.svg); transform:scaleX(-1); }
	.logo .half.left { background-image: url(.images/spalt-logo-left-white.svg); }
	.logo .half.right { background-image: url(.images/spalt-logo-right-white.svg); } 

}
@media (prefers-color-scheme: light) { 
	body { background-color: white; color: black; }
	/*.bg { background-image:url(../.images/spalt-cross-black.svg); }*/
	.cross .half.left { background-image: url(.images/spalt-cross-black-half.svg); }
	.cross .half.right { background-image: url(.images/spalt-cross-black-half.svg); transform:scaleX(-1); }
	.logo .half.left { background-image: url(.images/spalt-logo-left-black.svg);	}
	.logo .half.right { background-image: url(.images/spalt-logo-right-black.svg); } 
}



:root { --spalt: 18px; --step-up: 1.4142; --step-down: 0.7071}
body.ritus { font-size: var(--spalt); font-family: monospace; }
.ritus .bg-wrapper { height: calc(16 * var(--spalt) / 2); }
.ritus .panel { padding: var(--spalt) ; margin: 0 auto; width: 50%; height: fit-content; gap: calc(var(--spalt) * var(--step-down) * var(--step-down)); display: flex; flex-direction: column; }
.ritus h1, .ritus h2, .ritus h3, .ritus h4, .ritus h5, .ritus h6 { font-weight: normal; margin-block-start: 0; margin-block-end: 0; }
.ritus .p0 { font-size: calc(var(--spalt) * var(--step-up) * var(--step-up)); line-height: calc(var(--spalt) * var(--step-up) * var(--step-up) * var(--step-up)); }
.ritus .p1 { font-size: calc(var(--spalt) * var(--step-up)); line-height: calc(var(--spalt) * var(--step-up) * var(--step-up)); }
.ritus .p2 { font-size: var(--spalt); line-height: calc(var(--spalt) * var(--step-up)); font-weight: normal; margin-block-start: 0; margin-block-end: 0; }
.ritus .p3 { font-size: calc(var(--spalt) * var(--step-down)); line-height: calc(var(--spalt)); }
.ritus .p4 { font-size: calc(var(--spalt) * var(--step-down) * var(--step-down)); line-height: calc(var(--spalt) * var(--step-down)); }
.ritus .p5 { font-size: calc(var(--spalt) * var(--step-down) * var(--step-down) * var(--step-down)); line-height: calc(var(--spalt) * var(--step-down) * var(--step-down)); }
.ritus .logo { display: none; }
.ritus .cross { margin-left: calc(-50% - (var(--spalt) / 2)); margin-left: -50%; }
.ritus .pixelchecker { width: calc(var(--spalt) / 2); height: calc(var(--spalt) / 2); display: none; }