/**
*  Seitenkopf
*
*  Höhe laut Vorlage: ca. 72 px, beim Scrollen 56 px.
*  Die Hauptfläche (main) rückt per --header-height unter den Kopf.
**/

:root {
	--header-height: 4.5rem;
	--header-height-shrunk: 3.5rem;
}

.l-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 999;
	inline-size: 100%;
	background: var(--surface-card);
	border-block-end: 1px solid var(--paper-line);
	transition: box-shadow 0.3s ease-out;
}

.l-header.is-shrinked {
	box-shadow: 0 0.25rem 0.75rem -0.25rem color-mix(in srgb, var(--color-primary-dark) 30%, transparent);
}

.c-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-s);
	min-block-size: var(--header-height);
	transition: min-block-size 0.3s ease-out;
}

.l-header.is-shrinked .c-header {
	min-block-size: var(--header-height-shrunk);
}

.c-header__navcontainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-2xs);
}