/*
// DEBUG
* {
	border: 1px solid red;
}
*/
.site-header {

padding: var(--space-3) 0;

}

.site-header nav a {

margin-left: var(--space-3);
text-decoration: none;
color: var(--color-text);

}

.site-header nav a:hover {

color: var(--accent-design);

}

.logo {

font-weight: 600;
text-decoration: none;
color: var(--color-text);

}

/* ==========
// Navigation
// ========== */
:root{
	--design-color:#ff3b3b;
	--photo-color:#3b82f6;
	--budgems-color:#facc15;
}

body.design .nav-main:hover {
	color:var(--design-color);
}

body.photo .nav-main:hover {
	color:var(--photo-color);
}

body.budgems .nav-main:hover {
	color:var(--budgems-color);
}
	
.main-nav {
	position:fixed;
	left:0;
	top:0;
	height:100vh;
	width:240px;

	display:grid;
	grid-template-columns:1fr 1fr;

	background:#121212;
	color:white;
}

.nav-primary{
	padding:3rem 1rem;
}

.nav-secondary{
	padding:3rem 1rem;
}
	
.scroll-progress{
	position:fixed;
	top:0;
	left:0;

	height:3px;
	width:0;

	background:red;
}
	
.nav-main {	
	font-size:2rem;
	cursor:pointer;
	font-weight:500;
	letter-spacing:.05em;

	transition:
	transform .3s,
	color .3s;
}

.nav-main:hover {
	transform:translateX(6px);
}
	
.site-header {
  font-family: 'Jost', sans-serif;
  padding: 16px 28px;
  border-bottom: 1px solid transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

nav { display: flex; gap: 28px; }

nav a {
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.7;
}

nav a.active {
  opacity: 1;
  font-weight: 600;
  padding-bottom: 2px;
}

/* ── Site-Varianten ── */
.site-header--design {
  background: #fff;
  border-color: #e8e8e8;
  color: #111;
}
.site-header--design nav a          { color: #111; }
.site-header--design nav a.active   { border-bottom: 1.5px solid #111; }

.site-header--fotografie {
  background: #f7f5f2;
  border-color: #e0dbd3;
  color: #2a2016;
}
.site-header--fotografie nav a        { color: #2a2016; }
.site-header--fotografie nav a.active { border-bottom: 1.5px solid #8a6a3a; color: #8a6a3a; }

.site-header--budgems {
  background: #f0ede8;
  border-color: #ddd8cf;
  color: #3d2c0e;
}
.site-header--budgems nav a        { color: #3d2c0e; }
.site-header--budgems nav a.active { border-bottom: 1.5px solid #c47d00; color: #c47d00; }