:root {
	--primary: #faca30;
	--primary-old:#f9c20d;
	--secondary: #222222;
	--tertiary: #999999;
	--light: #efefef;
	--text: #2E282A;
	--text-hover: #8A7968;
}

body {
	margin: 0;
	font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	background-color: var(--secondary);
	color: var(--light);
}

header {
	position: sticky;
	top: 0;
	display: flex;
	gap: .5rem;
	padding: .75rem 1rem;
	background: var(--secondary);
	border-bottom: 1px solid var(--primary);
	z-index: 101;
	align-items: center;
	flex-wrap: wrap;
}

#roles {
	display: flex;
	gap: .5rem;
}

footer {
	position: sticky;
	bottom: 0;
	padding: .75rem 1rem;
	border-top: 1px solid var(--secondary);
	background: var(--primary);
	color: var(--secondary);
	text-align: center;
}

button {
	cursor: pointer;
	padding: .5rem .8rem;
	border-radius: .5rem;
	color: var(--tertiary);
	background: transparent;
	border: 1px solid var(--tertiary);
}

button:hover {
	background: rgba(250, 202, 48, .12);
}

button.active {
	color: var(--primary);
	background: transparent;
	border-color: var(--primary);
}

a, a:visited {
	color: var(--text);
}

a:hover {
	color: var(--text-hover);
	background: rgba(250, 202, 48, .12);
}

#cy {
	width: 100vw;
	height: calc(100vh - 58px);
}

.legend {
	position: absolute;
	left: 1rem;
	top: 64px;
	background: transparent;
	border: 1px solid var(--light);
	padding: .5rem .6rem;
	border-radius: .5rem;
	font-size: 1rem;
	color: #fff;
}

.legend b {
	display: inline-block;
	width: .75rem;
	height: .75rem;
	margin-right: .35rem;
	border-radius: 50%;
	vertical-align: .15rem;
}

.header-text-logo {
	border: none;
}

#note {
	padding: 1rem;
	color: var(--light);
	background: transparent;
	display: inline-block;
	position: absolute;
	right: 0;
	max-width: 60ch;
	overflow-wrap: break-word;
	word-wrap: break-word;
	z-index: 100;
}

.social-media {
	margin-left: auto;
	display: flex;
	gap: .5rem;
	align-items: center;
}

.social-media a {
	display: inline-flex;
	border-radius: .5rem;
	padding: .25rem .4rem;
	color: var(--tertiary);
	border: 1px solid var(--tertiary);
	text-decoration: none;
}

.social-media a:hover {
	background: rgba(250, 202, 48, .12);
}

@media (max-width: 768px) {
	.header-text-logo {
		display: none;
	}

	#note {
		display: block;
		position: relative;
	}

	.legend {
		left: auto;;
		right: auto;
		top: auto;
		bottom: auto;
		position: relative;
		padding: .5rem .6rem;
		margin: 0 .5rem 0.25rem;
		border-radius: .5rem;
		font-size: 1rem;
		color: #fff;
	}

	.legend {
		position: sticky;
		bottom: calc(var(--footer-h, 0px) + 8px); /* bleibt über dem Footer kleben */
		z-index: 50;
		backdrop-filter: saturate(120%) blur(2px);
	}

	#footer {
		position: sticky;
		bottom: 0;
		z-index: 60;
	}

	.social-media {
		display: none;
		order: 3;
		width: 100%;
		justify-content: center;
		margin-top: .4rem;
	}

	button {
		padding: .25rem .4rem;
	}

	footer {
		padding: .25rem .4rem;
	}

	#note {
		padding: .125rem .5rem;
	}
}