/* Farben und Schriften aus dem Gestaltungsprofil (E-057): die kurzen Namen zeigen auf die Profilvariablen */
.m3d-teil-kopf {
	--ink: var(--m3d-farbe-text);
	--dim: var(--m3d-farbe-text-leise);
	--gold: var(--m3d-farbe-akzent);
	--gold-2: var(--m3d-farbe-akzent-hell);
	--line: var(--m3d-farbe-linie);
	--hair: var(--m3d-farbe-haarlinie);
	--mono: var(--m3d-schrift-akzent);
	--grund: var(--m3d-farbe-grund);
	--auf-gold: var(--m3d-farbe-auf-akzent);
}

.m3d-teil-kopf * {
	box-sizing: border-box;
}

.m3d-teil-kopf {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--grund) 55%, transparent);
	border-bottom: 1px solid var(--hair);
	/* schneidet den Logo-Kreis oben am Kopf ab, unten darf er hinausragen */
	clip-path: inset(0 0 -200px 0);
}

.m3d-teil-kopf .leiste {
	width: min(1180px, 100% - 48px);
	margin-inline: auto;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Logo als Bild (Cascadia Mono, gezeichnet mit _intern/logo/werkzeug/, dreifache Auflösung).
     Der Kreis schließt links mit der Textkante der Seite ab; der Kopf schneidet ihn oben ab,
     unten ragt er etwas hinaus. */
.m3d-teil-kopf .brand {
	position: relative;
	display: block;
	flex: none;
	width: 152px;
	height: 70px;
}

.m3d-teil-kopf .brand img {
	position: absolute;
	left: 0;
	top: -39px;
	width: 152px;
	height: auto;
	display: block;
}

.m3d-teil-kopf .menue {
	display: flex;
	gap: 30px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.m3d-teil-kopf .menue a {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--dim);
	text-decoration: none;
	transition: color .25s;
	padding: 4px 0;
	border-bottom: 1px solid transparent;
}

.m3d-teil-kopf .menue a:hover {
	color: var(--ink);
}

.m3d-teil-kopf .menue [data-m3d-menue-aktiv] > a {
	color: var(--ink);
	border-bottom-color: var(--gold);
}

.m3d-teil-kopf .btn {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .04em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 19px;
	border-radius: 3px;
	border: 1px solid transparent;
	transition: all .25s;
	white-space: nowrap;
}

.m3d-teil-kopf .btn-gold {
	background: linear-gradient(180deg, var(--gold-2), var(--gold));
	color: var(--auf-gold);
	font-weight: 600;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 28%, transparent), 0 10px 34px -12px color-mix(in srgb, var(--gold) 70%, transparent);
}

.m3d-teil-kopf .btn-gold:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-2) 50%, transparent), 0 12px 40px -10px color-mix(in srgb, var(--gold) 90%, transparent);
}

.m3d-teil-kopf .menue-knopf {
	display: none;
	background: none;
	border: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .1em;
	padding: 9px 12px;
	border-radius: 3px;
	cursor: pointer;
}

/* Menü auf dem Handy: klappt unter dem Kopf auf */
.m3d-teil-kopf #m3d-kopf--menue-overlay {
	inset: 70px 0 auto 0;
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	width: auto;
	max-width: none;
	border: 0;
	border-bottom: 1px solid var(--hair);
	padding: 8px 24px 16px;
	background: color-mix(in srgb, var(--grund) 97%, transparent);
	color: var(--ink);
}

.m3d-teil-kopf #m3d-kopf--menue-overlay ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.m3d-teil-kopf #m3d-kopf--menue-overlay a {
	display: block;
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--dim);
	text-decoration: none;
	padding: 12px 0;
	border-bottom: 1px solid var(--hair);
}

.m3d-teil-kopf #m3d-kopf--menue-overlay [data-m3d-menue-aktiv] > a {
	color: var(--ink);
}

@keyframes m3d-kopf--einblenden {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}

.m3d-teil-kopf #m3d-kopf--menue-overlay:popover-open {
	animation: m3d-kopf--einblenden .2s ease-out;
}

@media (max-width: 820px) {
	.m3d-teil-kopf .menue, .m3d-teil-kopf .nav-cta {
		display: none;
	}
	
	.m3d-teil-kopf .menue-knopf {
		display: inline-block;
	}
}