:root {
	--primaryHeaderHeight: 6rem;
}

/* -------------
	General 
------------- */
body {
	overflow-x: hidden; /* wegen der mobile nav, die raus slided */
	font-family: raleway, sans;
}
.flex {
	display: flex;
	gap: var(--gap, 1rem); /* erster Wert = Variable, zweiter Wert fallback wenn 1 nicht definiert */
}
.grid {
	display: grid;
	gap: var(--gap, 1rem); 
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* ------------------
	primary header 
------------------ */
.primary-header {
	--headerItemOrder: row-reverse;
	--headerHeight: var(--primaryHeaderHeight, 6rem);
	--headerBGColor: #ccc;
	--headerPaddingInline: 1.5rem;
	
	--burgerColor: red;
	--burgerLineWidth: 3px;
	--burgerSize: 2.5rem;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: var(--headerItemOrder, row);
	height: var(--headerHeight);
	background-color: var(--headerBGColor);
	padding-inline: var(--headerPaddingInline);
	position: fixed;
	z-index: 9999;
	top: 0;
    width: 100%;
}
.logo {
	margin: 1rem;
	
}
.mobile-nav-toggle {
	display: none;
}
.primary-nav ul {
	--gap: 2rem;
	
	list-style: none;
	background: hsl(0 0% 100% / 0.75);
}
@supports (backdrop-filter: blur(0.5rem)) { /* wenn Browser blur unterstützt, dann das */
	.primary-nav ul {
		background: hsl(0 0% 100% / 0.1);
		backdrop-filter: blur(0.5rem);
	}
}
.primary-nav a {
	text-decoration: none;	
}
.primary-nav a > span {
	font-weight: 700;
	margin-inline-end: 0.5rem; /* wie margin-right */
}

@media (max-width: 62.5em) { /* only for primary-nav */
	.primary-nav ul {
		--gap: 1rem;
		
		position: fixed;
		z-index: 1000;
		inset: 0 0 0 0; /* shortform top,bottom,left,right */		
		flex-direction: column;
		padding: 8rem 0;
		transform: translateX(100%);
		transition: transform 350ms ease-out;
	}
	.primary-nav ul[data-visible="true"] {
		transform: translateX(0%);
	}
	.primary-nav li {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.primary-nav a {
		background-color: #ccc;
		border-radius: 0.2rem;
		width: 15rem;
		padding: 0.5rem 0.5rem 0.5rem 1rem;
	}
	
	.mobile-nav-toggle {
		position: fixed;
		z-index: 9999;
		background: transparent;
		border: var(--burgerLineWidth) solid var(--burgerColor);
		border-radius: 0.2rem;
		width: var(--burgerSize);
		aspect-ratio: 1;
		top: 2rem;
		right: 2rem;
		display: block;
	}
	.mobile-nav-toggle .burger {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	}

	.mobile-nav-toggle .burger,
	.mobile-nav-toggle .burger::before,
	.mobile-nav-toggle .burger::after {
	  width: calc(var(--burgerSize) - 1.2rem);
	  height: var(--burgerLineWidth);
	  background-color: var(--burgerColor);
	  display: inline-block;
	}

	.mobile-nav-toggle .burger::before,
	.mobile-nav-toggle .burger::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  transition: all 0.2s;
	}

	.mobile-nav-toggle .burger::before {
	  top: -0.5rem;
	}
	.mobile-nav-toggle .burger::after {
	  top: 0.5rem;
	}

	.mobile-nav-toggle[aria-expanded="true"] .burger  {
	  background-color: transparent;
	}
	.mobile-nav-toggle[aria-expanded="true"] .burger::before {
	  top: 0;
	  transform: rotate(135deg);
	}
	.mobile-nav-toggle[aria-expanded="true"] .burger::after {
	  top: 0;
	  transform: rotate(-135deg);
	}

}