/* --- QUADRIDENT --- HOME.CSS --------------------------------------------------------------------------------------------- */


/*     Stylesheet of the QUADRIDENT HOME page                                                                                */


/* --- PAGE MAIN ELEMENTS -------------------------------------------------------------------------------------------------- */


header , main , footer
{
	left				: 64px									;
	position			: absolute								;
	width				: calc(100dvw - 128px)					;
}

main
{
	border-bottom		: 2px var(--qd-norm-line-a015) solid	; 
	border-top			: 2px var(--qd-norm-line-a015) solid	;
}

footer
{
	display				: flex									;
}

@media (max-aspect-ratio: 15/16)
{
	header
	{
		height			: 136px									;
		top				: 64px									;
	}

	main
	{
		height			: calc(100dvh - 344px)					;
		top				: 200px									;
	}

	footer
	{
		bottom			: 64px									;
		flex-direction	: column								;
		height			: 80px									;
		justify-content	: space-between							;
		padding-top		: 24px									;
	}
}

@media ((min-aspect-ratio: 15/16) and (max-aspect-ratio: 20/16))
{
	header
	{
		height			: 96px									;
		top				: 64px									;
	}

	main
	{
		height			: calc(100dvh - 264px)					;
		top				: 160px									;
	}

	footer
	{
		bottom			: 64px									;
		height			: 40px									;
		justify-content	: space-between							;
		padding-top		: 20px									;
	}
}

@media (min-aspect-ratio: 20/16)
{
	header
	{
		height			: 96px									;
		top				: 64px									;
	}

	main
	{
		height			: calc(100dvh - 264px)					;
		top				: 160px									;
	}

	footer
	{
		bottom			: 64px									;
		height			: 40px									;
		justify-content	: space-between							;
		padding-top		: 20px									;
	}
}

side-bar
{
	position			: absolute								;
	height				: 100dvh								;
	top					: 0px									;
	width				: 64px									;
}

side-bar:nth-child(1)
{
	left				: 0px									;
}

side-bar:nth-child(2)
{
	right				: 0px									;
}


/* --- BORDER ELEMENTS ----------------------------------------------------------------------------------------------------- */


#border-left-top
{
	border-left			: 2px var(--qd-norm-line-a030) solid	;
	border-top			: 2px var(--qd-norm-line-a030) solid	;
	height				: 24px									;
	margin				: 32px 8px 8px 32px						;
	width				: 24px									;
}

#border-left-center
{
	height				: calc(100dvh - 128px)					;
	width				: 64px									;
}

#border-left-bottom
{
	border-bottom		: 2px var(--qd-norm-line-a030) solid	;
	height				: 24px									;
	margin				: 8px 8px 32px 32px						;
	width				: 24px									;
}


#border-right-top
{
	border-right		: 2px var(--qd-norm-line-a030) solid	;
	height				: 24px									;
	margin				: 32px 32px 8px 8px						;
	width				: 24px									;
}


/* --- HEADER ELEMENTS --- CORP. IDENTITY , MENU AND CALL TO ACTION -------------------------------------------------------- */


.cpi
{
	height				: 64px									;
	left				: 0px									;
	position			: absolute								;
	top					: 0px									;
	width				: 224px									;
}

menu
{
	display				: flex									;
	height				: 64px									;
	position			: absolute								;
	text-transform		: uppercase								;
}

.cta
{
	align-items			: center								;
	border				: 1px var(--qd-hlgt-neut-a100) solid	;
	border-radius		: 24px									;
	color				: var(--qd-hlgt-neut-a100)				;
	cursor				: pointer								;
	display				: flex									;
	height				: 48px									;
	justify-content		: center								;
	margin-left			: 24px									;
	position			: absolute								;
	right				: 0px									;
	text-align			: center								;
	top					: 8px									;
	width				: 128px									;
}

@media (max-aspect-ratio: 15/16)
{
	menu
	{
		bottom			: 0px									;
		justify-content	: center								;
		width			: 100%									;
	}
}

