/*
 * Datei: profile-avatar.css
 * Modul: Profile (Sidebar)
 * Autor: MARKS MEDIA
 *
 * Zweck:
 *   Styling für Benutzer-Avatar und Buttons.
 *   Nutzt globale Farbvariablen (--color-1 bis --color-8)
 */

.mp-user-avatar img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-6);
	margin: 0 auto 10px;
	display: block;
	background: var(--color-8);
}

.mietp-avatar-buttons {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
}

/* Standard: Primärfarbe */
.mp-btn {
	background-color: var(--color-1);
	color: var(--color-8);
	border: 1px solid var(--color-1);
	padding: 6px 14px;
	cursor: pointer;
	border-radius: 4px;
	max-width: 200px;
	width: 100%;
	font-size: 14px;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.mp-btn:hover {
	background-color: var(--color-2);
	border-color: var(--color-2);
}

/* Sekundär (Outline) */
.mp-btn-outline {
	background: transparent;
	border: 1px solid var(--color-1);
	color: var(--color-1);
}

.mp-btn-outline:hover {
	background-color: var(--color-1);
	border-color: var(--color-1);
	color: var(--color-8);
}

/* Responsive */
@media (max-width: 768px) {
	.mp-user-avatar img {
		width: 90px;
		height: 90px;
	}
}