html body{
	margin: 0;
	padding: 0;
	background-color: #000;
	font-family: "Cormorant Garamond", serif;
	  font-weight: 600;
	  font-style: normal;
}
.ad_loadframe{
	position: fixed;
	z-index: 100000;
	width: 100%;
	height: 100svh;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	perspective: 1000px;
	background-color: black;
}
.logo{
    transform-style: preserve-3d; 
	width: 200px; /* Größe des Bildes */
    animation: spin3d 4s infinite linear; /* Animation anwenden */
    image-rendering: auto;
    will-change: transform;
    transform: rotateY(0deg);
    filter: blur(0.3px);
    opacity: 1;
}
@keyframes spin3d {
    0% {transform: rotateY(0deg);}
    50%{transform: rotateY(180deg) scaleX(-1);}
    100%{transform: rotateY(360deg);}
}
.ad_mainframe{
	position: relative;
	widows: 100%;
	height: 100svh;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	overflow: hidden;
}
.videobg{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* Hinter den Inhalten anzeigen */
    object-fit: cover; /* Schneidet das Video passend zu */
}
.logobox{
	position: absolute;
	top: 0;
	left: 5%;
	background-color: #000;
}
.logotopsite{
	width: 10rem;
}
.ad_midbox{
	width: 100%;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 3rem;
}
.midboxtop{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	gap: 1.2rem;
	opacity: 0;
}
.topname{
	text-transform: uppercase;
	font-size: 1.6rem;
	color: white;
	letter-spacing: 5px;
	margin: 0;
}
.stylestripe{
	width: 4rem;
	border-bottom: 1px solid #aaa;
}
.midboxmid{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
}
.headertext{
	font-weight: 500;
	text-transform: uppercase;
	font-size: 3.5rem;
	color: white;
	letter-spacing: 5px;
	margin: 0;
}
.headerunderliner{
	font-weight: 500;
	text-transform: uppercase;
	font-size: 2rem;
	color: white;
	letter-spacing: 5px;
	margin: 0;
}
.midboxbot{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	opacity: 0;
}
@keyframes bottopfade{
	0%{transform: translateY(100px); opacity: 0}
	100%{transform: translateY(0px); opacity: 1}
}
.ad_button{
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	flex-direction: column;
	padding: .6rem;
	border: 1px solid white;
	color: white;
	font-size: 1.2rem;
	transition: .6s all linear;
}
.ad_button:hover{
	cursor: pointer;
	color: black;
	box-shadow: inset 300px 0px white;
}

@media only screen and (max-width: 1100px) {
	.topname{
		font-size: 1.4rem;
	}
	.headertext{
		font-size: 3rem;
	}
	.headerunderliner{
		font-size: 1.8rem;
	}
	.ad_button{

	}
}
@media only screen and (max-width: 1000px) {
	.topname{
		font-size: 1.4rem;
	}
	.headertext{
		font-size: 2.5rem;
	}
	.headerunderliner{
		font-size: 1.4rem;
	}
	.ad_button{

	}
}
@media only screen and (max-width: 850px) {
	.topname{
		font-size: 1.2rem;
	}
	.headertext{
		font-size: 2rem;
	}
	.headerunderliner{
		font-size: 1.4rem;
	}
	.ad_button{
		font-size: 1rem;
	}
}
@media only screen and (max-width: 650px) {
	.topname{
		font-size: 1rem;
	}
	.headertext{
		font-size: 1.8rem;
	}
	.headerunderliner{
		font-size: 1.2rem;
	}
	.ad_button{
		font-size: .8rem;
	}
	.logotopsite{
		width: 7rem;
	}
}
@media only screen and (max-width: 600px) {
	.topname{
		font-size: .8rem;
	}
	.headertext{
		font-size: 1.5rem;
	}
	.headerunderliner{
		font-size: 1rem;
	}
	.ad_button{

	}
}
@media only screen and (max-width: 550px) {
	.topname{
		font-size: 1rem;
		letter-spacing: 2px;
	}
	.headertext{
		font-size: 1.2rem;
		letter-spacing: 2px;
	}
	.headerunderliner{
		letter-spacing: 2px;
		font-size: 1rem;
	}
	.ad_button{

	}
}
@media only screen and (max-width: 400px) {
	.topname{
		font-size: .8rem;
		letter-spacing: 2px;
	}
	.headertext{
		font-size: 1rem;
		letter-spacing: 2px;
	}
	.headerunderliner{
		letter-spacing: 2px;
		font-size: .8rem;
	}
	.ad_button{

	}
}
@media screen and (orientation: landscape) and (max-width: 1000px) {
	.logotopsite{
		width: 5rem;
	}
}