@media ((min-aspect-ratio: 15/16) and (max-aspect-ratio: 20/16))
{
	menu
	{
		left			: 224px									;
		justify-content	: right									;
		padding-right	: 24px									;
		padding-top		: 8px									;
		width			: calc(100% - 352px)					;
	}
}

@media (min-aspect-ratio: 20/16)
{
	menu
	{
		left			: 224px									;
		justify-content	: right									;
		padding-right	: 24px									;
		padding-top		: 8px									;
		width			: calc(100% - 352px)					;
	}
}


/* --- CORPORATE IDENTITY -------------------------------------------------------------------------------------------------- */


#cpi-logo
{
	fill				: var(--qd-norm-text-a100)				;
	float				: left									;
	height				: 64px									;
	stroke				: none									;
	width				: 64px									;
}

#cpi-name
{
	float				: left									;
	font-size			: 32px									;
	height				: 64px									;
	padding-top			: 12px									;
	width				: 160px									;
}


/* --- MENU ---------------------------------------------------------------------------------------------------------------- */


.menu-object , .menu-choice
{
	align-items			: center								;
	display				: flex									;
	height				: 48px									;
	justify-content		: center								;
}

.menu-object , .menu-choice-item
{
	color				: var(--qd-norm-text-a070)				;
	cursor				: pointer								;
}

.menu-choice-dash
{
	color				: var(--qd-norm-text-a070)				;
}

.menu-object:hover , .menu-choice-item:hover
{
	color				: var(--qd-norm-text-a100)				;
	text-decoration		: underline								;
}

.selected
{
	color				: var(--qd-norm-text-a100) !important	;
}

@media (max-aspect-ratio: 15/16)
{
	.menu-object , .menu-choice
	{
		padding			: 0 12px								;
	}
}

@media ((min-aspect-ratio: 15/16) and (max-aspect-ratio: 20/16))
{
	.menu-object , .menu-choice
	{
		padding			: 0 24px								;
	}
}

@media (min-aspect-ratio: 20/16)
{
	.menu-object , .menu-choice
	{
		padding			: 0 24px								;
	}
}


/* --- CALL TO ACTION ------------------------------------------------------------------------------------------------------ */


.cta:hover
{
	background			: var(--qd-hlgt-neut-a100)				;
	color				: var(--qd-hlgt-text-a100)				;
	font-weight			: 600									;
}


/* --- PAGES --------------------------------------------------------------------------------------------------------------- */


.page
{
	display				: flex									;
	height				: 100%									;
	justify-content		: center								;
	width				: 100%									;
}

.tagline
{
	color				: var(--qd-acnt-text-a100)				;
	text-transform		: uppercase								;
}

.caption , .caption > span
{
	font-size			: 56px									;
	font-weight			: 600									;
}

.span-acc
{
	color				: var(--qd-acnt-text-a100)				;
}

@media (max-aspect-ratio: 15/16)
{
	.page
	{
		flex-direction	: column								;
		justify-content	: space-around							;
	}

	.block
	{
		width			: 100%									;
	}
}

@media ((min-aspect-ratio: 15/16) and (max-aspect-ratio: 20/16))
{
	.page
	{
		align-items		: center								;
		flex-direction	: row									;
	}

	.block:first-child
	{
		width			: 60%									;
	}

	.block:last-child
	{
		width			: 40%									;
	}
}

@media (min-aspect-ratio: 20/16)
{
	.page
	{
		align-items		: center								;
		flex-direction	: row									;
	}

	.block:first-child
	{
		width			: 60%									;
	}

	.block:last-child
	{
		width			: 40%									;
	}
}


/* --- PAGE COMMON ELEMENTS ------------------------------------------------------------------------------------------------ */


.image-container
{
	aspect-ratio		: 1										;
}

.image-container-border:first-child
{
	float				: left									;
	height				: 100%									;
	width				: 48px									;
}

.image-container-border:last-child
{
	float				: left									;
	height				: 100%									;
	width				: 32px									;
}

