/*****************************************************

** Der Branding Container                           **

******************************************************/
.c-branding__container {
	transition: width, height 0.6s;
}

.c-branding {
	display: flex;
	align-items: center;
	z-index: 2000;
	transition: width, height 0.6s;
	height: -webkit-max-content;
	height: -moz-max-content;
	height: max-content;
	padding: var(--space-xs);
}

.l-header.is-shrinked .c-branding {
	height: 3rem;
}

/*****************************************************

** Das Logo im Seitenkopf                           **

******************************************************/

.c-branding__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: width, height 0.6s;
	padding-left: var(--padding);
	align-self: center;
	justify-self: start;

	& svg {
		float: left;
		transition: width, height 0.6s;
		width: 100%;
		width: 5rem;
		height: 5rem;
	}
}

.l-header.is-shrinked .c-branding__logo {
	height: 3rem;

	& svg {
		width: 2.5rem;
		height: 2.5rem;
	}
}

.c-branding__logo-link {
	border-bottom: 0;
}

/*****************************************************

** Header-Slogan neben dem Logo                     **

******************************************************/

.c-branding__slogan {
	position: relative;
	z-index: 99;
	transition: width, height, margin-top 0.6s;
	margin-top: 0.25em;
	padding-left: 0.5em;
	vertical-align: top;

	& svg {
		transition: width 0.6s;
		width: 13rem;
		height: auto;
	}

	&:hover {
		cursor: pointer;
		color: var(--cool-1);
		text-decoration: none;
	}
}

.l-header.is-shrinked .c-branding__slogan {
	position: relative;
	margin-top: 0.25em;

	& svg {
		width: 8rem;
	}
}

@media (min-width: 992px) {
	.c-branding {
		justify-content: center;
	}

	.c-branding__logo {
		padding-left: 0;
	}

}