@import './fonts.css'; 
@import './typography.css';
@import './reset.css'; 



:root {
	--color-white: #fff; 
}


body {
	display: grid; 
	grid-template-rows: 1fr auto;
	height: 100%;
	min-height: 100svh;

	margin: 0;


}


body.home {
	color: var(--color-white);

	.background-image {
		width: 100%;
		height: 100%;
		position: absolute;
		inset: 0;

		background-color: #999;


		z-index: 0;
			img {
				width: 100%;
				height: 100%;
				position: absolute;
				inset: 0;
				
				object-fit: cover;		
				object-position: center;
			}

		&::after {
			content: '';
			position: absolute;
			inset: 0;

			background-color: #000;
			opacity: 0.1;
			z-index: 0;
		}
	}

	
}

body {

	padding: 2em 0.5em;
	hyphens: auto;
	&.imprint, &.data-policy {
	

		.logo {
			display: flex;
			justify-content: center;
		}

		footer {
			margin-top: 3em
		}

	}

}




.home-main {
	display: flex;
	justify-content: center;
	align-items: center;

	flex-direction: column;

	z-index: 1;

	.text {
		margin-top: 1em;
		text-align: center;
		text-shadow: 0px 0px 10px rgba(0, 0, 0, .5);

		h1 {
			margin-top: 0;
		}

		> * + * {
			margin-top: 0.5em;
		}
	}
}

.btn {
	background-color: #56217a;
	padding: 0.5em 1em;
	display: inline-block;
	margin-top: 1em;

	color: var(--color-white);
	text-decoration: none;
}

.container {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}


footer {
	align-self: flex-end;

	z-index: 1;
	.footer-inner {
		display: flex;
		justify-content: center;


		span {
			padding: 0 0.5em;
		}
	}
}



.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}