.image-container-border-left-top
{
	border-left			: 1px var(--qd-acnt-text-a100) solid	;
	border-top			: 1px var(--qd-acnt-text-a100) solid	;
	height				: 18px									;
	margin				: 24px 6px 6px 24px						;
	width				: 18px									;
}

.image-container-border-left-center
{
	height				: calc(100% - 96px)						;
	width				: 64px									;
}

.image-container-border-left-bottom
{
	border-bottom		: 1px var(--qd-acnt-text-a100) solid	;
	height				: 18px									;
	margin				: 6px 6px 24px 24px						;
	width				: 18px									;
}

.image-container-border-right-top
{
	border-right		: 1px var(--qd-acnt-text-a100) solid	;
	height				: 18px									;
	margin				: 24px 0px 6px 14px						;
	width				: 18px									;
}

.image-container-content
{
	float				: left									;
	height				: 100%									;
	position			: relative								;
	width				: calc(100% - 80px)						;
}


/* --- PAGE 00 ( LANDING ) ------------------------------------------------------------------------------------------------- */


#tagline-000
{
	margin-bottom		: 16px									;
}

#explain-000
{
	color				: var(--qd-norm-text-a070)				;
	margin-top			: 32px									;
}

@media (max-aspect-ratio: 15/16)
{
	#image-container-000
	{
		height			: 100%									;
		margin			: 0 calc(50% - 20dvh)					;
		max-height		: 40dvh									;
		max-width		: 60dvw									;
	}
}

@media ((min-aspect-ratio: 15/16) and (max-aspect-ratio: 20/16))
{
	#image-container-000
	{
		max-height		: 48dvh									;
		width			: 100%									;
	}
}

@media (min-aspect-ratio: 20/16)
{
	#image-container-000
	{
		max-height		: 48dvh									;
		width			: 100%									;
	}
}

#image-000-bg
{
	align-items			: center								;
	display				: flex									;
	height				: 100%									;
	justify-content		: center								;
	left				: 0										;
	padding-bottom		: 32%									;
	position			: absolute								;
	transform			: scale(1.35)							;
	top					: 0										;
	width				: 100%									;
	z-index				: 0										;
}

#bg-logo
{
	fill				: var(--qd-acnt-area-a030)				;
	height				: 64px									;
	stroke				: none									;
	width				: 64px									;
}

#bg-name
{
	color				: var(--qd-acnt-area-a030)				;
	font-size			: 32px									;
	height				: 64px									;
	padding-top			: 12px									;
	width				: 160px									;
}

#image-000-fg
{
	left				: 0										;
	max-height			: 44dvh									;
	position			: absolute								;
	top					: 0										;
	width				: 100%									;
	z-index				: 1										;
}


/* --- FOOTER -------------------------------------------------------------------------------------------------------------- */


.footer-links
{
	color				: var(--qd-norm-text-a070)				;
	display				: flex									;
	gap					: 24px									;
}

#link-contact , #link-imprint
{
	color				: var(--qd-norm-text-a070)				;
	cursor				: pointer								;
	text-transform		: uppercase								;
}

#link-contact:hover , #link-imprint:hover
{
	color				: var(--qd-norm-text-a100)				;
	text-decoration		: underline								;
}

@media (max-aspect-ratio: 15/16)
{
	.footer-line
	{
		color			: var(--qd-norm-text-a100)				;
		text-align		: center								;
		width			: 100%									;
	}

	.footer-links
	{
		justify-content	: center								;
		width			: 100%									;
	}
}

@media ((min-aspect-ratio: 15/16) and (max-aspect-ratio: 20/16))
{
	.footer-line
	{
		color			: var(--qd-norm-text-a070)				;
	}

	.footer-links
	{
		justify-content	: right									;
		width			: fit-content							;
	}
}

@media (min-aspect-ratio: 20/16)
{
	.footer-line
	{
		color			: var(--qd-norm-text-a070)				;
	}

	.footer-links
	{
		justify-content	: right									;
		width			: fit-content							;
	}
}


/* --- END OF FILE --- HOME.CSS -------------------------------------------------------------------------------------------- */