/* Farben und Schriften bewusst fest wie im Entwurf reusch-web v3 (Profil noch ohne Farben und Schriften) */
.m3d-teil-kopf {
	--ink: #eceae3;
	--dim: #99a2b2;
	--gold: #e8a33d;
	--gold-2: #f3c877;
	--line: rgba(232, 163, 61, .16);
	--hair: rgba(255, 255, 255, .07);
	--mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

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

.m3d-teil-kopf {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	backdrop-filter: blur(12px);
	background: rgba(8, 11, 20, .55);
	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: #1a1204;
	font-weight: 600;
	box-shadow: 0 0 0 1px rgba(243, 200, 119, .28), 0 10px 34px -12px rgba(232, 163, 61, .7);
}

.m3d-teil-kopf .btn-gold:hover {
	transform: translateY(-1px);
	box-shadow: 0 0 0 1px rgba(243, 200, 119, .5), 0 12px 40px -10px rgba(232, 163, 61, .9);
}

.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: rgba(8, 11, 20, .97);
	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;
	}
}